Различия между Vue CLI 3.x и 2.x

главное отличие

Установка и сборка проекта
изменения каталога проекта
Изменения конфигурации проекта

Установка и сборка проекта

установка интерфейса командной строки

изменение имени пакета cli

# cli 2.x 
npm install -g vue-cli

# cli 3.x 
# 3.x 安装时，如果之前安装了2.x需要卸载2.x再安装
npm install -g @vue/cli

сборка проекта

`cli2.x`

vue init <template-name> <project-name>
npm i 
npm run dev

`cli3.x`

Установить новыйTypeScriptпараметры конфигурации

новый图形化安装метод

Сохраните метод установки до версии 2.x.

vue create hello-world
npm i
npm run serve
# 使用vue ui创建新项目(3.x新增)
vue ui
# 使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname

Изменения в структуре каталогов после версии 3.x [новые функции, заменяющие функции версии 2.x]

`config`Удаление каталога с использованием шаблона`.env`файл вместо [`模式`]

cli3новый模式Концепция, каждый режим имеет соответствующий файл конфигурации в проекте.Когда проект запускается, соответствующий файл будет загружен.В отличие от переменных среды, режим может включать несколько переменных среды.

Vue CLIПо умолчанию проект имеет три режима:
- developmentшаблон используется дляvue-cli-service serve
- productionшаблон используется дляvue-cli-service buildа такжеvue-cli-service test:e2e
- testшаблон используется дляvue-cli-service test:unit
Шаблон необходимо использовать при запуске проекта--modeуточнить

NODE_ENV=development npm run serve --mode mymode # 模式包含多个环境变量

Для каждого режима существует несколько переменных среды,cli3.xУказаны шаблон и переменная среды.envконфигурационный файл

.env # 所有环境
.env.mode # mode模式加载的配置文件[优先级高于.env]
.env.mode.development # mode模式下，development环境所加载的配置文件[优先级最高]

.envсведения о файле
- Эти файлы используются вместоconfigкаталог
- кVUE_APP_Переменные в начале можно передать в кодеprocess.envДоступ, другие переменные недоступны
- process.env всегда содержит две специальные переменныеNODE_ENVа такжеBASE_URL

3.xверсияconfigХотя директория удалена, если вы к ней не привыкли.envкстати, можно не ставить никакой режим, только указать NODE_ENV, настроить параметры по методу конфига 2.x

Удалить статический каталог [новый общедоступный каталог]

удаленstaticкаталог, который перемещает свои статические ресурсы вpublicкаталог, через/xx.xxпрямой доступ

`public`подробности

index.htmlВходной файл перемещается из корневого каталога вpublicкаталог, он имеет 3 специальные интерполяции
- <%= VALUE %>Используется для неэкранированной интерполяции;
- <%- VALUE %>Используется для экранирования интерполяции HTML;
- <% expression %>Используется для описания управления потоком JavaScript.
Статические ресурсы перемещаются вpublicхранилище каталогов
cli3Есть два способа работы со статическими ресурсами проекта.
- в ДжavaScriptилиtemplate/css(vue)импортировать по относительному пути. Такие ресурсы будут обрабатываться вебпаком (неpublicсодержание)
- Вставитьpublicкаталог или статические ресурсы, импортированные с использованием абсолютных путей. Такие ресурсы будут скопированы напрямую, минуяwebpackиметь дело с

`cli3.x`Конфигурация проекта другая (`build`удаление каталога)

2.xВерсия конфигурации проекта находится вconfigа такжеbuildзакончил, но прибыл3.xверсии, эти два каталога были удалены, если вам нужно настроить конфигурацию, вам нужно создать свой собственныйvue.config.jsдокумент

