Vue-cli

Vue-cli представляет инструмент для быстрого создания проектов под Vue.js. Такие проекты уже имеют некоторую готовую начальную структуру, установленную конфигурацию, в частности, конфигурацию для Webpack, а также ряд базовых файлов. Текущая верся cli 3.0.

Для использования vue-cli вначале его надо установить. Для в консоли или терминале нужно выполнить команду:

npm install -g @vue/cli

Если ранее был установлен vue-cli других версий, например, 2.х или 1.х, то их предварительно надо удалить с помощью команды npm uninstall vue-cli -g

Проверить текущую версию vue cli можно с помощью команды

vue --version

После установки vue-cli создадим на жестком диске какую-нибудь папку, где будут находиться проекта Vue.js и с помощью команды cd перейдем к этой папке.

cd C:\vuejs

Затем выполним в консоли следующую команду:

vue create cliapp

cliapp в данном случае это название создаваемого проекта, оно может быть произвольным.

После ввода команды консоль отобразит две опции для выбора:

Здесь предоставляется на выбор две опции:

• default(babel, eslint): проект с настройками по умолчанию, который включает функциональность Babel и Eslint.

• Manually select features: это опция позволяет вручную выбрать компоненты, которые будут добавлены в проект.

С помощью клавиш вверх-вниз можно перемещаться между опциями. К примеру выберем опцию Manually select features. После этого нам надо будет отметить те компоненты, которые мы хотим включить в проект:

Опять же с помощью клавиш вверх-вниз можно перещаться между компонентами. Если надо выбрать все или, наоборот, снять выделение со всех, то можно использовать клавишу A.

К примеру, НЕ выберем ни одного компонента, чтобы создаваемый проект был предельно минималистичен, и нажмем на Enter.

Далее будет предложено указать, как будет храниться конфигурация:

Здесь доступны две опции:

• In dedicated config files: хранение конфигурации в отдельных файлах.

• In package json: хранение всей конфигурации в package.json.

Выберем опцию In package json.

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

Созданный проект буде иметь следующую структуру:

Стоит отметить, что по умолчанию создается скрытый епозиторий git для проекта. Если он нам не нужен, то при создании проекта надо использовать флаг -n (сокращение от --no-git):

vue create -n cliapp

Если мы обратимся к файлу package.json, то увидим, что он уже содержит определение команд для запуска и построения приложения:

{
  "name": "cliapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-service": "^3.0.4",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Так, в секции scripts определена команда "serve", которая, используя инфраструктуру CLI, запускает проект. Перейдем к этой папке и выполним эту команду в консоли:

Консоль отобразит адрес, по которому можн обратиться к запущенному проекту. Например, в моем случае это http://localhost:8081/.

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

vue ui

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