Доброго времени суток. В этой статье разберёмся с таким инструментом как Vue cli, рассмотрим как установить Vue cli и какие задачи решает этот инструмент.
Для чего нужен Vue cli?
Vue cli представляет собой инструмент, который позволяет удобно и быстро создать приложение или прототип приложения на Vue.js. Vue cli хорош тем, что для приложения не требуется писать конфигурацию webpack — дефолтная конфигурация уже встроена во Vue cli. Само собой вы можете дописывать и изменять конфиг webpack. Об этом мы еще поговорим в статье. Vue cli состоит из трех компонентов:
- CLI (
@vue/cli) — представляет собой npm-пакет, который устанавливается глобально и добавляет в терминал командуvue. С помощью нее можно создавать проект командойvue create, а командойvue uiможно управлять проектами из встроенного графического редактора. - Сервис CLI (
@vue/cli-service) — этот пакет устанавливает некоторые зависимости локально в каждый созданный проект. Паке как раз таки и отвечает за конфиг webpack и dev server. - CLI плагины — это пакеты, которые предоставляют дополнительный возможности для проекта — поддержка PWA, интеграция с ESlint и т.д.
Vue cli установка
Установить Vue cli можно следующими командами:
|
1 2 3 |
npm install -g @vue/cli # ИЛИ yarn global add @vue/cli |
Если команда выполнилась без ошибок, то в терминале должен появиться доступ к команде vue. Проверку можно произвести командой
|
1 |
vue --version |
Команда выведет в консоль версию установленного пакета Vue cli. На момент написания статьи актуальная версию пакета 4.5.13.
Создаем проект с помощью Vue cli
Для того чтобы создать проект воспользуемся командой vue create project-name.
project-name— это папка, в которой и будет создан проект.
Vue cli создание проекта
Вы можете выбрать дефолтные настройки с Vue 2/3 или настроить все индивидуально выбрав Manually select features.
При настройке вручную вам можно будет выбрать следующие опции:
- выбор версии Vue 2/3
- использовать Babel
- использовать TypeScript
- включить в сборку Vue Router и Vuex
- выбор CSS-препроцессора
- настройка линтера и форматтера кода (ESlint, Prettier)
- выбор библиотеки для unit-тестов
Vue cli установка — выбор опций при ручной настройке проекта
После успешной установки и скачивания пакетов сообщение в консоли предлагает нам перейти в папку проекта следующей командой в терминале:
|
1 |
cd project-name |
Теперь мы находимся в корневой директории нашего только что созданного проекта и можем запустить локальный сервер для разработки и кодить:
|
1 |
npm run serve |
После выполнения команды у нас поднимется сервер, который будет доступен по адресу http://localhost:8080/. Если перейти по адресу, то вы увидите следующее:
Vue cli установка — тестовый сервер для разработки
Структура проекта
На скриншоте ниже можно ознакомиться со структурой проекта, которую предлагает Vue cli.
Vue cli установка — структура проекта
Рассмотрим поподробнее структуру проекта
- node_modues — папка с npm-пакетами
- public — папка содержит в себе общедоступные файлы, которые не попадут в сборку webpack — это файлы html, favicon и тд
- src — папка хранит в себе ресурсы проекта
- src/assets — папка для хранения каких то дополнительных ресурсов, обычно статичных — картинки, иконки, возможно стили
- src/components — папка содержит компоненты проекта
- src/router — папка для файлов, в которых определяются роуты приложения (Vue router)
- src/store — папка для файлов, в которых определяется хранилище приложения (Vuex)
- src/view — папка для vue-компонентов, которые служат представлением для маршрутизации роутера
- src/App.vue — корневой компоненты приложения
Как изменить конфигурацию webpack во vue-cli?
Теперь поговорим о вопросе, который многих волнует — можем ли мы как-то изменять конфигурацию webpack под наши нужды? Да можем, для этого в корне проекта есть файл vue.config.js — если его нет создайте. В этом файлике есть опция configureWebpack, которая позволяет нам редактировать настройки webpack. В этом поле мы можем описывать все привычные настройки webpack.
Пример файла vue.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const path = require('path'); const fs = require('fs'); module.exports = { lintOnSave: false, filenameHashing: false, devServer: { contentBase: path.join(__dirname, 'dist'), https: { key: fs.readFileSync('./cert/server.key'), cert: fs.readFileSync('./cert/server.crt'), }, port: 443, host: 'localhost', hot: true, }, configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, './dist'), routes: ['/'], }), ], }, pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, './src/static/styles/_colors.less')], }, }, }; |
Заключение
Таким образом, мы познакомились с инструментов Vue-cli, который значительно упрощает жизнь разработчиков, научились создавать проекты и менять конфигурацию webpack. Если же вы хотите вручную настроить webpack для проекта vue, то советуем почитать статью — Webpack Vue js — простая сборка приложения
