Очень подробное руководство по Vue-cli3.0 [попробуйте прямо сейчас! ]

предисловие

В vue-cli 2.X я тоже писал похожую статьюстатья,в августе vue-cli обновился до 3.Х.В новой версии скаффолдинга очень мощные функции.Попробовав,мне очень понравилось.Напишу туториал,чтобы помочь вам ступить на яму.

Передовое расширенное накопление,Нет публики,GitHub

основное содержание:

Запуск/пакет один с нулевой конфигурацией.vueдокумент
Подробный процесс сборки
Основная рекомендация: создавайте/управляйте/запускайте проекты с помощью графического интерфейса

Установить:

Удалите старую версию:

Если вы заранее установили более старую версию глобальноvue-cli(1.x или 2.x), вам необходимо сначала удалить его:

npm uninstall vue-cli -g

Требования к версии узла:

3.x должен быть вNode.jsВерсия 8.9 или выше (рекомендуется 8.11.0+), нажмите здесь, чтобы установитьnode

У большинства людей установлен узел, используйте следующую командную строкуЗапросить версию вашего узла:

node -v

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

npm install -g n // 安装模块 这个模块是专门用来管理node.js版本的
n stable // 更新你的node版本

Под mac при обновлении версии, если выдается сообщение о недостаточном разрешении:

sudo n stable // 我就遇到了

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

npm install -g @vue/cli // 安装cli3.x
vue --version // 查询版本是否为3.x

Если cli3.x неудобен,cli3 также может использовать шаблоны 2.x:

npm install -g @vue/cli-init // 安装这个模块
// 就可以使用2.x的模板：vue init webpack my-project

Запуск/пакет один с нулевой конфигурацией`.vue`документ:

Установите расширение:

npm install -g @vue/cli-service-global

После установки расширения вы можете просто найти папку и создать файл .vue, как в следующем примере, а затем запустить:

vue serve App.vue // 启动服务
vue build App.vue // 打包出生产环境的包并用来部署

Как показано на рисунке ниже, вы можете быстро запустить службу, используя только файл .vue:

Как показано на рисунке, при запуске службыnode_modulesпакет, немного протестировал,Сервис поддерживает синтаксис ES6 и горячие обновления, который будет генерироватьdistпапка. (Есть только один новый файл test.vuenode_modules/distпапка)

Это отличная функция дляЭто очень удобно для разработки библиотеки, компонента, небольших демонстраций и т. д.!

Создайте проект в первый раз:

1. Командная строка:

vue create hello-cli3

hello-cli3 — это имя папки, если она не существует, она будетАвтоматически создавать папки, если он существует, он будет установлен в эту папку.
По сравнению с 2.х нужно вручную создавать папку самому Это тоже небольшая оптимизация.

2. Выберите шаблон:

В начале есть только два варианта:default(конфигурация по умолчанию) иManually select features(Ручная конфигурация)

Конфигурация по умолчанию толькоbabelа такжеeslintДругие должны быть настроены отдельно, поэтому мы выбираем второй вариант для ручной настройки.
После каждого выбора ручной настройки вам будет предложено сохранить конфигурацию, которая изображена на картинке.koroвариант, так что когда мы создадим проект позжеПросто используйте исходную конфигурациюВот и все, больше никаких настроек не требуется.

3. Выберите конфигурацию:

Выберите конфигурацию в соответствии с потребностями вашего проекта, пробел для выбора и отмены, клавиша A для выбора всех

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
  // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
  >( ) TypeScript                                 // 支持使用 TypeScript 书写源码
   ( ) Progressive Web App (PWA) Support          // PWA 支持
   ( ) Router                                     // 支持 vue-router
   ( ) Vuex                                       // 支持 vuex
   ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
   ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
   ( ) Unit Testing                               // 支持单元测试。
   ( ) E2E Testing

4. Выберите препроцессор css:

Если вы выбрали вариант препроцессора Css, он позволит вам выбрать этот

  ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  // 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
  > SCSS/SASS
    LESS
    Stylus

