Добавить материал

и получить 10 документов
и свидетельство СМИ

Изображение пользователя Ефремова Ксения Александровна Ефремова Ксения Александровна

Презентация "Начало работы с Vue3"

  • pptx
  • 24.03.2025
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Иконка файла материала Все обо всем.pptx
Все обо всем

Все обо всем


Введение Инструментальные средства (CASE) можно разделить на категории назначения:

Введение

Инструментальные средства (CASE) можно разделить на категории назначения:
Средства анализа и проектирования (CASE.Аналитика)
Средства проектирования баз данных
Средства программирования (VSC)
Средства сопровождения и реинжиниринга (Object Team)
Средства окружения
Средства управления проектом

31/10/2023

Все обо всем

2
Практики создания структуры Подзаголовок

Практики создания структуры

Подзаголовок

Используйте одно файловый компонент

1.

Используйте одно файловый компонент
Пример структуры проекта:
public/: каталог для статических файлов.
src/: каталог для исходного кода приложения.
src/components/: каталог для компонентов приложения.
src/App.vue: основной компонент приложения.
src/main.js: точка входа для приложения.

Пояснение к наиболее важным файлам и папкам:

src - Исходный код нашего проекта:
assets - Ресурсы модуля, которые будут обрабатываться с помощью Webpack
components - здесь мы храним наши компоненты пользовательского интерфейса
router - здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
App.vue - это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
main.js - файл точки входа, который будет монтироваться App.vue - наш основной компонент пользовательского интерфейса
assets - ресурсы, которые не будут обрабатываться с помощью Webpack
index.html - возможно, вы помните, что приложение SPA всегда перезаписывает содержимое одного файла, так что это тот самый файл. Это файл, который мы покажем нашим пользователям. После сборки проекта этот файл загрузит статические файлы, которые были связаны с Webpack.



https://forproger.ru/article/osnovy-vuejs-sozdanie-i-nastrojka-proekta

4
ПРИМЕР КОМПОНЕНТА 5

ПРИМЕР КОМПОНЕНТА





5
Сохраняйте состояние в Vuex Vuex - это библиотека управления состоянием, которая позволяет хранить данные приложения и управлять ими в одном централизованном месте

Сохраняйте состояние в Vuex

Vuex - это библиотека управления состоянием, которая позволяет хранить данные приложения и управлять ими в одном централизованном месте. 
Vue.js 3 предоставляет улучшенную систему реактивности для работы с состоянием компонентов. Используйте функцию reactive для создания реактивных объектов.

6
import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); function increment() { state.count++; } return {…

import { reactive } from 'vue';

export default {
setup() {
const state = reactive({ count: 0 });

function increment() {
state.count++;
}

return { state, increment };
},
};

7
Роутинг и Vuex Vue Router и Vuex – это официальные библиотеки для роутинга и управления состоянием

Роутинг и Vuex
Vue Router и Vuex – это официальные библиотеки для роутинга и управления состоянием. Они также были обновлены для Vue.js 3.
Установите их с помощью npm:

8

nstall vue-router@next vuex@next

Сборка и развертывание Для сборки и развертывания приложения

Сборка и развертывание
Для сборки и развертывания приложения Vue.js 3 используйте команду build:


Это сгенерирует оптимизированную сборку в каталоге dist/, которую можно развернуть на любом хостинге.

9

npm run build

Избегайте использования глобальных таблиц стилей

2

Избегайте использования глобальных таблиц стилей
Вместо использования глобальных таблиц стилей используйте таблицы стилей с ограниченной областью действия для каждого компонента. Таким образом, вы можете гарантировать, что стиль специфичен для данного компонента и не будет мешать другим компонентам. Кроме того, это упрощает внесение изменений в отдельные компоненты, не затрагивая проект в целом.

10
Используйте ESLint для поддержания чистоты вашего кода

3

 Используйте ESLint для поддержания чистоты вашего кода
ESLint - это инструмент, который помогает вам выявлять и устранять проблемы с вашим кодом. Он может обнаруживать ошибки, потенциальные проблемы и проблемы со стилем в вашем коде. Это упрощает поддержание качества вашей кодовой базы с течением времени.
https://eslint.org/

11
Версия Chat GPT Подзаголовок

Версия Chat GPT

Подзаголовок

Шаг 1: Установка Vue CLI Vue CLI - это инструмент командной строки для создания и управления проектами

Шаг 1: Установка Vue CLI

Vue CLI - это инструмент командной строки для создания и управления проектами Vue.js. Для начала, убедитесь, что у вас установлен Node.js. Затем выполните следующие команды:
Установите Vue CLI глобально:


Создайте новый проект:

13

npm install -g @vue/cli

vue create my-vue-project

Выберите настройки для проекта

Выберите настройки для проекта. Рекомендуется выбрать опцию "Manually select features" и выбрать "Babel", "Router", и "Vuex" при необходимости.

После завершения настройки, перейдите в директорию проекта:

14

cd my-vue-project

Шаг 2: Создание компонентов В

Шаг 2: Создание компонентов

В Vue.js компоненты являются основными строительными блоками приложения. Давайте создадим несколько примеров компонентов.
Создайте новый компонент. Например, "HelloWorld.vue" в директории "src/components".

15





Импортируйте и используйте этот компонент в вашем основном приложении

Импортируйте и используйте этот компонент в вашем основном приложении. Откройте "src/App.vue" и добавьте следующий код:

16



Шаг 3: Создание маршрутизации

Шаг 3: Создание маршрутизации

Для добавления маршрутизации в вашем проекте, вы можете использовать Vue Router. Установите Vue Router с помощью следующей команды:

17

npm install vue-router

Затем создайте файл "router.js" в директории "src" и определите маршруты: import { createRouter, createWebHistory } from 'vue-router' import

Затем создайте файл "router.js" в директории "src" и определите маршруты:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

const router = createRouter({
history: createWebHistory(),
routes
})

export default router

18
Затем подключите маршрут в основном приложении, "src/main

Затем подключите маршрут в основном приложении, "src/main.js":

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

19
Шаг 4: Работа с API Для работы с

Шаг 4: Работа с API

Для работы с API в Vue.js, вы можете использовать библиотеку, такую как Axios. Установите Axios с помощью следующей команды:

20

npm install axios

Пример запроса к API и вывода данных: 21

Пример запроса к API и вывода данных:



21
Это основное руководство по созданию проекта на

Это основное руководство по созданию проекта на Vue.js 3. Вы можете настраивать и дополнять его в соответствии с вашими потребностями.

22
Кратко о реализации (этап создания vue create &&&) 23

Кратко о реализации (этап создания vue create &&&)

23
Создание дерева проектов 24

Создание дерева проектов

24
Все готово. И есть пара подсказок… 25

Все готово. И есть пара подсказок…

25
Сервер запущен 26

Сервер запущен

26
Структура проекта 27 Основной файл проекта (подключаем зависимости)

Структура проекта

27

Основной файл проекта (подключаем зависимости)

Файл с компонентами сайта

Файл с составлявшими сайта (картинки и тп)

Начальная страница 28

Начальная страница

28
29

29
30

30

Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

Посмотрите также