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

  1. вебпак
  2. вебпак-простой
  3. просматривать
  4. браузер-простой
  5. пва
  6. "просто"

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

Установка vue-кли

Чтобы установить vue-cli, проверьте следующие пункты.

Предпосылки:

  1. Node.js (›=4.x, предпочтительнее 6.x)
  2. нпм версии 3+
  3. Гит

Установка

Запустите приведенную ниже команду в терминале.

$ npm install -g vue-cli

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

$ vue init <template-name> <project-name>

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

Чтобы создать проект ToDo List, давайте продолжим и создадим новый проект.

$ vue init webpack todolist

После выполнения приведенного выше кода вы получите некоторые параметры на экране, которые необходимо заполнить. Мы заполнили их в следующем формате, как показано ниже.

$ vue init webpack ToDoList

? Project name todolist
? Project description A simple Vue.js List
? Author thewebjuice
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "ToDoList".

   To get started:
   
     cd ToDoList
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

Теперь проект готов, перейдите в проект и установите пакеты узла.

$ npm install

Запуск приложения также очень прост

$ npm start

Вам будет предложено открыть браузер по адресу http://localhost:8080, после чего вы сможете увидеть показанный ниже экран.

vue-кли

Это подтверждает, что ваш vue-cli был правильно установлен с шаблоном webpack и приложение работает нормально.

Это приводит к концу этого урока. Это явно позволяет вам намочить руки при создании приложения vue.js.

Первоначально опубликовано в The Web Juice.