publicPath
- Базовый URL-адрес при развертывании пакета приложения, т.е.webpackизoutput.publicPath
- но,vueбудет использоваться в другом месте проектаpublicPath, поэтому не изменяйтеwebpackизoutput.publicPath
- заменитьbaseUrlиз,baseUrl 3.3устарело после
outputDir
- buildКаталог, в котором хранятся файлы сборки
- которыйoutput.path, но может только изменитьoutputDir, Не может быть измененoutput.path
assetsDirПосле компиляции вoutputDirКаталог, в котором статические ресурсы хранятся в каталоге
lintOnSaveнастроитьeslintПосле того, сохранять ли каждый разlintкод, включен по умолчанию
runtimeCompilerСледует ли использовать сборку Vue, включающую компилятор времени выполнения, который не включен по умолчанию.
configureWebpack & chainWebpack
- Эти два параметра используются для настройкиwebpackКонтент, первый — объект слияния, второй — цепочка вызовов
- [cli3.6]webpackизbuildСжатие кода не включено по умолчанию, вам нужно установить переменную среды какproductionвключится
devServerподдерживать всехwebpack-dev-serverОпции
- Настройте порт проекта, доменное имяhost、port、https
- Настроить междоменный прокси проектаproxy
```
module.exports = {
  port: 8100,
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
```

Новые особенности

быстрое прототипирование

существуетcli3.xможно использовать вvue serveа такжеvue buildкоманду на один*.vueфайл для быстрого прототипирования

Недостатком vue serve является необходимость установки глобальных зависимостей, из-за чего его согласованность на разных машинах не может быть гарантирована. Так что это только для быстрого прототипирования

Установить глобальные зависимости

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

отдельный файл

<template>
  <h1>Hello!</h1>
</template>

`vue serve`запустить файл

vue serve myComponent.vue 
Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

`vue build`скомпилировать файл

vue build myComponent.vue 
Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

Графический интерфейс

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

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

vue ui # 启动图形化界面

Создайте имена проектов, инструменты управления и т. д.

Выберите «По умолчанию», «Пользовательские настройки», «Извлечь из удаленного репозитория».

Первый и третий варианты предназначены для непосредственного создания проекта, второй — для выполнения следующего шага, а информация на странице функций и конфигурации такая же, как и при предыдущей установке из командной строки.

Управление устаревшими проектами (включая проекты 2.X)

Управление плагинами (обновление, просмотр) (3.x)
Управление зависимостями (модулями) (удаление, установка, обновление, просмотр) (2.x, 3.x)
Изменение конфигурации проекта (3.x)
Задачи проекта (команды сценария проекта запускают, останавливают операции) (2.x, 3.x)

`cli`плагин

Что такое плагин

vue cli3.xИспользуется архитектура на основе подключаемых модулей, и все связанные зависимости cli представлены в виде@vue/cli-plugin-начало
Плагины могут изменять внутренниеwebpackконфигурации илиvue-cli-serviceввести команду
Большинство функций, перечисленных в процессе создания проекта, реализуются через плагины.

`vue add`Установка плагина

cli3.xПроект обеспечиваетvue addкоманда для установки плагина

vue add @vue/cli-plugin-eslint

Между тем, можно записать следующую команду для идентификации, в командной строке с эквивалентом команды

vue add eslint
vue add @vue/eslint

Эта команда также может устанавливать сторонние плагины в указанной области.

# 插件名：@foo/vue-cli-plugin-bar
vue add @foo/bar

Также возможно передать плагину параметры генератора

Это пропустит командную строку

vue add @vue/eslint --config airbnb --lintOn save

особый`vue-router`а также`vuex`

У них нет соответствующих плагинов, но их все же можно использоватьvue addдобавить их в проект

vue add router
vue add vuex

`vue invoke`генератор звонков

Эта команда пропустит процесс установки и напрямую вызовет генератор плагина, получив те же параметры, что и vue add

vue invoke @foo/bar

локальный плагин читать

Если вам просто нужно получить доступ к API плагина прямо в вашем проекте, не создавая полноценный плагин Можно настроить с помощью vuePlugin.service

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

