Vue CLI | Установка и создание проекта

В этом руководстве вы узнаете, как установить Vue CLI, как создать проект Vue с помощью Vue CLI, как обслуживать и создавать их для производства и как использовать Vue UI. Создание проекта с помощью CLI создаст проект, предоставив нам предварительно настроенную отправную точку, на которой мы можем строить, а не начинать с нуля.

Для использования Vue CLI на нашем терминале требуется Node.js версии 8.9 или выше (рекомендуется v10+). С помощью nvm мы можем управлять несколькими версиями Node на одной машине!

Что такое Vue CLI?

Vue CLI — это пакет NPM, который устанавливается на определенное устройство, чтобы позволить разработчикам/пользователям получать доступ к vueкоманде через свой терминал. Этот интерфейс командной строки, который можно установить глобально или в определенный каталог на нашем ПК, позволяет нам быстро создать новый проект и создать приложение с помощью одной команды.

Это дает разработчикам Vue новый опыт и позволяет им начать разработку приложений Vue без необходимости иметь дело со сложной настройкой таких инструментов, как webpack . Одновременно его можно настроить и расширить с помощью плагинов для более продвинутых вариантов использования. Он состоит из нескольких частей, среди которых:

• Служба CLI , которая предоставляет несколько сценариев для работы с проектами Vue, например файлы serve, buildи inspectсценарии.
• Плагины CLI , которые представляют собой пакеты NPM, которые предоставляют дополнительные функции для нашего проекта Vue, некоторые из этих плагинов включают машинописный текст, PWA, VueX и т. д.

Если мы не хотим обрабатывать все через наш терминал, Vue CLI позволяет разработчикам выполнять задачи через простой в использовании интерфейс, который мы рассмотрим очень скоро.

Установка Vue CLI

Всегда полезно проверить, был ли пакет уже установлен на нашем ПК, прежде чем устанавливать его, и мы можем сделать это для Vue CLI, просмотрев его версию:

$ vue --version
$ vue -V

Если мы видим версию, это означает, что Vue CLI уже установлен на нашем компьютере; в противном случае ошибка указывает на то, что он не был установлен. Мы можем установить Vue CLI, выполнив следующую команду:

$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli

Обычно CLI устанавливается глобально, а не локально, поэтому он доступен во всей системе.

Примечание. Даже если CLI уже установлен, его стоит обновить, если он еще не обновлен до последней версии.

$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli

После успешной установки Vue CLI на наш ПК мы теперь сможем получить доступ к исполняемому файлу Vue в нашем терминале, чтобы отобразить список возможных команд и их функций. Это можно сделать, выполнив следующую команду:

$ vue

Который отображает начальную страницу:

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                      create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]                             inspect the webpack config in a project with vue-cli-service
  serve                                                                alias of "npm run serve" in the current project
  build                                                                 alias of "npm run build" in the current project
  ui [options]                                                      start and open the vue-cli ui
  init [options] <template> <app-name>          generate a project from a remote template (legacy API, requires
                                             @vue/cli-init)
  config [options] [value]                                  inspect and modify the config
  outdated [options]                                          (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]                  (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]                   (experimental) run migrator for an already-installed cli plugin
  info                                                                   print debugging information about your environment
  help [command]                                              display help for command

  Run vue <command> --help for detailed usage of given command.

Создание проекта Vue с помощью Vue CLI

Как только Vue CLI будет успешно установлен, давайте создадим проект Vue! Используя этот инструмент, мы можем легко сформировать проект и создать основу для дальнейшего использования, включая импорт всех необходимых зависимостей и дополнительных, которые, как вы, возможно, уже знаете, вам понадобятся. Команда create, за которой следует имя проекта, используется для создания скелета проекта:

$ vue create my-cli-project

Примечание: my-cli-project это имя проекта. Устали от пространств! Любой пробел нарушит имя.

После запуска команды вам будут предложены три пресета:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

В первых двух вы можете выбрать версию Vue, наряду с Babel и ESLint. Только они будут упакованы . Если вы хотите включить другие полезные зависимости, такие как Vue Router, Vuex и т. д., вам нужно выбрать предустановку «Выбор функций вручную» .

Здесь вы можете просмотреть список доступных зависимостей, нажимая пробел , чтобы выбрать каждую опцию, которую вы хотите включить:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Он продолжит с несколькими вопросами конфигурации, начиная с версии Vue:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Далее следуют вопросы по каждому выбранному вами модулю, который можно настроить:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) (Y/n)

В конце CLI спросит вас, хотите ли вы сохранить эти параметры в качестве пресета ! Если вы это сделаете, в следующий раз, когда вы создадите новое приложение, вы сможете выбрать один из этих пресетов, помимо двух стандартных:

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y

Как только вы укажете имя для предустановки, оно появится после вызова createкоманды:

$ vue create my-app

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> my-preset ([Vue 3] babel, pwa, router, vuex, eslint)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Или вы можете напрямую вызвать его во время создания:

$ vue create --preset my-preset my-app

Примечание. Если мы забудем установить некоторые встроенные плагины во время создания шаблона нашего проекта, мы можем легко добавить их с помощью команды vue add my-pluginв любой момент позже.

После завершения процесса создания мы можем запустить приложение на сервере разработки непосредственно из CLI, используя следующую команду:

$ cd my-new-app
$ npm run serve

Каталог проекта легко проверяется через файловую систему или команду типа ls( dirдля пользователей Windows):

$ ls
README.md        jsconfig.json  package-lock.json  public/  vue.config.js
babel.config.js  node_modules/  package.json       src/

Затем наш браузер откроется, localhost:8080и мы увидим, что приложение запущено:

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

$ npm run build

Это выведет все в distпапку внутри нашего проекта, которую можно развернуть на различных хостинговых платформах.

Давайте рассмотрим другой метод создания приложения Vue, но вместо этого используйте графический интерфейс пользователя (GUI)!

Пользовательский интерфейс

Используя Vue CLI, вы также можете запустить другой проект — графический интерфейс для создания приложений:

$ vue ui

Это запустит графический интерфейс http://localhost:8000/:

Мы можем начать новый проект, перейдя на вкладку «Создать» , которая позволит вам выбрать путь для вашего проекта:

После того, как место для проекта выбрано, на новой странице вы можете ввести имя и выбрать предпочитаемый менеджер пакетов:

Процесс создания каркасных проектов почти такой же, и в фоновом режиме выполняется тот же код. Это всего лишь дело вкуса — предпочитаете ли вы интерфейс командной строки или пользовательский интерфейс. В том же духе нас попросят выбрать предпочтительный пресет, но если мы нажмем «Вручную», мы будем перенаправлены на страницу, где мы можем вручную выбрать наши предпочтительные плагины, как показано ниже:

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

После завершения процесса создания мы попадем на панель инструментов проекта, где сможем просмотреть все наши плагины, добавить плагины, управлять конфигурацией и назначать задачи:

Эти задачи включают в себя обслуживание нашего приложения в нашем браузере, его сборку для производства и т. д.

Заключение

В этом кратком руководстве вы узнали, как работает Vue CLI и как с его помощью создавать новые каркасные проекты Vue. Мы рассмотрели ручные настройки и сохранение пресетов, а также обслуживание и создание проектов. Наконец, мы рассмотрели пользовательский интерфейс как альтернативу CLI.