5. Использовать ли маршрутизацию`history`модель:

Здесь я рекомендую выбрать Нет, чтобы его можно было запаковать и кинуть на сервер и использовать напрямую.Если вы хотите использовать его позже, вы также можете открыть его самостоятельно.

Если вы выберете «да», вам необходимо настроить его на стороне сервера.

  Use history mode for router? (Requires proper server setup for index fallback in production) 
  // 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

6. Выберите правила проверки кода Eslint:

> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

7. Выберите, когда выполнять обнаружение правила кода:

Рекомендуется выбрать сохранение и обнаружение, и к моменту коммита проблем может накопиться много.

писал раньшеАвтоматическое исправление ошибок Eslint при сохранении VsCodeРекомендовать его.

  ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  >( ) Lint on save // 保存就检测
   ( ) Lint and fix on commit // fix和commit时候检查

8. Выберите тест e2e:

? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based)

9. Куда положить конфигурационные файлы babel, postcss, eslint:

Обычно мы размещаем его независимо и делаем package.json чище.

  ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  > In dedicated config files // 独立文件放置
    In package.json // 放package.json里

10. Сохранять ли конфигурацию:

Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as:  name // 然后你下次进入配置可以直接使用你这次的配置了

11. Скачать зависимости

12. Каталог, настроенный webpack, исчез:

Давайте взглянем на структуру нового проекта (ниже), вы обнаружите, что каталог конфигурации 2.x webpack исчез, то есть нет папок build и config:

Преимущества этого способаОчень дружелюбен к Сяобаю, две папки и куча файлов не влезет, глядя на голову большая.
затем вЦитировать~~копировать~~Также очень удобно, когда другие настраивают, просто скопируйте файл напрямую.
Настроить конфигурацию веб-пакета, мы должныСоздайте новый корневой каталогvue.config.jsдокумент, объект должен быть экспортирован в файл, а затем настроен, подробнее см.официальная документация
```
  // vue.config.js
  module.exports = {
    // 选项...
  }
```
Есть также некоторые небольшие изменения, такие как: статическая папка была изменена на общедоступную, папка маршрутизатора стала одним файлом и т. Д. (Я делал это раньше, хе-хе).

13. Запускаем проект:

Запускаем проект: npm run serve //Не предыдущий npm run dev
Открытьhttp://localhost:8080:

Создавайте/управляйте/запускайте проекты с помощью графического интерфейса:

Запустите графический интерфейс

vue ui

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

Создайте проект и импортируйте проект:

После выбора каталога импортируйте проект и нажмите «Импорт» ниже.
Создайте проект и введите имя папки:
Затем выберите предварительно сохраненные настройки, что очень удобно.Для создания проекта рекомендуется использовать графический интерфейс:

управление проектом:

Когда мы нажмем на проект hello-cli3, мы войдем в интерфейс управления проектом.

1. Панель инструментов:

Эта приборная панель в основном настроена для нашего удобства работы.
Эти параметры можно добавить/переместить, нажав кнопку в правом верхнем углу.

2. плагин vue-cli3.x:

Подключаемая функция vue-cli3, подробнееофициальная документация
Процесс установки плагина cli3:

3. Зависимости проекта

Очень удобно управлять зависимостями прямо в графическом интерфейсе!
При установке зависимостей не забудьте выбрать зависимости разработки/запуска!

4. Конфигурация проекта

Вы можете выполнить некоторые настройки и изменения правил Eslint для cli:

5. Задача:

serve Запустите проект, нажмите, чтобы запустить напрямую, не нужно снова вводить команды!
Вы можете четко видеть, как долго используется каждый модуль, что удобно для нас.Целевая оптимизация:
построить упакованный проект: здесьВ основном показывает функцию диаграммы, который более интуитивно понятен, чем предыдущее поколение отчетов 2.x, просто супер!

6. Другие

Интерфейс в ночном стиле, я предпочитаю этот интерфейс
Откройте редактор напрямую, отлично!
И какие-то непонятные кнопки

Эпилог

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

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.