Или добавьте vuePlugin.ui в качестве плагина пользовательского интерфейса.

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

Конфигурация по умолчанию

Что такое предустановленная конфигурация

Предустановленная конфигурация - это объект JSON, который содержит предопределенные параметры и плагины, необходимые для создания нового проекта. До тех пор, пока этот объектный файл выбирается при создании проекта, содержимое JSON файла может быть установлено. Общие проекты могут быть быстро настроены Создать проекты

{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  },
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

Предустановленная конфигурация включает в себя конфигурацию генератора плагинов и конфигурацию инструмента интеграции. Эти конфигурации будут основаны наuseConfigFilesОбъединить вpackage.jsonили соответствующий файл конфигурации, например, когда"useConfigFiles": trueкогда,configsЗначение будет объединено вvue.config.jsсередина

Предварительно настроенный модуль управления версиями

Указанный диапазон версий, который могут отображать плагины в конфигурации по умолчанию, если не указано значение последней версии в реестре (указано официальной рекомендацией)

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... 该插件的其它选项
    }
  }
}

Разрешить командную строку для плагинов

Каждый плагин может вводить свою собственную командную строку во время создания проекта, но при использовании конфигурации по умолчанию эти командные строки будут пропущены.Если вам нужно отобразить командную строку, вам нужно установить"prompts": trueТолько что

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // 让用户选取他们自己的 ESLint 配置
      "prompts": true
    }
  }
}

Использование предустановленных конфигураций

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

Конфигурация по умолчанию, сохраненная в процессе создания vue, по умолчанию хранится в ~/.vuerc. Запись предустановленной конфигурации в свойстве «presets» vuerc может отображать несколько предустановленных конфигураций при создании проекта. Просто выберите нужный проект для создания

{
  "useTaobaoRegistry": false,
  "packageManager": "npm",
  "presets": { // 预设配置添加的地方，可添加多个预设配置
    "my_sets": { // 名为‘my_sets’的预设配置
      "useConfigFiles": true,
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb",
          "lintOn": ["save", "commit"]
        }
      }
    }
  }
}

существует`vue create`используется в команде`--preset`Укажите предустановленную конфигурацию

Эта форма может загружать файлы только в формате json и имеет две формы: локальные пресеты и удаленные пресеты.

локальная предустановка

если--presetЗначением параметра является относительный или абсолютный путь к файлу, либо.jsonконец, загрузите локальную предустановку, в противном случае загрузите удаленную предустановку

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

# 或者，直接使用当前工作目录下的 json 文件：
vue create --preset my-preset.json my-project

удаленная предустановка

Получите пресеты, которыми поделились другие, из git

Публикация предустановленной конфигурации: Путем публикацииgit repoподелиться предустановленной конфигурацией с другими разработчиками,repoДолжны быть включены следующие файлы: *preset.json: Основной файл, содержащий предустановленные данные конфигурации (обязательно).
- generator.js: Генератор, который может внедрять или изменять файлы в проекте.
- prompts.js: можно бытьgeneratorколлекция опцийpromptsдокумент
вытягивать конфигурацию

# 从 GitHub repo 使用预设配置
vue create --preset username/repo my-project

GitLabа такжеBitBuckeт также поддерживается. Если вы получаете из частного репо, обязательно используйте--cloneОпции:

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
# 自托管的 repo
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project

Пример файла конфигурации

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.VUE_APP_NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  // 解析别名处理
  chainWebpack: config => {
    config.resolve.alias
      .set('@img', resolve('src/assets/img'))
      .set('@c', resolve('src/components'))
      .set('@m', resolve('src/mixins'))
      .set('@v', resolve('src/views'))
      .set('@s', resolve('src/store'))
  },
  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // 是否开启支持 foo.module.css 样式
    modules: false,
    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    extract: true,
    // 是否构建样式地图，false 将提高构建速度
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      }
    }
  },
  devServer: {
    port: 8010
  }
}