Экспресс создание нового проекта на Vue 2

Инструкция по сборке нового проекта на Vue 2 со всем необходимым набором компонентов для начала разработки JavaScript приложения по стандарту ES6. Готовый проект будет иметь готовую структуру каталогов, конфигураций и модулей. А также будет автоматически исправлять ошибки и форматировать ваш код под стандарт ES6. Итоговый проект будет состоять из:

• Vue 2 - фреймворк Vue
• Babel - транспиляция проекта из ES6 в ES5
• PWA Support - поддержка Progressive Web App
• Router - управление маршрутами приложения
• Vuex - управление состоянием приложения
• ESLint - поддержка ES6
• Prettier - форматирование кода и стилизация под стандарт ES6
• Stylus - поддержка CSS

Требования к окружению

1. Установленный NodeJS
2. Модуль vue-cli

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

Встаем в директорию с проектами

cd C:\Develop

Экспресс установка одной командой

Указываем имя проекта и подготовленный однострочный пресет конфигурации. Имя проекта должно соответствовать стилю шашлычной нотации (kebab-case), т.е. быть написано в нижнем регистре и через дефис. В данном примере будет использоваться test-app

...

added 153 packages from 117 contributors in 15.267s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test-app.

...

Установка в интерактивном режиме

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

vue create test-app

Рекомендуемые настройки проекта:

• Please pick a preset: Manually select features
• Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
• Choose a version of Vue.js that you want to start the project with 2.x
• Use history mode for router? (Requires proper server setup for index fallback in production) Yes
• Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
• Pick a linter / formatter config: Prettier
• Pick additional lint features: Lint on save, Lint and fix on commit
• Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
• Save this as a preset for future projects? No

Настройка проекта

Переходим в папку с проектом

cd test-app

Создаем файл vue.config.js, он внесет правки в Webpack, добавит автоматическое форматирование кода и исправление ошибок при сохранении файлов

module.exports = {
  chainWebpack: config => {
    config.module.rule('eslint').use('eslint-loader').options({
      fix: true
    })
  }
}

Теперь проект содержит все необходимое к запуску

Запускаем проект

...
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.180:8080/
...

По указанному адресу можно наблюдать через браузер ваше Vue приложение