VUE (конспект): Создание проекта
Vite
На данный момент связка Vue + Vite - считается "современным стандартом" разработки. Оба инструмента создал Эван Ю (один и тот же человек). Основным преимуществом данной схемы является то, что Vite не пересобирает весь проект при каждом сохранении кода, он использует нативные модули браузера (ESM), что позволяет выполнять запуск и обновление проекта почти мгновенно. При изменении компонента во Vue обновляется только он сам, а не полностью вся страница.
1. Официальный установщик (с опциями):
npm create vue@latest
# Интерактивный выбор:
# ✔ Project name: … my-vue-app
# ✔ Add TypeScript? … No / Yes
# ✔ Add JSX Support? … No / Yes
# ✔ Add Vue Router for Single Page Application development? … No / Yes
# ✔ Add Pinia for state management? … No / Yes
# ✔ Add Vitest for Unit Testing? … No / Yes
# ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
# ✔ Add ESLint for code quality? … No / Yes
# ✔ Add Prettier for code formatting? … No / Yes
cd my-vue-app
npm install
npm run dev
2. Чистый шаблон:
Для Vue доступны шаблоны:
- vue (базовая версия);
- vue-ts (с TypeScript);
- vue-router (с роутером, community шаблон).
# Через npm
npm create vite@latest my-app -- --template vue
# Через yarn
yarn create vite my-app --template vue
# Через pnpm
pnpm create vite my-app --template vue
3. Команды в проекте Vite:
# Запуск dev сервера (горячая перезагрузка)
npm run dev
# Сборка (в папку dist/)
npm run build
# Локальный просмотр собранного проекта
npm run preview
Vue CLI
Vue Cli - официальный инструмент от разработчиков Vue. Требует Node.js 16+, на данный момент считается устаревшим методом (но все еще рабочим).
1. Установка через графический интерфейс:
В результате выполнения команды откроется браузер с GUI приложением для управления проектами.
vue ui
2. Базовая установка:
# установка CLI
npm install -g @vue/cli
# или
yarn global add @vue/cli
# создание проекта
vue create my-app
# Интерактивный выбор:
# ? Please pick a preset:
# Default ([Vue 3] babel, eslint)
# Default ([Vue 2] babel, eslint)
# ❯ Manually select features (выбрать вручную)
#При ручном выборе можно добавить:
# (*) Babel - транспиляция JS
# ( ) TypeScript - статическая типизация
# ( ) Progressive Web App (PWA)
# (*) Router - маршрутизация
# (*) Vuex / Pinia - управление состоянием
# (*) CSS Pre-processors - SCSS/Sass/Less
# (*) Linter / Formatter - ESLint + Prettier
3. Команды в проекте Vue Cli:
# Запуск dev сервера (http://localhost:8080)
npm run serve
# Сборка в папку dist/
npm run build
# Проверка кода линтером
npm run lint
Другое
1. С нуля (руками):
mkdir my-vue-app
cd my-vue-app
npm init -y
npm install vue
npm install -D vite @vitejs/plugin-vue
Файл vite.config.js:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()]
})
— Бесплатные Сайты и CRM.