Vue.js старт нового проекта

Старт нового прокта обычно начинается с инициализации node init, и добавления зависимостей. Но в Vue.js есть большое количество шаблонов проектов.

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

Доступные варианты в стандартном комплекте

• webpack - Полнофункциональный Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

• webpack-simple - Простой Webpack + vue-loader для быстрого прототипирования.

• browserify - Полнофункциональный Browserify + vueify setup with hot-reload, linting & unit testing.

• browserify-simple - Простой Browserify + vueify для быстрого прототипирования.

• simple - Максимально простой Vue скрипт в одном HTML файле

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

Простые версии - система сборки, с упрощенной версией, где приложение в одном файле и отстутствует тестирование.

Простая версия - один файл, в котором с cdn подключена библиотека vue.js и сделана заготовка приложения.

Все версии включают в себя сервер разработчика (минимальный live-server), которые следят за изменениями и перезагружают страницу. Но делают это по разному, простой - полное обновление.

Для начала лучше попробовать максимальную версию webpack,  и на основе нее собрать свой вариант.

Установка vue-cli

npm install -g vue-cli

Синтаксис команды

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

Пример использования

vue init browserify-simple myproject

Будут задаваться вопросы для описания пакета и включения систем сборки, например scss компилятора

Использование своей сборки. username/repo GitHub repo shorthand for your fork

#Github
vue init username/repo my-project

# Локальная версия
vue init ~/fs/path/to-custom-template my-project

Подробнее про синтаксис и создание шаблонов описано на странице документации, vue-cli

Прочитать описание шаблонов и примеры их использования на странице vuejs-templates