mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-03-13 12:40:18 -05:00
docs: [RU] Translation update (#4917)
* docs: (ru) config/README.md update devServer example * docs: (ru) creating-a-project.md update * docs: css.md add less examples * docs: browser-compatibility.md update * docs: deployment.md update * docs: (ru) config/readme.md update * docs: (ru) deployment.md update * docs: (ru) prototyping.md add yarn command * docs: config.md fix * docs: ui-localization.md typo * docs: [RU] Translation update * docs: [RU] Translation update * docs: vuex.md added * docs: router.md added * docs: migration from v3 added * docs: config.js updated * docs: config/readme.md updated * docs: unit-mocha.md updated * docs: css.md updated * docs: cli-service.md updated * docs: generator-api.md updated * docs: build-target.md update * docs: deployment.md update * docs: e2e-nightwatch.md update * docs: unit-jest.md update * docs: e2e-nightwatch.md update * docs: migrating-from-v3.md update * docs: plugin-dev.md update * docs: plugin-dev.md update * docs: plugin-dev.md update * docs: plugin-dev.md update
This commit is contained in:
Alexander Sokolov
committed by
Haoqun Jiang
Haoqun Jiang
parent
c7961cd5af
commit
02f2436bdb
@@ -272,16 +272,14 @@ module.exports = {
|
||||
{
|
||||
text: 'Плагины',
|
||||
items: [
|
||||
{ text: 'Babel', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel' },
|
||||
{ text: 'TypeScript', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript' },
|
||||
{ text: 'ESLint', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint' },
|
||||
{ text: 'PWA', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa' },
|
||||
{ text: 'Jest', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest' },
|
||||
{ text: 'Mocha', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha' },
|
||||
{ text: 'Cypress', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress' },
|
||||
{ text: 'Nightwatch', link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch' }
|
||||
{ text: 'Основные плагины', link: '/ru/core-plugins/' },
|
||||
{ text: 'Просмотр плагинов', link: 'https://awesomejs.dev/for/vue-cli/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Миграция с v3',
|
||||
link: '/ru/migrating-from-v3/'
|
||||
},
|
||||
{
|
||||
text: 'История изменений',
|
||||
link: 'https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md'
|
||||
@@ -311,12 +309,21 @@ module.exports = {
|
||||
'/ru/guide/webpack',
|
||||
'/ru/guide/mode-and-env',
|
||||
'/ru/guide/build-targets',
|
||||
'/ru/guide/deployment'
|
||||
'/ru/guide/deployment',
|
||||
'/ru/guide/troubleshooting'
|
||||
]
|
||||
}
|
||||
],
|
||||
'/ru/dev-guide/': [
|
||||
'/ru/dev-guide/plugin-dev.md',
|
||||
{
|
||||
title: 'Справочник API',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/ru/dev-guide/plugin-api.md',
|
||||
'/ru/dev-guide/generator-api.md',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Разработка UI',
|
||||
collapsable: false,
|
||||
@@ -326,7 +333,21 @@ module.exports = {
|
||||
'/ru/dev-guide/ui-localization.md'
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
'/ru/core-plugins/': [{
|
||||
title: 'Основные плагины Vue CLI',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/ru/core-plugins/babel.md',
|
||||
'/ru/core-plugins/typescript.md',
|
||||
'/ru/core-plugins/eslint.md',
|
||||
'/ru/core-plugins/pwa.md',
|
||||
'/ru/core-plugins/unit-jest.md',
|
||||
'/ru/core-plugins/unit-mocha.md',
|
||||
'/ru/core-plugins/e2e-cypress.md',
|
||||
'/ru/core-plugins/e2e-nightwatch.md'
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
|
||||
|
||||
Установка:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
# ИЛИ
|
||||
yarn global add @vue/cli
|
||||
@@ -45,7 +45,7 @@ yarn global add @vue/cli
|
||||
|
||||
Создание проекта:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue create my-project
|
||||
# ИЛИ
|
||||
vue ui
|
||||
|
||||
@@ -20,7 +20,7 @@ sidebar: auto
|
||||
|
||||
Файл должен экспортировать объект с настройками:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
// настройки...
|
||||
@@ -52,7 +52,7 @@ module.exports = {
|
||||
|
||||
Опция может быть полезна и на этапе разработки. Если вы хотите запускать сервер разработки из корня сайта, то можно устанавливать значение по условию:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? '/production-sub-path/'
|
||||
@@ -106,7 +106,7 @@ module.exports = {
|
||||
- объектом, который определяет свои `entry`, `template`, `filename`, `title` и `chunks` (все опциональные, за исключением `entry`). Любые другие свойства, указанные рядом с ними будут переданы непосредственно в `html-webpack-plugin`, для возможности более тонкой настройки этого плагина;
|
||||
- или строкой, определяющей свою `entry`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
pages: {
|
||||
index: {
|
||||
@@ -120,7 +120,7 @@ module.exports = {
|
||||
// должен быть <title><%= htmlWebpackPlugin.options.title %></title>
|
||||
title: 'Index Page',
|
||||
// все фрагменты, добавляемые на этой странице, по умолчанию
|
||||
// это извлеченные общий фрагмент и вендорный фрагмент.
|
||||
// это извлечённые общий фрагмент и вендорный фрагмент.
|
||||
chunks: ['chunk-vendors', 'chunk-common', 'index']
|
||||
},
|
||||
// когда используется строковый формат точки входа, то
|
||||
@@ -138,18 +138,20 @@ module.exports = {
|
||||
|
||||
### lintOnSave
|
||||
|
||||
- Тип: `boolean | 'error'`
|
||||
- Тип: `boolean | 'warning' | 'default' | 'error'`
|
||||
- По умолчанию: `true`
|
||||
|
||||
Выполнять ли линтинг кода при сохранении во время разработки с помощью [eslint-loader](https://github.com/webpack-contrib/eslint-loader). Эта опция действует только когда установлен плагин [`@vue/cli-plugin-eslint`](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint).
|
||||
|
||||
Когда значение `true`, `eslint-loader` показывает ошибки линтинга как предупреждения. По умолчанию предупреждения выводятся в терминал и не останавливают сборку ошибкой.
|
||||
Когда значение `true` или `'warning'`, `eslint-loader` показывает ошибки линтинга как предупреждения. По умолчанию предупреждения выводятся в терминал и не останавливают сборку ошибкой, поэтому это хорошее значение по умолчанию для разработки.
|
||||
|
||||
Чтобы ошибки линтинга отображались в браузере, можно указать `lintOnSave: 'error'`. Тогда `eslint-loader` будет всегда генерировать ошибки. Это также означает, что ошибки линтинга будут останавливать сборку ошибкой.
|
||||
Для отображения ошибок линтинга в браузере можно указать `lintOnSave: 'default'`. Это заставит `eslint-loader` генерировать ошибки и любые ошибки линтинга приведут к неудаче компиляции сборки.
|
||||
|
||||
Кроме того, вы можете настроить отображение в браузере предупреждений и ошибок:
|
||||
Установка значения в `'errors'` заставит `eslint-loader` считать все предупреждения ошибками, а значит и они будут отображены в браузере.
|
||||
|
||||
``` js
|
||||
Кроме того, можно настроить отображение в браузере предупреждений и ошибок:
|
||||
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
@@ -163,7 +165,7 @@ module.exports = {
|
||||
|
||||
Когда значение `lintOnSave` приводится к `true`, `eslint-loader` будет применяться как в разработке, так и в production. Если вы хотите отключить `eslint-loader` при сборке в production, можете воспользоваться следующей конфигурацией:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
lintOnSave: process.env.NODE_ENV !== 'production'
|
||||
@@ -186,6 +188,14 @@ module.exports = {
|
||||
|
||||
По умолчанию `babel-loader` игнорирует все файлы из `node_modules`. Если вы хотите явно транспилировать зависимость с помощью Babel, то вы можете перечислить её в этой опции.
|
||||
|
||||
::: warning Конфигурация Jest
|
||||
Эта опция не поддерживается [плагином cli-unit-jest](#jest), потому что в Jest мы не должны транспилировать код из `node_modules`, если в нём не используются нестандартные возможности — Node >8.11 уже поддерживает последние нововведения ECMAScript.
|
||||
|
||||
Однако, Jest иногда требуется преобразовывать содержимое из `node_modules`, например если в этом коде используется синтаксис ES6 `import`/`export`. В таком случае используйте опцию `transformIgnorePatterns` в файле `jest.config.js`.
|
||||
|
||||
См. [README плагина](../core-plugins/unit-jest.md) для получения дополнительной информации.
|
||||
:::
|
||||
|
||||
### productionSourceMap
|
||||
|
||||
- Тип: `boolean`
|
||||
@@ -235,10 +245,20 @@ module.exports = {
|
||||
|
||||
### css.modules
|
||||
|
||||
- Тип: `boolean`
|
||||
- По умолчанию: `false`
|
||||
Устаревшая опция, начиная с версии v4, используйте вместо неё [`css.requireModuleExtension`](#css-requireModuleExtension).
|
||||
|
||||
По умолчанию, только файлы заканчивающиеся на `*.module.[ext]` обрабатываются как CSS-модули. Установка в значение `true` позволит вам убрать `.module` из имён файлов и обрабатывать все `*.(css|scss|sass|less|styl(us)?)` файлы как CSS-модули.
|
||||
В версии v3 это противоположность опции `css.requireModuleExtension`.
|
||||
|
||||
### css.requireModuleExtension
|
||||
|
||||
- Тип: `boolean`
|
||||
- По умолчанию: `true`
|
||||
|
||||
По умолчанию, только файлы заканчивающиеся на `*.module.[ext]` обрабатываются как CSS-модули. Установка в значение `false` позволит вам убрать `.module` из имён файлов и обрабатывать все `*.(css|scss|sass|less|styl(us)?)` файлы как CSS-модули.
|
||||
|
||||
::: tip СОВЕТ
|
||||
Если в `css.loaderOptions.css` есть настроенные конфигурации CSS-модулей, то поле `css.requireModuleExtension` должно быть явно указано в `true` или `false`, иначе нельзя быть уверенным необходимо ли применять эти параметры ко всем CSS-файлам или нет.
|
||||
:::
|
||||
|
||||
См. также: [Работа с CSS — CSS-модули](../guide/css.md#css-модуnи)
|
||||
|
||||
@@ -255,6 +275,8 @@ module.exports = {
|
||||
|
||||
Извлечение CSS отключено по умолчанию в режиме `development`, поскольку оно несовместимо с горячей перезагрузкой CSS. Тем не менее, вы всё равно можете принудительно использовать извлечение стилей всегда, установив значение в `true`.
|
||||
|
||||
Вместо `true` также можно передать объект с настройками для [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) если необходимо детальнее настроить работу этого плагина.
|
||||
|
||||
### css.sourceMap
|
||||
|
||||
- Тип: `boolean`
|
||||
@@ -269,7 +291,7 @@ module.exports = {
|
||||
|
||||
Передача настроек в загрузчики относящиеся к CSS. Например:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
@@ -292,6 +314,8 @@ module.exports = {
|
||||
- [less-loader](https://github.com/webpack-contrib/less-loader)
|
||||
- [stylus-loader](https://github.com/shama/stylus-loader)
|
||||
|
||||
Также можно настроить синтаксис `scss` отдельно от `sass` через опцию `scss`.
|
||||
|
||||
См. также: [Передача настроек в загрузчики пре-процессоров](../guide/css.md#передача-настроек-в-загрузчики-пре-процессоров)
|
||||
|
||||
::: tip Совет
|
||||
@@ -316,7 +340,7 @@ module.exports = {
|
||||
|
||||
`devServer.proxy` может быть строкой, указывающей на сервер API для разработки:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
proxy: 'http://localhost:4000'
|
||||
@@ -326,9 +350,13 @@ module.exports = {
|
||||
|
||||
Это скажет серверу разработки проксировать любые неизвестные запросы (запросы, которые не соответствуют статическому файлу) на адрес `http://localhost:4000`.
|
||||
|
||||
::: warning ПРЕДУПРЕЖДЕНИЕ
|
||||
При указании `devServer.proxy` строкой будут проксироваться только XHR-запросы. Если необходимо протестировать API URL, не открывайте его в браузере, а вместо этого используйте инструмент для работы с API (например, Postman).
|
||||
:::
|
||||
|
||||
Если вам нужно больше контроля поведения прокси-сервера, вы также можете использовать объект с парами опций `path: options`. См. полный список опций [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config):
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
proxy: {
|
||||
@@ -347,10 +375,10 @@ module.exports = {
|
||||
|
||||
### parallel
|
||||
|
||||
- Тип: `boolean`
|
||||
- Тип: `boolean | number`
|
||||
- По умолчанию: `require('os').cpus().length > 1`
|
||||
|
||||
Использовать ли `thread-loader` для транспиляции Babel или TypeScript. Включается для production-сборок, когда система имеет более 1 процессорных ядер.
|
||||
Использовать ли `thread-loader` для транспиляции Babel или TypeScript. Включается для production-сборок, когда система имеет более 1 процессорных ядер. Указание числа определит количество задействованных воркеров (workers).
|
||||
|
||||
### pwa
|
||||
|
||||
@@ -364,7 +392,7 @@ module.exports = {
|
||||
|
||||
Этот объект не проходит никакой валидации своей структуры, поэтому можно его использовать для передачи произвольных параметров сторонним плагинам. Например:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
pluginOptions: {
|
||||
foo: {
|
||||
|
||||
14
docs/ru/core-plugins/README.md
Normal file
14
docs/ru/core-plugins/README.md
Normal file
@@ -0,0 +1,14 @@
|
||||
# Плагины
|
||||
|
||||
Vue CLI использует архитектуру на основе плагинов. Если изучить `package.json` в только что созданном проекте, можно обнаружить зависимости, которые начинаются с `@vue/cli-plugin-`. Плагины могут модифицировать внутреннюю конфигурацию webpack и внедрять команды в `vue-cli-service`. Большинство возможностей, перечисленных в процессе создания проекта, реализованы в виде плагинов.
|
||||
|
||||
Этот раздел содержит документацию для основных плагинов Vue CLI:
|
||||
|
||||
- [Babel](babel.md)
|
||||
- [TypeScript](typescript.md)
|
||||
- [ESLint](eslint.md)
|
||||
- [PWA](pwa.md)
|
||||
- [Jest](unit-jest.md)
|
||||
- [Mocha](unit-mocha.md)
|
||||
- [Cypress](e2e-cypress.md)
|
||||
- [Nightwatch](e2e-nightwatch.md)
|
||||
39
docs/ru/core-plugins/babel.md
Normal file
39
docs/ru/core-plugins/babel.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# @vue/cli-plugin-babel
|
||||
|
||||
> Плагин babel для vue-cli
|
||||
|
||||
## Конфигурация
|
||||
|
||||
По умолчанию используется Babel 7 + `babel-loader` + [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app), но есть возможность конфигурации через `babel.config.js` для использования любых других пресетов Babel или плагинов.
|
||||
|
||||
По умолчанию `babel-loader` исключает файлы внутри зависимостей из `node_modules`. Если вы хотите явно транспилировать модуль какой-то зависимости, необходимо указать его в опции `transpileDependencies` в файле `vue.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
transpileDependencies: [
|
||||
// может быть строкой или regex
|
||||
'my-dep',
|
||||
/other-dep/
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Кэширование
|
||||
|
||||
[cache-loader](https://github.com/webpack-contrib/cache-loader) используется по умолчанию, кэш хранится в `<projectRoot>/node_modules/.cache/babel-loader`.
|
||||
|
||||
## Параллелизация
|
||||
|
||||
[thread-loader](https://github.com/webpack-contrib/thread-loader) используется по умолчанию, если машина имеет более 1 ядра CPU. Это можно отключить указав `parallel: false` в файле `vue.config.js`.
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add babel
|
||||
```
|
||||
|
||||
## Внедряемые правила webpack-chain
|
||||
|
||||
- `config.rule('js')`
|
||||
- `config.rule('js').use('babel-loader')`
|
||||
- `config.rule('js').use('cache-loader')`
|
||||
48
docs/ru/core-plugins/e2e-cypress.md
Normal file
48
docs/ru/core-plugins/e2e-cypress.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# @vue/cli-plugin-e2e-cypress
|
||||
|
||||
> Плагин e2e-cypress для vue-cli
|
||||
|
||||
Он добавляет поддержку E2E тестирования с помощью [Cypress](https://www.cypress.io/).
|
||||
|
||||
Cypress предлагает богатый интерактивный интерфейс для запуска E2E тестов, но в настоящее время поддерживается запуск тестов только в Chromium. При наличии жёстких требований к E2E тестированию в нескольких браузерах, обратите внимание на плагин [@vue/cli-plugin-e2e-nightwatch](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch), основанный на Selenium.
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
- **`vue-cli-service test:e2e`**
|
||||
|
||||
Запуск E2E тестов через `cypress run`.
|
||||
|
||||
По умолчанию Cypress запускается в интерактивном режиме с графическим интерфейсом. Если необходимо запустить тесты в безголовом (headless) режиме (например, для CI), то следует указывать опцию `--headless`.
|
||||
|
||||
Команда автоматически запустит сервер в режиме production для выполнения E2E тестов. Если требуется запускать тесты несколько раз без необходимости перезапускать сервер каждый раз, можно запустить сервер с `vue-cli-service serve --mode production` в одном терминале, а затем запускать E2E тесты на этом сервере с помощью опции `--url`.
|
||||
|
||||
Опции:
|
||||
|
||||
```
|
||||
--headless запуск headless-режиме без GUI
|
||||
--mode указывает режим запуска сервера (по умолчанию: production)
|
||||
--url запускать E2E тесты с заданным URL вместо авто-запуска сервера
|
||||
-s, --spec (только в headless-режиме) запуск определённого файла. По умолчанию "all"
|
||||
```
|
||||
|
||||
Дополнительно:
|
||||
|
||||
- В режиме GUI, [все опции Cypress CLI для `cypress open`](https://docs.cypress.io/guides/guides/command-line.html#cypress-open) поддерживаются;
|
||||
- В режиме `--headless`, [все опции Cypress CLI для `cypress run`](https://docs.cypress.io/guides/guides/command-line.html#cypress-run) поддерживаются.
|
||||
|
||||
Примеры:
|
||||
- Запуск Cypress в headless-режиме для конкретного файла: `vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js`
|
||||
|
||||
## Конфигурация
|
||||
|
||||
Cypress пред-настроен под размещение всех файлов, связанных с E2E тестированием, в каталоге `<projectRoot>/tests/e2e`. При необходимости можно [настраивать Cypress через `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options).
|
||||
|
||||
## Переменные окружения
|
||||
|
||||
Cypress не загружает .env файлы для ваших файлов тестов, как это делает `vue-cli` для [кода приложения](../guide/mode-and-env.md#%D0%B8%D1%81%D0%BF%D0%BEn%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BE%D0%BA%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B2-%D0%BAn%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%BE%D0%BC-%D0%BA%D0%BE%D0%B4%D0%B5). Cypress поддерживает несколько способов для [определения переменных окружения](https://docs.cypress.io/guides/guides/environment-variables.html#), но самым простым будем использование .json файлов (`cypress.json` или `cypress.env.json`) для определения переменных окружения. Обратите внимание, что эти переменные доступны через функцию `Cypress.env`, а не через объект `process.env`.
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add e2e-cypress
|
||||
```
|
||||
141
docs/ru/core-plugins/e2e-nightwatch.md
Normal file
141
docs/ru/core-plugins/e2e-nightwatch.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# @vue/cli-plugin-e2e-nightwatch
|
||||
|
||||
> Плагин e2e-nightwatch для vue-cli
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
- **`vue-cli-service test:e2e`**
|
||||
|
||||
Запускает E2E тесты с помощью [Nightwatch.js](https://nightwatchjs.org).
|
||||
|
||||
Опции:
|
||||
|
||||
```
|
||||
--url запуск E2E-тестов по указанному URL, вместо авто-запуска сервера
|
||||
--config использовать пользовательский файл конфигурации nightwatch (перезаписывает внутренние настройки)
|
||||
--headless использовать chrome или firefox в headless-режиме
|
||||
--parallel использовать параллельный режим через test workers (доступно только в chromedriver)
|
||||
--use-selenium использовать сервер Selenium вместо chromedriver или geckodriver
|
||||
-e, --env окружения браузеров через запятую для тестирования (по умолчанию: chrome)
|
||||
-t, --test запустить тест по указанному пути к файлу
|
||||
-f, --filter glob для фильтрации тестов по имени файла
|
||||
```
|
||||
|
||||
[Поддерживаются все опции Nightwatch CLI](https://nightwatchjs.org/guide/running-tests/#command-line-options). Например: `--verbose`, `--retries` и т.д.
|
||||
|
||||
## Структура проекта
|
||||
|
||||
При установке плагина генерируется следующая структура каталогов. В ней будут примеры для большинства концептов тестирования доступных в Nightwatch.
|
||||
|
||||
```
|
||||
tests/e2e/
|
||||
├── custom-assertions/
|
||||
| └── elementCount.js
|
||||
├── custom-commands/
|
||||
| ├── customExecute.js
|
||||
| ├── openHomepage.js
|
||||
| └── openHomepageClass.js
|
||||
├── page-objects/
|
||||
| └── homepage.js
|
||||
├── specs/
|
||||
| ├── test.js
|
||||
| └── test-with-pageobjects.js
|
||||
└── globals.js
|
||||
```
|
||||
|
||||
#### `specs`
|
||||
Основное место расположения тестов. Может содержать вложенные каталоги, которые можно выбирать при запуске с помощью аргумента `--group`. [Подробнее](https://nightwatchjs.org/guide/running-tests/#test-groups).
|
||||
|
||||
#### `custom-assertions`
|
||||
Расположенные здесь файлы будут автоматически загружаться Nightwatch и добавляться в API `.assert` и `.verify` для расширения встроенных методов утверждений Nightwatch. Подробнее в документации [по созданию пользовательских утверждений](https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions).
|
||||
|
||||
#### `custom-commands`
|
||||
Расположенные здесь файлы будут автоматически загружаться Nightwatch и добавляться в API объекта `browser` для расширения встроенных команд Nightwatch. Подробнее в документации [по созданию пользовательских команд](https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands).
|
||||
|
||||
#### `page objects`
|
||||
Работа с объектами страниц — популярная методология в E2E-тестировании UI. Расположенные здесь файлы будут автоматически добавляться в API `.page`, при этом имя файла определит имя объекта страницы. Подробнее в документации [по работе с объектами страниц](https://nightwatchjs.org/guide/working-with-page-objects/).
|
||||
|
||||
#### `globals.js`
|
||||
Файл внешних глобальных переменных, который может содержать глобальные свойства или хуки. Подробнее в документации [по глобальным свойствам тестов](https://nightwatchjs.org/gettingstarted/configuration/#test-globals).
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add e2e-nightwatch
|
||||
```
|
||||
|
||||
## Конфигурация
|
||||
|
||||
Nightwatch предварительно сконфигурирован для запуска в Chrome по умолчанию. Доступен также Firefox через `--env firefox`. При необходимости запускать end-to-end тесты в других браузерах (например, Safari, Microsoft Edge), нужно добавить `nightwatch.conf.js` или `nightwatch.json` в корневой каталог проекта для настройки дополнительных браузеров. Конфигурация будет объединена во [внутреннюю конфигурацию Nightwatch](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-nightwatch/nightwatch.config.js).
|
||||
|
||||
При необходимости можно полностью заменить внутреннюю конфигурацию собственной с помощью опции `--config`.
|
||||
|
||||
Обратитесь к документации Nightwatch для информации о [параметрах конфигурации](https://nightwatchjs.org/gettingstarted/configuration/) и как [устанавливать драйверы браузеров](http://nightwatchjs.org/gettingstarted#browser-drivers-setup).
|
||||
|
||||
## Запуск тестов
|
||||
|
||||
По умолчанию, все тесты внутри каталога `specs` будут запускаться с использованием Chrome. Если необходимо запустить end-to-end тесты в headless-режиме в Chrome (или Firefox), укажите аргумент `--headless`.
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e
|
||||
```
|
||||
|
||||
**Запуск одного теста**
|
||||
|
||||
Для запуска одного теста укажите путь к файлу. Например:
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e tests/e2e/specs/test.js
|
||||
```
|
||||
|
||||
**Пропустить автоматический запуск сервера разработки**
|
||||
|
||||
Если сервер разработки уже запущен и необходимо пропустить автоматический запуск, укажите аргумент `--url`:
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e --url http://localhost:8080/
|
||||
```
|
||||
|
||||
**Запуск тестов в Firefox**
|
||||
|
||||
По умолчанию также поддерживается запуск тестов в Firefox. Выполните следующую команду (опционально можно добавить `--headless` для запуска Firefox в безголовом режиме):
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e --env firefox [--headless]
|
||||
```
|
||||
|
||||
**Запуск тестов в Firefox и Chrome одновременно**
|
||||
|
||||
Можно запускать тесты одновременно в обоих браузерах, определяя требуемые тестовые окружения через запятую (",") — не используя пробелы.
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e --env firefox,chrome [--headless]
|
||||
```
|
||||
|
||||
**Запуск тестов в параллельном режиме**
|
||||
|
||||
Для значительного увеличения скорости тестирования можно включить параллельный запуск тестов если имеются в наличии несколько тестовых наборов. Согласование осуществляется на файловом уровне и автоматически распределяется по доступным ядрам процессора.
|
||||
|
||||
На данный момент возможность доступна только в Chromedriver. Подробнее о [режиме параллельной работы](https://nightwatchjs.org/guide/running-tests/#parallel-running) можно прочитать в документации Nightwatch.
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e --parallel
|
||||
```
|
||||
|
||||
**Запуск тестов с Selenium**
|
||||
|
||||
Поскольку с версии `v4` автономный сервер Selenium больше не включён в этот плагин, да и в большинстве случаев работа с Selenium не требуется с версии Nightwatch v1.0.
|
||||
|
||||
Но возможность использования сервера Selenium по-прежнему имеется, для этого необходимо выполнить следующие шаги:
|
||||
|
||||
__1.__ Установите NPM-пакет `selenium-server`:
|
||||
|
||||
```sh
|
||||
$ npm install selenium-server --save-dev
|
||||
```
|
||||
|
||||
__2.__ Запустите команду с аргументом `--use-selenium`:
|
||||
|
||||
```sh
|
||||
$ vue-cli-service test:e2e --use-selenium
|
||||
```
|
||||
72
docs/ru/core-plugins/eslint.md
Normal file
72
docs/ru/core-plugins/eslint.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# @vue/cli-plugin-eslint
|
||||
|
||||
> Плагин eslint для vue-cli
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
- **`vue-cli-service lint`**
|
||||
|
||||
```
|
||||
Использование: vue-cli-service lint [options] [...files]
|
||||
|
||||
Опции:
|
||||
|
||||
--format [formatter] определяет форматтер (по умолчанию: codeframe)
|
||||
--no-fix отключает автоматическое исправление ошибок
|
||||
--max-errors количество ошибок, по достижению которого сборка заканчивается ошибкой (по умолчанию: 0)
|
||||
--max-warnings количество предупреждений, по достижению которого сборка заканчивается ошибкой (по умолчанию: Infinity)
|
||||
```
|
||||
|
||||
Проверяет и исправляет файлы. Если конкретные файлы для проверки не указаны, то будут проверяться все файлы в `src` и `test`.
|
||||
|
||||
Другие [настройки ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#options) также поддерживаются.
|
||||
|
||||
## Конфигурация
|
||||
|
||||
ESLint можно настраивать через `.eslintrc` или поле `eslintConfig` в файле `package.json`.
|
||||
|
||||
Линтинг при сохранении (Lint-on-save) при разработке с помощью `eslint-loader` включён по умолчанию. Это можно отключить с помощью опции `lintOnSave` в файле `vue.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
lintOnSave: false
|
||||
}
|
||||
```
|
||||
|
||||
Если установлено `true`, `eslint-loader` будет показывать ошибки линтинга в виде предупреждений. По умолчанию предупреждения только логируются в терминале и не завершают компиляцию ошибкой.
|
||||
|
||||
Чтобы показывать ошибки линтинга в браузере, можно использовать `lintOnSave: 'error'`. Это заставит `eslint-loader` всегда генерировать ошибки. Это также означает, что ошибки линтинга будут завершать компиляцию ошибкой.
|
||||
|
||||
Кроме того, можно настроить отображение в браузере как предупреждений, так и ошибок:
|
||||
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Когда значение `lintOnSave` приводится к истине, `eslint-loader` будет применяться как в разработке, так и в production. Если необходимо отключить `eslint-loader` при сборке production, можно использовать следующую конфигурацию:
|
||||
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
lintOnSave: process.env.NODE_ENV !== 'production'
|
||||
}
|
||||
```
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add eslint
|
||||
```
|
||||
|
||||
## Внедряемые правила webpack-chain
|
||||
|
||||
- `config.module.rule('eslint')`
|
||||
- `config.module.rule('eslint').use('eslint-loader')`
|
||||
128
docs/ru/core-plugins/pwa.md
Normal file
128
docs/ru/core-plugins/pwa.md
Normal file
@@ -0,0 +1,128 @@
|
||||
# @vue/cli-plugin-pwa
|
||||
|
||||
> Плагин pwa для vue-cli
|
||||
|
||||
Добавляемый этим плагином service worker включается только в production окружении (к примеру, только при запуске сборки через `npm run build` или `yarn build`). Использование service worker при разработке не рекомендуется, так как может привести к ситуации, когда используются кэшированные ранее ресурсы и не учитываются последние локальные изменения.
|
||||
|
||||
Вместо этого в режиме разработки добавляется файл `noopServiceWorker.js`. Этот файл service worker является эффективным 'no-op', который сбрасывает любые другие service worker, зарегистрированные ранее для такой же комбинации host:port.
|
||||
|
||||
При необходимости протестировать service worker локально, соберите приложение и запустите простой HTTP-сервер из каталога сборки. Рекомендуется использовать браузер в инкогнито-режиме для избежания осложнений с кэшем вашего браузера.
|
||||
|
||||
## Конфигурация
|
||||
|
||||
Конфигурация осуществляется через свойство `pwa` в файле `vue.config.js`, или через поле `"vue"` в файле `package.json`.
|
||||
|
||||
- **pwa.workboxPluginMode**
|
||||
|
||||
Выбор один из двух режимов, поддерживаемых используемым [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin).
|
||||
|
||||
- `'GenerateSW'` (по умолчанию) создание нового файла service worker каждый раз при пересборке приложения.
|
||||
|
||||
- `'InjectManifest'` использование существующего файла service worker и создание копии этого файла с внедрённым в него «precache manifest».
|
||||
|
||||
Руководство «[Какой плагин использовать?](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use)» поможет выбрать один из двух режимов.
|
||||
|
||||
- **pwa.workboxOptions**
|
||||
|
||||
Настройки, передаваемые в используемый `workbox-webpack-plugin`.
|
||||
|
||||
Для получения дополнительной информации о поддерживаемых значениях обратитесь к руководству для [`GenerateSW`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) или для [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config).
|
||||
|
||||
- **pwa.name**
|
||||
|
||||
- По умолчанию: поле "name" в файле `package.json`
|
||||
|
||||
Используется в качестве значения мета-тега `apple-mobile-web-app-title` в сгенерированном HTML. Обратите внимание, необходимо отредактировать файл `public/manifest.json` для соответствия этому значению.
|
||||
|
||||
- **pwa.themeColor**
|
||||
|
||||
- По умолчанию: `'#4DBA87'`
|
||||
|
||||
- **pwa.msTileColor**
|
||||
|
||||
- По умолчанию: `'#000000'`
|
||||
|
||||
- **pwa.appleMobileWebAppCapable**
|
||||
|
||||
- По умолчанию: `'no'`
|
||||
|
||||
По умолчанию значение `'no'`, потому что iOS до версии 11.3 не имела надлежащей поддержки PWA. См. [эту статью](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb) для более подробной информации.
|
||||
|
||||
- **pwa.appleMobileWebAppStatusBarStyle**
|
||||
|
||||
- По умолчанию: `'default'`
|
||||
|
||||
- **pwa.assetsVersion**
|
||||
|
||||
- По умолчанию: `''`
|
||||
|
||||
Эта опция используется, если необходимо добавить версию к иконкам и манифесту для игнорирования кэша браузера. В результате добавится `?v=<pwa.assetsVersion>` к URL-адресам иконок и манифеста.
|
||||
|
||||
- **pwa.manifestPath**
|
||||
|
||||
- По умолчанию: `'manifest.json'`
|
||||
|
||||
Путь к манифесту приложения.
|
||||
|
||||
- **pwa.manifestOptions**
|
||||
|
||||
- По умолчанию: `{}`
|
||||
|
||||
Объект будет использоваться для генерации `manifest.json`
|
||||
|
||||
Если не определить следующие значения в объекте, то вместо них будут использованы значения опции `pwa` или значения по умолчанию.
|
||||
- name: `pwa.name`
|
||||
- short_name: `pwa.name`
|
||||
- start_url: `'.'`
|
||||
- display: `'standalone'`
|
||||
- theme_color: `pwa.themeColor`
|
||||
|
||||
- **pwa.iconPaths**
|
||||
|
||||
- По умолчанию:
|
||||
|
||||
```js
|
||||
{
|
||||
favicon32: 'img/icons/favicon-32x32.png',
|
||||
favicon16: 'img/icons/favicon-16x16.png',
|
||||
appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
|
||||
maskIcon: 'img/icons/safari-pinned-tab.svg',
|
||||
msTileImage: 'img/icons/msapplication-icon-144x144.png'
|
||||
}
|
||||
```
|
||||
|
||||
Измените эти значения при необходимости использовать различные пути для иконок.
|
||||
|
||||
### Пример конфигурации
|
||||
|
||||
```js
|
||||
// Файл vue.config.js
|
||||
module.exports = {
|
||||
// ...настройки других vue-cli плагинов...
|
||||
pwa: {
|
||||
name: 'My App',
|
||||
themeColor: '#4DBA87',
|
||||
msTileColor: '#000000',
|
||||
appleMobileWebAppCapable: 'yes',
|
||||
appleMobileWebAppStatusBarStyle: 'black',
|
||||
|
||||
// настройка workbox-плагина
|
||||
workboxPluginMode: 'InjectManifest',
|
||||
workboxOptions: {
|
||||
// swSrc необходимо в режиме InjectManifest
|
||||
swSrc: 'dev/sw.js',
|
||||
// ...другие настройки Workbox...
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add pwa
|
||||
```
|
||||
|
||||
## Внедряемые правила webpack-chain
|
||||
|
||||
- `config.plugin('workbox')`
|
||||
9
docs/ru/core-plugins/router.md
Normal file
9
docs/ru/core-plugins/router.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# @vue/cli-plugin-router
|
||||
|
||||
> Плагин маршрутизации для vue-cli
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add router
|
||||
```
|
||||
39
docs/ru/core-plugins/typescript.md
Normal file
39
docs/ru/core-plugins/typescript.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# @vue/cli-plugin-typescript
|
||||
|
||||
> Плагин typescript для vue-cli
|
||||
|
||||
Использует TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) для более быстрой проверки типов вне основного потока.
|
||||
|
||||
## Конфигурация
|
||||
|
||||
TypeScript может быть сконфигурирован через `tsconfig.json`.
|
||||
|
||||
С версии `3.0.0-rc.6`, `typescript` является зависимостью этого пакета (peer dependency), поэтому можно использовать определённую версию TypeScript обновляя `package.json` проекта.
|
||||
|
||||
Этот плагин может использоваться вместе с `@vue/cli-plugin-babel`. При использовании вместе с Babel, этот плагин должен генерировать ES2015 и делегировать остальное Babel для автоматического добавления полифилов на основе целевых браузеров.
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
При выборе [TSLint](https://palantir.github.io/tslint/) на этапе создания проекта, будет внедряться команда `vue-cli-service lint`.
|
||||
|
||||
## Кэширование
|
||||
|
||||
[cache-loader](https://github.com/webpack-contrib/cache-loader) используется по умолчанию, кэш хранится в `<projectRoot>/node_modules/.cache/ts-loader`.
|
||||
|
||||
## Параллелизация
|
||||
|
||||
[thread-loader](https://github.com/webpack-contrib/thread-loader) используется по умолчанию, если машина имеет более 1 ядра CPU. Это можно отключить указав `parallel: false` в файле `vue.config.js`.
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add typescript
|
||||
```
|
||||
|
||||
## Внедряемые правила webpack-chain
|
||||
|
||||
- `config.rule('ts')`
|
||||
- `config.rule('ts').use('ts-loader')`
|
||||
- `config.rule('ts').use('babel-loader')` (при использовании вместе с `@vue/cli-plugin-babel`)
|
||||
- `config.rule('ts').use('cache-loader')`
|
||||
- `config.plugin('fork-ts-checker')`
|
||||
70
docs/ru/core-plugins/unit-jest.md
Normal file
70
docs/ru/core-plugins/unit-jest.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# @vue/cli-plugin-unit-jest
|
||||
|
||||
> Плагин unit-jest для vue-cli
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
- **`vue-cli-service test:unit`**
|
||||
|
||||
Запуск модульных тестов с помощью Jest. По умолчанию значением `testMatch` будет `<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` что совпадает с:
|
||||
|
||||
- Любыми файлами в `tests/unit` которые заканчиваются на `.spec.(js|jsx|ts|tsx)`;
|
||||
- Любыми js(x)/ts(x) файлами внутри каталогов `__tests__`.
|
||||
|
||||
Использование: `vue-cli-service test:unit [options] <regexForTestFiles>`
|
||||
|
||||
Также поддерживаются все [опции Jest CLI](https://facebook.github.io/jest/docs/en/cli.html).
|
||||
|
||||
## Отладка тестов
|
||||
|
||||
Обратите внимание, что запуск `jest` напрямую будет заканчиваться ошибкой, потому что для пресета Babel требуются подсказки как заставить код работать в Node.js. Поэтому необходимо запускать тесты командой `vue-cli-service test:unit`.
|
||||
|
||||
Если необходимо отладить тесты с помощью инспектора Node, можно запустить следующее:
|
||||
|
||||
```sh
|
||||
# macOS или linux
|
||||
node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit
|
||||
|
||||
# Windows
|
||||
node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit
|
||||
```
|
||||
|
||||
## Конфигурация
|
||||
|
||||
Jest можно настроить через `jest.config.js` в корне проекта, или через поле `jest` в файле `package.json`.
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add unit-jest
|
||||
```
|
||||
|
||||
## Обработка зависимостей из `/node_modules`
|
||||
|
||||
По умолчанию jest не обрабатывает ничего из `/node_modules`.
|
||||
|
||||
Поскольку jest работает на Node, то нет необходимости транспилировать всё, где используются современные возможности ECMAScript, так как Node >=8 уже их поддерживает, поэтому это разумное решение по умолчанию. По этой же причине также cli-plugin-jest не поддерживает опцию `transpileDependencies` в файле `vue.config.js`.
|
||||
|
||||
Однако, есть (по крайней мере) три случая, когда необходимо транспилировать код из `/node_modules` в jest:
|
||||
|
||||
1. Использование выражений ES6 `import`/`export`, которые нужно скомпилировать в формат commonjs `module.exports`
|
||||
2. Однофайловые компоненты (`.vue` файлы) которые запускаются через `vue-jest`
|
||||
3. Код Typescript
|
||||
|
||||
Для этого необходимо добавить исключение в опции jest `transformIgnorePatterns`. Значение по умолчанию такое:
|
||||
|
||||
```javascript
|
||||
transformIgnorePatterns: ['/node_modules/']
|
||||
```
|
||||
|
||||
Необходимо добавить исключения из этого шаблона с негативным lookahead в RegExp:
|
||||
|
||||
```javascript
|
||||
transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)']
|
||||
```
|
||||
|
||||
Для исключения нескольких библиотек:
|
||||
|
||||
```javascript
|
||||
transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)']
|
||||
```
|
||||
36
docs/ru/core-plugins/unit-mocha.md
Normal file
36
docs/ru/core-plugins/unit-mocha.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# @vue/cli-plugin-unit-mocha
|
||||
|
||||
> Плагин unit-mocha для vue-cli
|
||||
|
||||
## Внедряемые команды
|
||||
|
||||
- **`vue-cli-service test:unit`**
|
||||
|
||||
Запускает тесты с помощью [mochapack](https://github.com/sysgears/mochapack) + [chai](http://chaijs.com/).
|
||||
|
||||
**Обратите внимание, что тесты запускаются в Node.js с симулированным JSDOM окружением браузера.**
|
||||
|
||||
```
|
||||
Использование: vue-cli-service test:unit [options] [...files]
|
||||
|
||||
Опции:
|
||||
|
||||
--watch, -w запуск в режиме отслеживания
|
||||
--grep, -g запуск тестов, попадающих под <pattern>
|
||||
--slow, -s порог "медленных" тестов в миллисекундах
|
||||
--timeout, -t порог таймаута в миллисекундах
|
||||
--bail, -b останавливаться после первого неудачного теста
|
||||
--require, -r подключить указанный модуль перед запуском тестов
|
||||
--include включить указанный модуль в тестовую сборку
|
||||
--inspect-brk использовать инспектор для отладки тестов
|
||||
```
|
||||
|
||||
По умолчанию под файлы тестов попадают: любые файлы `tests/unit` которые заканчиваются на `.spec.(ts|js)`.
|
||||
|
||||
Поддерживаются все [опции командной строки mochapack](https://sysgears.github.io/mochapack/docs/installation/cli-usage.html).
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add unit-mocha
|
||||
```
|
||||
9
docs/ru/core-plugins/vuex.md
Normal file
9
docs/ru/core-plugins/vuex.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# @vue/cli-plugin-vuex
|
||||
|
||||
> Плагин vuex для vue-cli
|
||||
|
||||
## Установка в уже созданный проект
|
||||
|
||||
```sh
|
||||
vue add vuex
|
||||
```
|
||||
179
docs/ru/dev-guide/generator-api.md
Normal file
179
docs/ru/dev-guide/generator-api.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# API генератора
|
||||
|
||||
## cliVersion
|
||||
|
||||
Тип: `string`
|
||||
|
||||
Строка **глобальной** версии `@vue/cli`, вызывающей подключаемый плагин.
|
||||
|
||||
## assertCliVersion
|
||||
|
||||
- **Аргументы**
|
||||
- `{integer | string} range` — semver диапазон, которому должна соответствовать `@vue/cli`
|
||||
|
||||
- **Использование**
|
||||
|
||||
Хотя `api.version` и может быть полезным, иногда приятнее просто объявить требуемую версию. Данный API предоставляет простой способ сделать это.
|
||||
|
||||
Ничего не произойдёт, если предоставленная версия устраивает. В противном случае, будет выдана ошибка.
|
||||
|
||||
## cliServiceVersion
|
||||
|
||||
Тип: `string`
|
||||
|
||||
Строка **локальной для проекта** версии `@vue/cli-service`, вызывающей подключаемый плагин.
|
||||
|
||||
## assertCliServiceVersion
|
||||
|
||||
- **Аргументы**
|
||||
- `{integer | string} range` — semver диапазон, которому должна соответствовать `@vue/cli-service`
|
||||
|
||||
- **Использование**
|
||||
|
||||
Данный API предоставляет простой способ указания требуемой локальной версии `@vue/cli-service`.
|
||||
|
||||
Ничего не произойдёт, если предоставленная версия устраивает. В противном случае, будет выдана ошибка.
|
||||
|
||||
Примечание: Рекомендуется использовать [поле `peerDependencies` в файле `package.json`](https://docs.npmjs.com/files/package.json#peerdependencies) в большинстве случаев.
|
||||
|
||||
|
||||
## resolve
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} ..._paths` — Последовательность относительных путей или сегментов пути
|
||||
|
||||
- **Возвращает**
|
||||
- `{string}` — разрешённый (resolved) абсолютный путь, вычисленный на основе текущего корня проекта
|
||||
|
||||
- **Использование**:
|
||||
Разрешение пути для текущего проекта
|
||||
|
||||
## hasPlugin
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} id` — идентификатор плагина, можно опустить префикс (@vue/|vue-|@scope/vue)-cli-plugin-
|
||||
- `{string} version` — semver диапазон, опционально
|
||||
|
||||
- **Возвращает**
|
||||
- `{boolean}`
|
||||
|
||||
- **Использование**:
|
||||
Проверяет есть ли в проекте плагин с указанным идентификатором. Если указан диапазон версий, то версия плагина должна соответствовать ему.
|
||||
|
||||
## addConfigTransform
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} key` — ключ конфигурации в package.json
|
||||
- `{object} options` — настройки
|
||||
- `{object} options.file` — дескриптор файла. Используется для поиска существующего файла. Каждый ключ определяет тип файла (возможные значения: `['js', 'json', 'yaml', 'lines']`). Значение представляет собой список имён файлов. Например:
|
||||
|
||||
```js
|
||||
{
|
||||
js: ['.eslintrc.js'],
|
||||
json: ['.eslintrc.json', '.eslintrc']
|
||||
}
|
||||
```
|
||||
|
||||
По умолчанию первое имя файла будет использоваться для создания файла конфигурации.
|
||||
|
||||
- **Возвращает**
|
||||
- `{boolean}`
|
||||
|
||||
- **Использование**:
|
||||
Настройка способа извлечения конфигурации.
|
||||
|
||||
## extendPackage
|
||||
|
||||
- **Аргументы**
|
||||
- `{object | () => object} fields` — поля для объединения
|
||||
|
||||
- **Использование**:
|
||||
Расширение `package.json` проекта. Вложенные поля объединяются, если не передавалось `{ merge: false }`. Также используется для разрешения конфликтов зависимостей между плагинами. Поля конфигурации инструмента могут быть извлечены в отдельные файлы до того, как файлы будут записаны на диск.
|
||||
|
||||
## render
|
||||
|
||||
- **Аргументы**
|
||||
- `{string | object | FileMiddleware} source` — может быть одним из
|
||||
- относительный путь к каталогу;
|
||||
- хэш объект соответствий `{ sourceTemplate: targetFile }`;
|
||||
- пользовательский файл с middleware функцией
|
||||
- `{object} [additionalData]` — дополнительные данные, доступные для шаблонов
|
||||
- `{object} [ejsOptions]` — настройки для ejs
|
||||
|
||||
- **Использование**:
|
||||
Рендер файлов шаблонов в дерево виртуальных файлов.
|
||||
|
||||
## postProcessFiles
|
||||
|
||||
- **Аргументы**
|
||||
- `{FileMiddleware} cb` — файл middleware
|
||||
|
||||
- **Использование**:
|
||||
Добавление файла middleware, который будет выполняться после того, как все обычные middleware были выполнены.
|
||||
|
||||
## onCreateComplete
|
||||
|
||||
- **Аргументы**
|
||||
- `{function} cb`
|
||||
|
||||
- **Использование**:
|
||||
Добавление коллбэка, который будет вызываться после записи файлов на диск.
|
||||
|
||||
## exitLog
|
||||
|
||||
- **Аргументы**
|
||||
- `{} msg` — строка или значение для отображения после завершения генерации;
|
||||
- `{('log'|'info'|'done'|'warn'|'error')} [type='log']` — тип сообщения.
|
||||
|
||||
- **Использование**:
|
||||
Добавление сообщения для отображения по завершении генерации (после любых других стандартных сообщений).
|
||||
|
||||
## genJSConfig
|
||||
|
||||
- **Аргументы**
|
||||
- `{any} value`
|
||||
|
||||
- **Использование**:
|
||||
Удобный способ создания JS файла конфигурации из JSON
|
||||
|
||||
## makeJSOnlyValue
|
||||
|
||||
- **Аргументы**
|
||||
- `{any} str` — JS выражение в виде строки
|
||||
|
||||
- **Использование**:
|
||||
Преобразует строковое выражение в исполняемый JS для конфигурационных .js файлов
|
||||
|
||||
## injectImports
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} file` — целевой файл для добавления импорта
|
||||
- `{string | [string]} imports` — строка/массив импортов
|
||||
|
||||
- **Использование**:
|
||||
Добавление импортов в файл.
|
||||
|
||||
## injectRootOptions
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} file` — целевой файл для добавления опций
|
||||
- `{string | [string]} options` — строка/массив опций
|
||||
|
||||
- **Использование**:
|
||||
Добавление опций в корневой экземпляр Vue (определяемый по `new Vue`).
|
||||
|
||||
## entryFile
|
||||
|
||||
- **Возвращает**
|
||||
- `{('src/main.ts'|'src/main.js')}`
|
||||
|
||||
- **Использование**:
|
||||
Получение входного файла, с учётом использования typescript.
|
||||
|
||||
## invoking
|
||||
|
||||
- **Возвращает**
|
||||
- `{boolean}`
|
||||
|
||||
- **Использование**:
|
||||
Проверка, вызван ли плагин.
|
||||
132
docs/ru/dev-guide/plugin-api.md
Normal file
132
docs/ru/dev-guide/plugin-api.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# API плагина
|
||||
|
||||
## version
|
||||
|
||||
Тип: `string`
|
||||
|
||||
Строка с версией `@vue/cli-service` загружающей плагин.
|
||||
|
||||
## assertVersion
|
||||
|
||||
- **Аргументы**
|
||||
- `{integer | string} range` — semver диапазон, которому должен соответствовать `@vue/cli-service`
|
||||
|
||||
- **Использование**
|
||||
|
||||
Хотя `api.version` и может быть полезным, иногда приятнее просто объявить требуемую версию. Данный API предоставляет простой способ сделать это.
|
||||
|
||||
Ничего не произойдёт, если предоставленная версия устраивает. В противном случае, будет выдана ошибка.
|
||||
|
||||
Примечание: Рекомендуется использовать [поле `peerDependencies` в файле `package.json`](https://docs.npmjs.com/files/package.json#peerdependencies) в большинстве случаев.
|
||||
|
||||
## getCwd
|
||||
|
||||
- **Использование**:
|
||||
Возвращает текущий рабочий каталог
|
||||
|
||||
## resolve
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} path` — относительный путь от корня проекта
|
||||
|
||||
- **Возвращает**
|
||||
- `{string}` — разрешённый (resolved) абсолютный путь
|
||||
|
||||
- **Использование**:
|
||||
Разрешение пути для текущего проекта
|
||||
|
||||
## hasPlugin
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} id` — идентификатор плагина, можно опустить префикс (@vue/|vue-|@scope/vue)-cli-plugin-
|
||||
|
||||
- **Возвращает**
|
||||
- `{boolean}`
|
||||
|
||||
- **Использование**:
|
||||
Проверяет есть ли в проекте плагин с указанным идентификатором
|
||||
|
||||
## registerCommand
|
||||
|
||||
- **Аргументы**
|
||||
- `{string} name`
|
||||
- `{object} [opts]`
|
||||
```js
|
||||
{
|
||||
description: string,
|
||||
usage: string,
|
||||
options: { [string]: string }
|
||||
}
|
||||
```
|
||||
- `{function} fn`
|
||||
```js
|
||||
(args: { [string]: string }, rawArgs: string[]) => ?Promise
|
||||
```
|
||||
|
||||
- **Использование**:
|
||||
Регистрация команды, доступной как `vue-cli-service [name]`.
|
||||
|
||||
## chainWebpack
|
||||
|
||||
- **Аргументы**
|
||||
- `{function} fn`
|
||||
|
||||
- **Использование**:
|
||||
Регистрация функции, которая получит chainable-конфигурацию webpack. Эта функция ленива и не будет вызываться до вызова функции `resolveWebpackConfig`.
|
||||
|
||||
|
||||
## configureWebpack
|
||||
|
||||
- **Аргументы**
|
||||
- `{object | function} fn`
|
||||
|
||||
- **Использование**:
|
||||
Регистрация объекта конфигурации webpack, который будет объединён с конфигурацией **ИЛИ** функция, которая получит исходную конфигурацию webpack. Функция может либо мутировать конфигурацию напрямую, либо возвращать объект, который будет объединён с конфигурацией webpack.
|
||||
|
||||
## configureDevServer
|
||||
|
||||
- **Аргументы**
|
||||
- `{object | function} fn`
|
||||
|
||||
- **Использование**:
|
||||
Регистрация функции для конфигурирования сервера разработки. Она получает `app` экземпляр express сервера разработки.
|
||||
|
||||
## resolveWebpackConfig
|
||||
|
||||
- **Аргументы**
|
||||
- `{ChainableWebpackConfig} [chainableConfig]`
|
||||
|
||||
- **Возвращает**
|
||||
- `{object}` — исходная конфигурация webpack
|
||||
|
||||
- **Использование**:
|
||||
Разрешение финальной конфигурации webpack, которая и будет передана в webpack.
|
||||
|
||||
## resolveChainableWebpackConfig
|
||||
|
||||
- **Возвращает**
|
||||
- `{ChainableWebpackConfig}`
|
||||
|
||||
- **Использование**:
|
||||
Разрешение промежуточной chainable-конфигурации webpack, которую можно дополнительно настроить перед генерированием финальной конфигурации webpack. Можно вызывать несколько раз для генерации различных ветвей от базовой конфигурации webpack.
|
||||
|
||||
Подробнее см. [https://github.com/mozilla-neutrino/webpack-chain](https://github.com/mozilla-neutrino/webpack-chain)
|
||||
|
||||
## genCacheConfig
|
||||
|
||||
- **Аргументы**
|
||||
- `id`
|
||||
- `partialIdentifier`
|
||||
- `configFiles`
|
||||
|
||||
- **Возвращает**
|
||||
- `{object}`
|
||||
```js
|
||||
{
|
||||
cacheDirectory: string,
|
||||
cacheIdentifier: string
|
||||
}
|
||||
```
|
||||
|
||||
- **Использование**:
|
||||
Генерация идентификатора кэша из нескольких переменных.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -526,7 +526,7 @@ api.addTask({
|
||||
}
|
||||
```
|
||||
|
||||
Поддерживаемые inquirer типы: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`.
|
||||
Поддерживаемые inquirer-типы: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`, `editor`.
|
||||
|
||||
В дополнение к ним пользовательский интерфейс поддерживает специальные типы, которые работают только с ним:
|
||||
|
||||
@@ -628,7 +628,7 @@ api.addTask({
|
||||
|
||||
### Создание клиентского дополнения
|
||||
|
||||
Рекомендуемый способ создания клиентского дополнения — создать новый проект с помощью vue cli. Вы можете либо сделать это в подкаталоге вашего плагина, либо в другом npm пакете.
|
||||
Рекомендуемый способ создания клиентского дополнения — создать новый проект с помощью Vue CLI. Вы можете либо сделать это в подкаталоге вашего плагина, либо в другом npm пакете.
|
||||
|
||||
Установите `@vue/cli-ui` в качестве зависимости для разработки (dev dependency).
|
||||
|
||||
@@ -790,7 +790,7 @@ api.addView({
|
||||
id: 'org.vue.webpack.views.test',
|
||||
|
||||
// Имя маршрута (из vue-router)
|
||||
// Использует то же имя, как и в методе 'ClientAddonApi.addRoutes' (см. выше в разлеле клиентское дополнение)
|
||||
// Использует то же имя, как и в методе 'ClientAddonApi.addRoutes' (см. выше в разделе клиентское дополнение)
|
||||
name: 'org.vue.webpack.routes.test',
|
||||
|
||||
// Иконка кнопки (material-icons)
|
||||
@@ -1027,7 +1027,7 @@ ipc.send({ ... })
|
||||
ipc.connect()
|
||||
```
|
||||
|
||||
Автоотключение при простое (спустя некоторое время без отправляемых сообщений):
|
||||
Авто-отключение при простое (спустя некоторое время без отправляемых сообщений):
|
||||
|
||||
```js
|
||||
const ipc = new IpcMessenger({
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
Для существующих переводов, вы можете [зарегистрироваться в качестве переводчика](https://www.transifex.com/vuejs/vue-cli/dashboard/).
|
||||
Для новых переводов, вы можете [запросить добавление нового языка](https://www.transifex.com/vuejs/vue-cli/dashboard/) после регистрации.
|
||||
|
||||
В любом случае вы можете переводить ключи по мере их добавления или изменения в исходной локализции.
|
||||
В любом случае вы можете переводить ключи по мере их добавления или изменения в исходной локализации.
|
||||
|
||||
## Локализация вашего плагина
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
2. **Если зависимость предоставляет ES5 код и явно перечисляет необходимые полифилы:** вы можете предварительно включить необходимые полифилы с помощью опции [polyfills](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#polyfills) для `@vue/babel-preset-app`. **Обратите внимание, что `es6.promise` добавлен по умолчанию, так как он часто необходим для библиотек, основанных на Promise.**
|
||||
|
||||
``` js
|
||||
```js
|
||||
// babel.config.js
|
||||
module.exports = {
|
||||
presets: [
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
Vue CLI предоставляет «Современный режим», чтобы помочь в решении этой проблемы. При сборке для production с помощью следующей команды:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue-cli-service build --modern
|
||||
```
|
||||
|
||||
@@ -89,6 +89,12 @@ Vue CLI использует две переменных окружения дл
|
||||
**Важно:** Переменные доступны только при вызове/после вызова функций `chainWebpack()` и `configureWebpack()`, (т.е. не напрямую в области видимости модуля `vue.config.js`). Это также означает, что они доступны в файле конфигурации postcss.
|
||||
:::
|
||||
|
||||
::: warning Предостережение: Настройка плагинов webpack
|
||||
Некоторые плагины, такие как `html-webpack-plugin`, `preload-plugin` и т.п., добавляются только в конфигурации для современного режима. Попытка использовать их опции в конфигурации для старых браузеров может привести к ошибке, так как этих плагинов не будет существовать.
|
||||
|
||||
Используйте совет выше об *Определении текущего режима в конфигурации* для управления плагинами только в соответствующем режиме, и/или проверяйте наличие плагина в конфигурации текущего режима, прежде чем использовать их опции.
|
||||
:::
|
||||
|
||||
[autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
[babel-preset-env]: https://new.babeljs.io/docs/en/next/babel-preset-env.html
|
||||
[babel-preset-app]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app
|
||||
|
||||
@@ -13,10 +13,6 @@
|
||||
|
||||
## Библиотека (Library)
|
||||
|
||||
::: tip Примечание о совместимости с IE
|
||||
В режиме библиотеки публичный путь [определяется динамически](https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/build/setPublicPath.js) по URL-адресу, по которому загружается основной js-файл (для включения динамической загрузки ресурсов). Но эта функциональность использует `document.currentScript`, который отсутствует в IE. Поэтому рекомендуем добавлять [current-script-polyfill](https://www.npmjs.com/package/current-script-polyfill) в финальную веб-страницу перед импортом библиотеки, если требуется поддержка IE.
|
||||
:::
|
||||
|
||||
::: tip Примечание о зависимости Vue
|
||||
В режиме библиотеки Vue *экстернализируется*. Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Если библиотека используется через сборщик, он должен попытаться загрузить Vue в качестве зависимости через сборщик; в противном случае, он должен вернуться к глобальной переменной `Vue`.
|
||||
|
||||
@@ -54,13 +50,17 @@ dist/myLib.css 0.33 kb 0.23 kb
|
||||
|
||||
- `dist/myLib.css`: извлечённый CSS-файл (можно принудительно вставлять стили инлайн, установив `css: { extract: false }` в `vue.config.js`)
|
||||
|
||||
::: warning ВНИМАНИЕ
|
||||
При разработке библиотеки или использования монорепозитория, имейте ввиду, что CSS-импорты **являются побочными эффектами (side effects)**. Убедитесь, что **удалили** опцию `"sideEffects": false` из файла `package.json`, в противном случае webpack будет удалять CSS-фрагменты при сборке для production.
|
||||
:::
|
||||
|
||||
### Vue vs. JS / TS файлы точек входа
|
||||
|
||||
При использовании `.vue` файла в качестве точки входа, библиотека будет экспортировать сам компонент Vue, потому что компонент всегда имеет экспорт по умолчанию (export default).
|
||||
|
||||
Однако, когда используется `.js` или `.ts` файл в качестве точки входа, он может содержать именованные экспорты, поэтому библиотека будет использоваться как модуль. Это означает, что экспорт библиотеки по умолчанию должен быть доступен как `window.yourLib.default` в UMD сборках, или как `const myLib = require('mylib').default` в CommonJS сборках. Если у вас нет именованных экспортов и вы хотите использовать экспорт по умолчанию (default export), вы можете использовать следующую конфигурацию webpack в `vue.config.js`:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
output: {
|
||||
@@ -100,7 +100,7 @@ vue-cli-service build --target wc --name my-element [entry]
|
||||
|
||||
Этот режим позволяет использовать компонент Vue как обычный элемент DOM:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
<script src="path/to/my-element.js"></script>
|
||||
|
||||
@@ -139,10 +139,28 @@ dist/foo.1.js 5.24 kb 1.64 kb
|
||||
|
||||
Теперь на странице пользователю необходимо только подключить Vue и файл точки входа:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
<script src="path/to/foo.min.js"></script>
|
||||
|
||||
<!-- фрагмент с реализацией foo-one загрузится автоматически когда потребуется -->
|
||||
<foo-one></foo-one>
|
||||
```
|
||||
|
||||
## Использование vuex в сборках
|
||||
|
||||
При создании [Веб-компонента](#веб-компонент-web-component) или [Библиотеки](#бибnиотека-library), точкой входа будет не `main.js`, а файл `entry-wc.js`, генерируемый здесь: [https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js)
|
||||
|
||||
Поэтому для использования vuex при сборке веб-компонента необходимо инициализировать хранилище в `App.vue`:
|
||||
|
||||
```js
|
||||
import store from './store'
|
||||
|
||||
// ...
|
||||
|
||||
export default {
|
||||
store,
|
||||
name: 'App',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
Это то, что вы увидите в `package.json` проекта с пресетом настроек по умолчанию:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
Вы можете вызвать эти команды с помощью npm или Yarn:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm run serve
|
||||
# ИЛИ
|
||||
yarn serve
|
||||
@@ -25,7 +25,7 @@ yarn serve
|
||||
|
||||
Если у вас установлен [npx](https://github.com/npm/npx) (должен поставляться в комплекте с последней версией npm), то вы также можете запустить бинарник напрямую:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npx vue-cli-service serve
|
||||
```
|
||||
|
||||
@@ -44,18 +44,26 @@ npx vue-cli-service serve
|
||||
|
||||
Опции:
|
||||
|
||||
--open открыть браузер при запуске сервера
|
||||
--copy скопировать url в буфер обмена при запуске сервера
|
||||
--mode определить режим сборки (по умолчанию: development)
|
||||
--host определить хост (по умолчанию: 0.0.0.0)
|
||||
--port определить порт (по умолчанию: 8080)
|
||||
--https использовать https (по умолчанию: false)
|
||||
--open открыть браузер при запуске сервера
|
||||
--copy скопировать url в буфер обмена при запуске сервера
|
||||
--mode определить режим сборки (по умолчанию: development)
|
||||
--host определить хост (по умолчанию: 0.0.0.0)
|
||||
--port определить порт (по умолчанию: 8080)
|
||||
--https использовать https (по умолчанию: false)
|
||||
--public указать URL-адрес публичной сети для клиента HMR
|
||||
--skip-plugins имёна плагинов через запятую, которые следует пропустить при запуске
|
||||
```
|
||||
|
||||
::: tip --copy
|
||||
Копирование в буфер обмена может не работать на некоторых платформах. Если копирование выполнилось успешно, то рядом с URL-адресом локального сервера разработки будет отображено `(copied to clipboard)`.
|
||||
:::
|
||||
|
||||
Команда `vue-cli-service serve` запускает сервер для разработки (основанный на [webpack-dev-server](https://github.com/webpack/webpack-dev-server)), предоставляющий из коробки функцию горячей замены модулей.
|
||||
|
||||
Кроме флагов командной строки, также можно настраивать сервер для разработки с помощью поля [devServer](../config/#devserver) в файле `vue.config.js`.
|
||||
|
||||
В команде CLI `[entry]` означает *входной файл*, а не *дополнительный входной файл*. Если вы перезапишете запись в CLI, тогда записи из `config.pages` больше не будут учитываться, что может привести к ошибке. По умолчанию [entryFile](../dev-guide/generator-api.html#entryfile).
|
||||
|
||||
## vue-cli-service build
|
||||
|
||||
```
|
||||
@@ -63,16 +71,20 @@ npx vue-cli-service serve
|
||||
|
||||
Опции:
|
||||
|
||||
--mode определить режим сборки (по умолчанию: production)
|
||||
--dest определить каталог сборки (по умолчанию: dist)
|
||||
--modern собирать приложение для современных браузеров с авто-фоллбэком для старых
|
||||
--target app | lib | wc | wc-async (по умолчанию: app)
|
||||
--inline-vue включить Vue в содержимое сборки библиотеки или веб-компонента
|
||||
--name имя библиотеки или режим веб-компонента (по умолчанию: "name" в package.json или имя файла точки входа)
|
||||
--no-clean не удалять каталог dist перед сборкой проекта
|
||||
--report сгенерировать report.html для анализа содержимого сборки
|
||||
--report-json сгенерировать report.json для анализа содержимого сборки
|
||||
--watch отслеживать изменения
|
||||
--mode определить режим сборки (по умолчанию: production)
|
||||
--dest определить каталог сборки (по умолчанию: dist)
|
||||
--modern собирать приложение для современных браузеров с авто-фоллбэком для старых
|
||||
--no-unsafe-inline собирать приложение без внедрения инлайн-скриптов
|
||||
--target app | lib | wc | wc-async (по умолчанию: app)
|
||||
--formats список выходных форматов для сборок библиотек (по умолчанию: commonjs,umd,umd-min)
|
||||
--inline-vue включить Vue в содержимое сборки библиотеки или веб-компонента
|
||||
--name имя библиотеки или режим веб-компонента (по умолчанию: "name" в package.json или имя файла точки входа)
|
||||
--filename имя выходного файла, только для 'lib' (по умолчанию: значение --name)
|
||||
--no-clean не удалять каталог dist перед сборкой проекта
|
||||
--report сгенерировать report.html для анализа содержимого сборки
|
||||
--report-json сгенерировать report.json для анализа содержимого сборки
|
||||
--skip-plugins имёна плагинов через запятую, которые следует пропустить при запуске
|
||||
--watch отслеживать изменения
|
||||
```
|
||||
|
||||
Команда `vue-cli-service build` создаёт готовую для production-сборку в каталоге `dist/` с минификацией для JS / CSS / HTML и автоматическим разделением вендорного кода в отдельный фрагмент для лучшего кэширования. Манифест фрагмента вставляется инлайн в HTML.
|
||||
@@ -101,16 +113,43 @@ npx vue-cli-service serve
|
||||
|
||||
Некоторые плагины CLI добавляют собственные команды в `vue-cli-service`. Например, `@vue/cli-plugin-eslint` внедряет команду `vue-cli-service lint`. Вы можете посмотреть весь список команд запустив:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npx vue-cli-service help
|
||||
```
|
||||
|
||||
Вы также можете узнать о доступных параметрах каждой команды с помощью:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npx vue-cli-service help [command]
|
||||
```
|
||||
|
||||
## Пропуск плагинов
|
||||
|
||||
Иногда при выполнении команды может понадобиться не использовать определённый плагин CLI. К примеру, для создания сборки приложения без плагина PWA. Такого можно добиться передав имя плагина в опцию `--skip-plugins`.
|
||||
|
||||
```bash
|
||||
npx vue-cli-service build --skip-plugins pwa
|
||||
```
|
||||
|
||||
::: tip СОВЕТ
|
||||
Опция доступна для _любых_ команд `vue-cli-service`, включая пользовательские команды, добавленные другими плагинами.
|
||||
:::
|
||||
|
||||
Можно пропустить несколько подключаемых плагинов, передав их имена через запятую:
|
||||
|
||||
```bash
|
||||
npx vue-cli-service build --skip-plugins pwa,apollo
|
||||
```
|
||||
|
||||
Имена плагинов разрешаются также, как и при установке, что подробнее описано [здесь](./plugins-and-presets.md#установка-пnагинов-в-существующий-проект)
|
||||
|
||||
```bash
|
||||
# все вызовы равнозначны
|
||||
npx vue-cli-service build --skip-plugins pwa
|
||||
npx vue-cli-service build --skip-plugins @vue/pwa
|
||||
npx vue-cli-service build --skip-plugins @vue/cli-plugin-pwa
|
||||
```
|
||||
|
||||
## Кэширование и параллелизация
|
||||
|
||||
- `cache-loader` используется для компиляции Vue / Babel / TypeScript по умолчанию. Файлы кэшируются внутри `node_modules/.cache` — если при запуске будут возникать проблемы с компиляцией, сначала попробуйте удалить каталог кэша.
|
||||
@@ -121,10 +160,16 @@ npx vue-cli-service help [command]
|
||||
|
||||
После установки `@vue/cli-service` также добавляется [yorkie](https://github.com/yyx990803/yorkie), который позволяет легко указывать Git хуки, используя поле `gitHooks` в файле `package.json`:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,vue}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
Для создания нового проекта запустите команду:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue create hello-world
|
||||
```
|
||||
|
||||
@@ -33,7 +33,7 @@ vue create hello-world
|
||||
|
||||
Команда `vue create` предоставляет множество опций — вы можете изучить их все выполнив:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue create --help
|
||||
```
|
||||
|
||||
@@ -63,7 +63,7 @@ vue create --help
|
||||
|
||||
Вы можете создавать и управлять проектами через графический интерфейс командой `vue ui`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue ui
|
||||
```
|
||||
|
||||
@@ -75,7 +75,7 @@ vue ui
|
||||
|
||||
Vue CLI >= 3 использует команду `vue`, поэтому он перезаписывает Vue CLI 2 (`vue-cli`). Если вам по-прежнему необходимо старое поведение и функциональность команды `vue init`, нужно лишь установить глобально дополнительный плагин `@vue/cli-init`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm install -g @vue/cli-init
|
||||
# vue init теперь работает точно также, как и в vue-cli@2.x
|
||||
vue init webpack my-project
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
|
||||
Вы можете выбрать пре-процессоры (Sass/Less/Stylus) при создании проекта. Если вы этого не сделали, то внутренняя конфигурация webpack всё равно настроена для их использования. Вам лишь требуется вручную доустановить соответствующие загрузчики для webpack:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# Sass
|
||||
npm install -D sass-loader node-sass
|
||||
npm install -D sass-loader sass
|
||||
|
||||
# Less
|
||||
npm install -D less-loader less
|
||||
@@ -23,12 +23,22 @@ npm install -D stylus-loader stylus
|
||||
|
||||
Теперь вы можете импортировать соответствующие типы файлов, или использовать их синтаксис внутри файлов `*.vue` с помощью:
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<style lang="scss">
|
||||
$color: red;
|
||||
</style>
|
||||
```
|
||||
|
||||
::: tip Совет по производительности Sass
|
||||
Обратите внимание, при использовании Dart Sass **синхронная компиляция вдвое быстрее асинхронной** по умолчанию, из-за накладных расходов на асинхронные коллбэки. Чтобы избежать их можно воспользоваться пакетом [fibers](https://www.npmjs.com/package/fibers) для вызова асинхронных импортёров по пути синхронного кода. Для этого просто установите `fibers` в качестве зависимости проекта:
|
||||
|
||||
```
|
||||
npm install -D fibers
|
||||
```
|
||||
|
||||
Также имейте в виду, поскольку это нативный модуль, то могут возникнуть различные проблемы совместимости, в зависимости от ОС и окружения сборки. В таких случаях выполните `npm uninstall -D fibers` для устранения проблемы.
|
||||
:::
|
||||
|
||||
### Автоматические импорты
|
||||
|
||||
Если вы хотите автоматически импортировать файлы (для цветов, переменных, примесей...), можно использовать [style-resources-loader](https://github.com/yenshih/style-resources-loader). Вот пример для stylus, который импортирует `./src/styles/imports.styl` в каждый однофайловый компонент и в каждый файл stylus:
|
||||
@@ -75,33 +85,38 @@ Vue CLI использует PostCSS внутри себя.
|
||||
|
||||
Для импорта CSS или других файлов пре-процессоров в качестве CSS-модулей в JavaScript, необходимо чтобы имя файла заканчивалось на `.module.(css|less|sass|scss|styl)`:
|
||||
|
||||
``` js
|
||||
```js
|
||||
import styles from './foo.module.css'
|
||||
// работает для всех поддерживаемых пре-процессоров
|
||||
import sassStyles from './foo.module.scss'
|
||||
```
|
||||
|
||||
Если вы не хотите указывать `.module` в именах файлов, установите `css.modules` в `true` внутри файла `vue.config.js`:
|
||||
Если вы не хотите указывать `.module` в именах файлов, установите `css.requireModuleExtension` в `false` внутри файла `vue.config.js`:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
css: {
|
||||
modules: true
|
||||
requireModuleExtension: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Если вы хотите настроить генерируемые имена классов для CSS-модулей, вы можете сделать это с помощью опции `css.loaderOptions.css` в `vue.config.js`. Все настройки `css-loader` поддерживаются, например `localIdentName` и `camelCase`:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
css: {
|
||||
localIdentName: '[name]-[hash]',
|
||||
camelCase: 'only'
|
||||
// Примечание: формат конфигурации отличается между Vue CLI v4 и v3
|
||||
// Для пользователей Vue CLI v3, обратитесь к документации css-loader v1
|
||||
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
|
||||
modules: {
|
||||
localIdentName: '[name]-[hash]'
|
||||
},
|
||||
localsConvention: 'camelCaseOnly'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -112,16 +127,25 @@ module.exports = {
|
||||
|
||||
Иногда может возникнуть необходимость передать настройки в загрузчик пре-процессора для webpack. Вы можете сделать это с помощью опции `css.loaderOptions` в `vue.config.js`. Например, для передачи глобальных переменных во все стили Sass/Less:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
// передача настроек в sass-loader
|
||||
// @/ это псевдоним к каталогу src/ поэтому предполагается,
|
||||
// что у вас в проекте есть файл `src/variables.scss`
|
||||
// Примечание: эта опция называется "data" в sass-loader v7
|
||||
sass: {
|
||||
// @/ это псевдоним к каталогу src/ поэтому предполагается,
|
||||
// что у вас в проекте есть файл `src/variables.scss`
|
||||
data: `@import "~@/variables.scss";`
|
||||
prependData: `@import "~@/variables.sass"`
|
||||
},
|
||||
// по умолчанию опция `sass` будет применяться к обоим синтаксисам
|
||||
// потому что синтаксис `scss` по сути также обрабатывается sass-loader
|
||||
// но при настройке опции `data` синтаксис `scss` требует точку с запятой
|
||||
// в конце оператора, в то время как для `sass` точки с запятой не требуется
|
||||
// в этом случае синтаксис `scss` можно настроить отдельно с помощью опции `scss`
|
||||
scss: {
|
||||
prependData: `@import "~@/variables.scss";`
|
||||
},
|
||||
// передача настроек Less.js в less-loader
|
||||
less:{
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
Каталог `dist` предназначен для обслуживания HTTP-сервером (если не задали `publicPath` относительным значением), поэтому не сработает если напрямую открыть `dist/index.html` через `file://` протокол. Самый простой способ предпросмотра вашей сборки для production локально — использовать статический файловый сервер Node.js, например [serve](https://github.com/zeit/serve):
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm install -g serve
|
||||
# флаг -s означает запуск serve в режиме одностраничного приложения (SPA)
|
||||
# который решает проблему маршрутизации, описанную ниже
|
||||
@@ -35,13 +35,15 @@ serve -s dist
|
||||
|
||||
### GitHub Pages
|
||||
|
||||
#### Публикация обновлений вручную
|
||||
|
||||
1. Установите корректное значение `publicPath` в `vue.config.js`.
|
||||
|
||||
Если вы публикуете по адресу `https://<USERNAME>.github.io/`, вы можете опустить `publicPath`, так как оно по умолчанию `"/"`.
|
||||
|
||||
Если вы публикуете по адресу `https://<USERNAME>.github.io/<REPO>/`, (т.е. ваш репозиторий находится по адресу `https://github.com/<USERNAME>/<REPO>`), установите `publicPath` в значение `"/<REPO>/"`. Например, если ваш репозиторий называется "my-project", то ваш `vue.config.js` будет выглядеть примерно так:
|
||||
|
||||
``` js
|
||||
```js
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? '/my-project/'
|
||||
@@ -51,7 +53,7 @@ serve -s dist
|
||||
|
||||
2. Внутри вашего проекта создайте `deploy.sh` со следующим содержимым (при необходимости раскомментировав подсвеченные строки) и запустите его для публикации:
|
||||
|
||||
``` bash{13,20,23}
|
||||
```bash{13,20,23}
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# остановить публикацию при ошибках
|
||||
@@ -79,9 +81,34 @@ serve -s dist
|
||||
cd -
|
||||
```
|
||||
|
||||
::: tip Совет
|
||||
Вы также можете запустить скрипт выше в вашей конфигурации CI чтобы включить автоматическую публикацию на каждый push в репозиторий.
|
||||
:::
|
||||
#### Использование Travis CI для автоматических обновлений
|
||||
|
||||
1. Установите правильный `publicPath` в `vue.config.js`, как описано выше.
|
||||
|
||||
2. Установите клиент Travis CLI: `gem install travis && travis --login`
|
||||
|
||||
3. Сгенерируйте [токен доступа](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) на GitHub с правами доступа к репозиторию.
|
||||
|
||||
4. Разрешите доступ Travis к репозиторию: `travis set GITHUB_TOKEN=xxx` (`xxx` — это персональный токен доступа из шага 3.)
|
||||
|
||||
5. Создайте файл `.travis.yml` в корневом каталоге проекта.
|
||||
|
||||
```yaml
|
||||
language: node_js
|
||||
node_js:
|
||||
- "node"
|
||||
cache: npm
|
||||
script: npm run build
|
||||
deploy:
|
||||
provider: pages
|
||||
skip_cleanup: true
|
||||
github_token: $GITHUB_TOKEN
|
||||
local_dir: dist
|
||||
on:
|
||||
branch: master
|
||||
```
|
||||
|
||||
6. Добавьте файл `.travis.yml` в репозиторий, чтобы запустить первую сборку.
|
||||
|
||||
### GitLab Pages
|
||||
|
||||
@@ -98,6 +125,8 @@ pages: # задание должно быть именованными стра
|
||||
- npm run build
|
||||
- mv public public-vue # GitLab Pages хук для каталога public
|
||||
- mv dist public # переименование каталога dist (результат команды npm run build)
|
||||
# опционально, можно активировать поддержку gzip с помощью следующей строки:
|
||||
- find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec gzip -f -k {} \;
|
||||
artifacts:
|
||||
paths:
|
||||
- public # путь к артефакту должен быть /public для GitLab Pages
|
||||
@@ -105,15 +134,14 @@ pages: # задание должно быть именованными стра
|
||||
- master
|
||||
```
|
||||
|
||||
Как правило, по адресу `https://yourUserName.gitlab.io/yourProjectName` будет располагаться статический веб-сайт, поэтому вы также захотите создать файл `vue.config.js` для указания [значения `BASE_URL`](../config/#publicpath), соответствующего ему:
|
||||
Как правило, по адресу `https://yourUserName.gitlab.io/yourProjectName` будет располагаться статический веб-сайт, поэтому потребуется создать файл `vue.config.js` для указания [значения `BASE_URL`](../config/#publicpath), соответствующего имени проекта ([переменная окружения `CI_PROJECT_NAME`](https://docs.gitlab.com/ee/ci/variables/predefined_variables.html) содержит его):
|
||||
|
||||
```javascript
|
||||
// файл vue.config.js расположен в корне вашего репозитория
|
||||
// убедитесь, что обновили `yourProjectName` на имя вашего проекта GitLab
|
||||
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? '/yourProjectName/'
|
||||
? '/' + process.env.CI_PROJECT_NAME + '/'
|
||||
: '/'
|
||||
}
|
||||
```
|
||||
@@ -126,14 +154,14 @@ module.exports = {
|
||||
|
||||
1. На сайте Netlify добавьте новый проект из GitHub со следующими настройками:
|
||||
|
||||
- **Build Command:** `npm run build` или `yarn build`
|
||||
- **Publish directory:** `dist`
|
||||
- **Build Command:** `npm run build` или `yarn build`
|
||||
- **Publish directory:** `dist`
|
||||
|
||||
2. Нажмите кнопку публикации!
|
||||
|
||||
Также посмотрите [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda).
|
||||
|
||||
Для получения прямых хитов при использовании `режима history` во Vue Router, необходимо создавть файл `_redirects` в каталоге `/public` со следующим содержимым:
|
||||
Для получения прямых хитов при использовании `режима history` во Vue Router, необходимо создавать файл `_redirects` в каталоге `/public` со следующим содержимым:
|
||||
|
||||
```
|
||||
# Настройки Netlify для одностраничных приложений (SPA)
|
||||
@@ -142,6 +170,28 @@ module.exports = {
|
||||
|
||||
Подробнее можно изучить в [документации Netlify по перенаправлениям](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps).
|
||||
|
||||
### Render
|
||||
|
||||
[Render](https://render.com) предлагает [бесплатный хостинг статических сайтов](https://render.com/docs/static-sites) с полностью управляемым SSL, глобальным CDN и непрерывным автоматическим развёртыванием из GitHub.
|
||||
|
||||
1. Создайте новый Web Service в Render, и предоставьте доступ для GitHub-приложения Render в репозиторий.
|
||||
|
||||
2. При создании используйте следующие значения:
|
||||
|
||||
- **Окружение:** `Static Site`
|
||||
- **Команда сборки:** `npm run build` или `yarn build`
|
||||
- **Каталог публикации:** `dist`
|
||||
|
||||
Всё! Приложение будет доступно по URL-адресу Render сразу, как только завершится сборка.
|
||||
|
||||
Для того, чтобы получать прямые хиты при использовании режима history во Vue Router, необходимо добавить следующее правило на вкладке `Redirects/Rewrites` вашего сайта.
|
||||
|
||||
- **Источник:** `/*`
|
||||
- **Назначение:** `/index.html`
|
||||
- **Статус** `Rewrite`
|
||||
|
||||
Узнайте больше о настройке [перенаправлений, перезаписей](https://render.com/docs/redirects-rewrites) и [пользовательских доменах](https://render.com/docs/custom-domains) на Render.
|
||||
|
||||
### Amazon S3
|
||||
|
||||
Плагин [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy).
|
||||
@@ -211,10 +261,15 @@ firebase deploy --only hosting
|
||||
|
||||
### Now
|
||||
|
||||
1. Установите глобально Now CLI:
|
||||
В данном примере используется последняя версия платформы Now версии 2.
|
||||
|
||||
1. Установите Now CLI:
|
||||
|
||||
```bash
|
||||
npm install -g now
|
||||
|
||||
# Или если предпочитаете локальную установку
|
||||
npm install now
|
||||
```
|
||||
|
||||
2. Добавьте файл `now.json` в корневой каталог проекта:
|
||||
@@ -222,38 +277,61 @@ npm install -g now
|
||||
```json
|
||||
{
|
||||
"name": "my-example-app",
|
||||
"type": "static",
|
||||
"static": {
|
||||
"public": "dist",
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
"alias": "vue-example",
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
"version": 2,
|
||||
"builds": [
|
||||
{
|
||||
"src": "package.json",
|
||||
"use": "@now/static-build"
|
||||
}
|
||||
],
|
||||
"routes": [
|
||||
{
|
||||
"src": "/(js|css|img)/.*",
|
||||
"headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
},
|
||||
{ "handle": "filesystem" },
|
||||
{ "src": ".*", "dest": "/" }
|
||||
],
|
||||
"alias": "example.com"
|
||||
}
|
||||
```
|
||||
|
||||
Можно детальнее настроить статическую публикацию, обратившись к [документации Now](https://zeit.co/docs/deployment-types/static).
|
||||
Если у вас есть другие/дополнительные каталоги, измените маршрут соответствующим образом:
|
||||
|
||||
3. Добавьте скрипт для публикации в `package.json`:
|
||||
|
||||
```json
|
||||
"deploy": "npm run build && now && now alias"
|
||||
```diff
|
||||
- {
|
||||
- "src": "/(js|css|img)/.*",
|
||||
- "headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
- }
|
||||
+ {
|
||||
+ "src": "/(js|css|img|fonts|media)/.*",
|
||||
+ "headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
+ }
|
||||
```
|
||||
|
||||
Если вы хотите по умолчанию публиковать публично, то измените команду на следующую:
|
||||
Когда значение `outputDir` вместо стандартного `dist` указано `build`:
|
||||
|
||||
```json
|
||||
"deploy": "npm run build && now --public && now alias"
|
||||
```diff
|
||||
- {
|
||||
- "src": "package.json",
|
||||
- "use": "@now/static-build"
|
||||
- }
|
||||
+ {
|
||||
+ "src": "package.json",
|
||||
+ "use": "@now/static-build",
|
||||
+ "config": { "distDir": "build" }
|
||||
+ }
|
||||
```
|
||||
|
||||
Это автоматически установит псевдоним сайта на последнюю публикацию. Теперь просто запустите команду `npm run deploy` для публикации приложения.
|
||||
3. Добавьте `now-build` скрипт для публикации в `package.json`:
|
||||
|
||||
```json
|
||||
"now-build": "npm run build"
|
||||
```
|
||||
|
||||
Для публикации запустите `now`.
|
||||
|
||||
Если необходим псевдоним публикации, запустите `now --target production`.
|
||||
|
||||
### Stdlib
|
||||
|
||||
@@ -261,7 +339,38 @@ npm install -g now
|
||||
|
||||
### Heroku
|
||||
|
||||
> TODO | Присылайте пулл-реквесты.
|
||||
1. [Установите Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
|
||||
|
||||
2. Создайте файл `static.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"root": "dist",
|
||||
"clean_urls": true,
|
||||
"routes": {
|
||||
"/**": "index.html"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. Добавьте файл `static.json` в git
|
||||
|
||||
```bash
|
||||
git add static.json
|
||||
git commit -m "add static configuration"
|
||||
```
|
||||
|
||||
4. Запустите публикацию на Heroku
|
||||
|
||||
```bash
|
||||
heroku login
|
||||
heroku create
|
||||
heroku buildpacks:add heroku/nodejs
|
||||
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
|
||||
git push heroku master
|
||||
```
|
||||
|
||||
Подробная информация: [https://gist.github.com/hone/24b06869b4c1eca701f9](https://gist.github.com/hone/24b06869b4c1eca701f9)
|
||||
|
||||
### Surge
|
||||
|
||||
@@ -299,7 +408,7 @@ npm install --global surge
|
||||
|
||||
3. В проекте создайте `deploy.sh` с указанным содержимым и запустите его для публикации:
|
||||
|
||||
``` bash{13,20,23}
|
||||
```bash{13,20,23}
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# остановиться при ошибках
|
||||
@@ -319,3 +428,93 @@ npm install --global surge
|
||||
|
||||
cd -
|
||||
```
|
||||
|
||||
### Docker (Nginx)
|
||||
|
||||
Deploy your application using nginx inside of a docker container.
|
||||
|
||||
1. Установите [docker](https://www.docker.com/get-started)
|
||||
|
||||
2. Создайте файл `Dockerfile` в корневом каталоге проекта
|
||||
|
||||
```docker
|
||||
FROM node:latest as build-stage
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY ./ .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx as production-stage
|
||||
RUN mkdir /app
|
||||
COPY --from=build-stage /app/dist /app
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
```
|
||||
|
||||
3. Создайте файл `.dockerignore` в корневом каталоге проекта
|
||||
|
||||
Настройка файла `.dockerignore` предотвращает копирование `node_modules` и любых промежуточных артефактов сборки в образ, что может вызывать проблемы при сборке.
|
||||
|
||||
```
|
||||
**/node_modules
|
||||
**/dist
|
||||
```
|
||||
|
||||
4. Создайте файл `nginx.conf` в корневом каталоге проекта
|
||||
|
||||
`Nginx` — это HTTP(s)-сервер, который будет работать в вашем контейнере docker. Он использует конфигурационный файл для определения того как предоставлять содержимое / какие порты прослушивать / и так далее. См. [документацию по конфигурации nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/) для ознакомления со всеми возможными примерами конфигураций.
|
||||
|
||||
Ниже приведена простая конфигурация `nginx`, которая обслуживает ваш vue-проект на порту `80`. Корневой `index.html` служит для `page not found` / `404` ошибок, что позволяет использовать маршрутизации, основанной на `pushState()`.
|
||||
|
||||
```nginx
|
||||
user nginx;
|
||||
worker_processes 1;
|
||||
error_log /var/log/nginx/error.log warn;
|
||||
pid /var/run/nginx.pid;
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||
'$status $body_bytes_sent "$http_referer" '
|
||||
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||
access_log /var/log/nginx/access.log main;
|
||||
sendfile on;
|
||||
keepalive_timeout 65;
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
location / {
|
||||
root /app;
|
||||
index index.html;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
5. Соберите образ docker
|
||||
|
||||
```bash
|
||||
docker build . -t my-app
|
||||
# Sending build context to Docker daemon 884.7kB
|
||||
# ...
|
||||
# Successfully built 4b00e5ee82ae
|
||||
# Successfully tagged my-app:latest
|
||||
```
|
||||
|
||||
6. Запустите образ docker
|
||||
|
||||
Эта сборка основана на официальном образе `nginx`, поэтому перенаправление логов уже настроено и само-демонтизация (self daemonizing) отключена. Для улучшения работы nginx в контейнере docker были установлены некоторые другие настройки по умолчанию. Подробнее см. в [репозитории nginx docker](https://hub.docker.com/_/nginx).
|
||||
|
||||
```bash
|
||||
docker run -d -p 8080:80 my-app
|
||||
curl localhost:8080
|
||||
# <!DOCTYPE html><html lang=en>...</html>
|
||||
```
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
В дополнение к [значениям по умолчанию, предоставляемым `html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates), все [переменные окружения в клиентском коде](./mode-and-env.md#испоnьзование-переменных-окружения-в-кnиентском-коде) также доступны напрямую. Например, чтобы использовать значение `BASE_URL`:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
```
|
||||
|
||||
@@ -39,9 +39,13 @@
|
||||
|
||||
Эти подсказки внедряются [@vue/preload-webpack-plugin](https://github.com/vuejs/preload-webpack-plugin) и могут быть изменены / удалены с помощью `chainWebpack` через `config.plugin('prefetch')`.
|
||||
|
||||
::: tip Примечание для многостраничных конфигураций
|
||||
При использовании многостраничной конфигурации имя плагина нужно изменить в соответствии со структурой `prefetch-{pagename}`, например `prefetch-app`.
|
||||
:::
|
||||
|
||||
Например:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -61,7 +65,7 @@ module.exports = {
|
||||
|
||||
Когда prefetch плагин отключён, вы можете вручную указывать необходимые фрагменты для prefetch с помощью инлайновых комментариев для webpack:
|
||||
|
||||
``` js
|
||||
```js
|
||||
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
|
||||
```
|
||||
|
||||
@@ -75,7 +79,7 @@ Webpack добавит prefetch-ссылки когда родительский
|
||||
|
||||
При использовании Vue CLI с существующим бэкендом, вам может потребоваться отключить генерацию `index.html`, чтобы сгенерированные ресурсы могли быть использованы с другим документом по умолчанию. Для этого добавьте в файл [`vue.config.js`](../config/#vue-config-js) следующее:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
// отключение хэшей в именах файлов
|
||||
@@ -115,13 +119,13 @@ module.exports = {
|
||||
|
||||
Например, `url(./image.png)` будет преобразован в `require('./image.png')`, а тег шаблона
|
||||
|
||||
``` html
|
||||
```html
|
||||
<img src="./image.png">
|
||||
```
|
||||
|
||||
будет скомпилирован в:
|
||||
|
||||
``` js
|
||||
```js
|
||||
h('img', { attrs: { src: require('./image.png') }})
|
||||
```
|
||||
|
||||
@@ -129,7 +133,7 @@ h('img', { attrs: { src: require('./image.png') }})
|
||||
|
||||
Изменить размер можно через [chainWebpack](../config/#chainwebpack). Например, чтобы установить лимит в 10 КБайт:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -150,7 +154,7 @@ module.exports = {
|
||||
|
||||
- Если URL начинается с `~`, то всё что после него будет интерпретироваться как запрос модуля. Это означает, что вы можете ссылаться на ресурсы даже внутри `node_modules`:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<img src="~some-npm-package/foo.png">
|
||||
```
|
||||
|
||||
@@ -170,13 +174,13 @@ module.exports = {
|
||||
|
||||
- В `public/index.html` или других HTML-файлах, используемых `html-webpack-plugin` в качестве шаблонов, необходимо добавлять префикс в ссылки с помощью `<%= BASE_URL %>`:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
```
|
||||
|
||||
- В шаблонах потребуется сначала передать `BASE_URL` в компонент:
|
||||
|
||||
``` js
|
||||
```js
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
@@ -186,7 +190,7 @@ module.exports = {
|
||||
|
||||
А затем использовать в шаблоне:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<img :src="`${publicPath}my-image.png`">
|
||||
```
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
Vue CLI требуется [Node.js](https://nodejs.org/) версии 8.9 или выше (рекомендуется 8.11.0+). Управлять несколькими версиями Node на машине можно с помощью [nvm](https://github.com/creationix/nvm) или [nvm-windows](https://github.com/coreybutler/nvm-windows).
|
||||
:::
|
||||
|
||||
Для установки новых версий пакетов используйте одну из этих команд:
|
||||
Для установки нового пакета используйте одну из следующих команд. Для их выполнения потребуются права администратора, если только npm не был установлен в системе через менеджер версий Node.js (например, n или nvm).
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
# ИЛИ
|
||||
yarn global add @vue/cli
|
||||
|
||||
@@ -1,8 +1,38 @@
|
||||
# Переменные окружения и режимы работы
|
||||
# Режимы работы и переменные окружения
|
||||
|
||||
Вы можете указать переменные окружения в специальных файлах в корне вашего проекта:
|
||||
## Режимы работы
|
||||
|
||||
``` bash
|
||||
**Режимы работы** — важная часть проектов Vue CLI. По умолчанию есть три режима работы:
|
||||
|
||||
- `development` используется `vue-cli-service serve`
|
||||
- `test` используется `vue-cli-service test:unit`
|
||||
- `production` используется `vue-cli-service build` и `vue-cli-service test:e2e`
|
||||
|
||||
Можно переопределять используемый для команды режим по умолчанию опцией `--mode`. Например, если необходимо использовать переменные для разработки в команде сборки:
|
||||
|
||||
```
|
||||
vue-cli-service build --mode development
|
||||
```
|
||||
|
||||
При запуске `vue-cli-service` загрузит переменные окружения из всех [соответствующих файлов](#переменные-окружения). Если в них не указана переменная `NODE_ENV`, то она установится соответствующим образом. Например, `NODE_ENV` будет установлена в `"production"` в режиме production, `"test"` в режиме test, а по умолчанию `"development"` в противном случае.
|
||||
|
||||
Затем `NODE_ENV` определяет основной режим работы приложения — разработка, production или тестирование — и, следовательно, какую конфигурацию webpack требуется создавать.
|
||||
|
||||
Например, для `NODE_ENV=test` Vue CLI создаёт конфигурацию webpack, которая оптимизирована и предназначена для модульных тестов. В ней не обрабатываются изображения и другие ресурсы, которые не требуются для модульных тестов.
|
||||
|
||||
Аналогично, при `NODE_ENV=development` создаётся конфигурация webpack, которая включает горячую перезагрузку модулей (HMR), не добавляет хэши в имена файлов ресурсов и не создаёт сборку для вендоров, чтобы обеспечить быструю пересборку при запуске сервера разработки.
|
||||
|
||||
При запуске `vue-cli-service build`, значение всегда должно быть `NODE_ENV=production` для получения приложения готового к публикации, независимо от окружения куда будет осуществляться публиковаться.
|
||||
|
||||
::: warning Предупреждение об использовании NODE_ENV
|
||||
Если в вашем окружении по умолчанию установлен `NODE_ENV`, необходимо либо удалить его, либо явно установить `NODE_ENV` при запуске команд `vue-cli-service`.
|
||||
:::
|
||||
|
||||
## Переменные окружения
|
||||
|
||||
Переменные окружения можно указать в специальных файлах в корне проекта:
|
||||
|
||||
```bash
|
||||
.env # загружается во всех случаях
|
||||
.env.local # загружается во всех случаях, игнорируется git
|
||||
.env.[mode] # загружается только в указанном режиме работы
|
||||
@@ -16,37 +46,21 @@ FOO=bar
|
||||
VUE_APP_SECRET=secret
|
||||
```
|
||||
|
||||
Эти переменные будут доступны для всех команд `vue-cli-service`, плагинов и зависимостей.
|
||||
Обратите внимание, что только переменные с префиксом `VUE_APP_` будут статически внедряться в клиентскую сборку с помощью `webpack.DefinePlugin`.
|
||||
|
||||
Подробнее о правилах парсинга env можно узнать [в документации `dotenv`](https://github.com/motdotla/dotenv#rules). Мы также используем [dotenv-expand](https://github.com/motdotla/dotenv-expand) для переменных расширения (доступно в Vue CLI 3.5+).
|
||||
|
||||
Загруженные переменные станут доступны всем командам `vue-cli-service`, плагинам и зависимостям.
|
||||
|
||||
::: tip Приоритет загрузки переменных окружения
|
||||
Файл с переменными для определённого режима работы (например, `.env.production`) имеет более высокий приоритет, чем общий файл (например, `.env`).
|
||||
|
||||
Кроме того, переменные окружения, которые уже существуют при загрузке Vue CLI имеют наивысший приоритет и не будут перезаписаны значениями из файлов `.env`.
|
||||
Кроме того, переменные окружения, которые уже существуют при запуске Vue CLI имеют наивысший приоритет и не будут перезаписаны значениями из файлов `.env`.
|
||||
|
||||
Файлы `.env` загружаются при запуске `vue-cli-service`. При внесении изменений в файлы необходимо перезапустить службу.
|
||||
:::
|
||||
|
||||
::: warning Предупреждение об использовании NODE_ENV
|
||||
Если в вашем окружении по умолчанию установлен `NODE_ENV`, вы должны либо удалить его, либо явно установить `NODE_ENV` при выполнении команд `vue-cli-service`.
|
||||
:::
|
||||
|
||||
## Режимы работы
|
||||
|
||||
**Режимы работы** — важная часть проектов Vue CLI. По умолчанию, есть три режима работы:
|
||||
|
||||
- `development` используется `vue-cli-service serve`
|
||||
- `production` используется `vue-cli-service build` и `vue-cli-service test:e2e`
|
||||
- `test` используется `vue-cli-service test:unit`
|
||||
|
||||
Обратите внимание, что режим работы отличается от `NODE_ENV`, поскольку режим может устанавливать несколько переменных окружения. Тем не менее, каждый режим устанавливает `NODE_ENV` в такое же значение по умолчанию — например, `NODE_ENV` будет установлен в `"development"` в режиме разработки.
|
||||
|
||||
Вы можете установить переменные окружения только для определённого режима работы с помощью постфикса `.env` файла. Например, если создать файл с именем `.env.development` в корне вашего проекта, тогда переменные объявленные в нём будут загружаться только в режиме development.
|
||||
|
||||
Вы можете переопределить режим по умолчанию для команды, с помощью опции `--mode`. Например, если необходимо использовать переменные для разработки в команде сборки, добавьте это в свои скрипты `package.json`:
|
||||
|
||||
```
|
||||
"dev-build": "vue-cli-service build --mode development",
|
||||
```
|
||||
|
||||
## Пример: режим Staging
|
||||
### Пример: режим Staging
|
||||
|
||||
Предположим, что у нас есть приложение с `.env` файлом:
|
||||
|
||||
@@ -61,23 +75,23 @@ NODE_ENV=production
|
||||
VUE_APP_TITLE=My App (staging)
|
||||
```
|
||||
|
||||
- `vue-cli-service build` собирает приложение для production, загружает `.env`, `.env.production` и `.env.production.local` если они присутствуют;
|
||||
- `vue-cli-service build` собирает приложение для production, загружает `.env`, `.env.production` и `.env.production.local` если они существуют;
|
||||
|
||||
- `vue-cli-service build --mode staging` собирает приложение для production в режиме staging, используя `.env`, `.env.staging` и `.env.staging.local` если они присутствуют.
|
||||
- `vue-cli-service build --mode staging` собирает приложение для production в режиме staging, используя `.env`, `.env.staging` и `.env.staging.local` если они существуют.
|
||||
|
||||
В обоих случаях приложение собирается для production из-за установленного `NODE_ENV`, но в режиме staging, `process.env.VUE_APP_TITLE` будет перезаписываться другим значением.
|
||||
|
||||
## Использование переменных окружения в клиентском коде
|
||||
### Использование переменных окружения в клиентском коде
|
||||
|
||||
Только переменные с префиксом `VUE_APP_` статически внедряются в клиентскую сборку используя `webpack.DefinePlugin`. К ним можно получить доступ из кода вашего приложения:
|
||||
Можно получить доступ к переменным окружения из кода приложения:
|
||||
|
||||
``` js
|
||||
```js
|
||||
console.log(process.env.VUE_APP_SECRET)
|
||||
```
|
||||
|
||||
На этапе сборки `process.env.VUE_APP_SECRET` будет заменяться соответствующим значением. Когда в файле указано `VUE_APP_SECRET=secret` — после сборки значением будет `"secret"`.
|
||||
|
||||
В дополнение к переменным `VUE_APP_*` также есть две специальные переменные, которые всегда доступны в коде вашего приложения:
|
||||
В дополнение к переменным `VUE_APP_*` есть также две специальные переменные, которые всегда доступны в коде приложения:
|
||||
|
||||
- `NODE_ENV` — значение будет `"development"`, `"production"` или `"test"` в зависимости от [режима работы](#режимы-работы) в котором работает приложение.
|
||||
- `BASE_URL` — соответствует опции `publicPath` в `vue.config.js` и определяет базовый путь по которому опубликовано ваше приложение.
|
||||
@@ -85,11 +99,19 @@ console.log(process.env.VUE_APP_SECRET)
|
||||
Все разрешённые переменные окружения также будут доступны внутри `public/index.html` как обсуждалось ранее в разделе [HTML - Интерполяции](./html-and-static-assets.md#интерпоnяции).
|
||||
|
||||
::: tip Совет
|
||||
Можно добавлять вычисляемые переменные окружения в `vue.config.js`. Они по-прежнему должны именоваться с префикса `VUE_APP_`. Это может пригодиться например для получения информации о версии `process.env.VUE_APP_VERSION = require('./package.json').version`
|
||||
Можно добавлять вычисляемые переменные окружения в `vue.config.js`. Они по-прежнему должны именоваться с префикса `VUE_APP_`. Может пригодиться для получения информации о версии
|
||||
|
||||
```js
|
||||
process.env.VUE_APP_VERSION = require('./package.json').version
|
||||
|
||||
module.exports = {
|
||||
// конфигурация
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Переменные только для локального окружения
|
||||
### Переменные только для локального окружения
|
||||
|
||||
Иногда необходимы переменные окружения, которые не должны быть привязаны к кодовой базе, особенно если ваш проект размещается в публичном репозитории. В таком случае вы должны использовать файл `.env.local`. Локальные env-файлы добавлены в `.gitignore` по умолчанию.
|
||||
Иногда необходимы переменные окружения, которые не должны быть привязаны к кодовой базе, особенно если проект размещается в публичном репозитории. В таком случае следует использовать файл `.env.local`. Локальные env-файлы добавлены в `.gitignore` по умолчанию.
|
||||
|
||||
`.local` также могут добавляться к env-файлам специфичным для режима работы, например `.env.development.local` будет загружен во время разработки, и будет игнорироваться git.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Плагины
|
||||
|
||||
Архитектура Vue CLI основана на плагинах. Если изучить `package.json` в свежесозданном проекте, то вы найдёте зависимости, имена которых начинаются с `@vue/cli-plugin-`. Такие плагины могут изменять внутреннюю конфигурацию webpack и внедрять команды в `vue-cli-service`. Большинство возможностей, упоминаемых при создании проекта, реализованы ими.
|
||||
Vue CLI использует архитектуру на основе плагинов. Если изучить `package.json` в только что созданном проекте, можно обнаружить зависимости, которые начинаются с `@vue/cli-plugin-`. Плагины могут модифицировать внутреннюю конфигурацию webpack и внедрять команды в `vue-cli-service`. Большинство возможностей, перечисленных в процессе создания проекта, реализованы в виде плагинов.
|
||||
|
||||
Основанная на плагинах архитектура позволяет Vue CLI оставаться гибкой и расширяемой. Если вы хотите создать собственный плагин — изучите [руководство по созданию плагинов](../dev-guide/plugin-dev.md).
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
Каждый плагин для CLI поставляется с генератором (который создаёт файлы) и плагином для runtime (который меняет конфигурацию webpack и внедряет команды). Когда вы используете `vue create` для создания нового проекта, некоторые плагины будут уже предустановлены, в зависимости от вашего выбора необходимых возможностей. В случае, когда необходимо установить плагин в уже существующий проект, вы должны сделать это командой `vue add`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue add eslint
|
||||
```
|
||||
|
||||
@@ -28,27 +28,27 @@ vue add eslint
|
||||
|
||||
Команда `@vue/eslint` трансформируется в полное название пакета `@vue/cli-plugin-eslint`, устанавливает его из npm, и запускает его генератор.
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# это аналогично предыдущей команде
|
||||
vue add cli-plugin-eslint
|
||||
```
|
||||
|
||||
Без префикса `@vue` команда будет трансформировать название к публичному пакету. Например, чтобы установить сторонний плагин `vue-cli-plugin-apollo`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# устанавливает и запускает vue-cli-plugin-apollo
|
||||
vue add apollo
|
||||
```
|
||||
|
||||
Вы можете также использовать сторонние плагины со специфичным scope. Например, если плагин назван `@foo/vue-cli-plugin-bar`, то его можно добавить командой:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue add @foo/bar
|
||||
```
|
||||
|
||||
Можно передавать опции генерации в установленный плагин (для пропуска интерактивного выбора):
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue add eslint --config airbnb --lintOn save
|
||||
```
|
||||
|
||||
@@ -102,7 +102,7 @@ vue add eslint --config airbnb --lintOn save
|
||||
|
||||
Вот пример пресета настроек:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"useConfigFiles": true,
|
||||
"cssPreprocessor": "sass",
|
||||
@@ -120,7 +120,7 @@ vue add eslint --config airbnb --lintOn save
|
||||
|
||||
Информация из пресета настроек используется генераторами плагинов для создания в проекте соответствующих файлов. Кроме того, в дополнении к полям выше, возможно добавление дополнительных настроек для встроенных инструментов:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"useConfigFiles": true,
|
||||
"plugins": {...},
|
||||
@@ -139,7 +139,7 @@ vue add eslint --config airbnb --lintOn save
|
||||
|
||||
Вы можете явно указать версии используемых плагинов:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"plugins": {
|
||||
"@vue/cli-plugin-eslint": {
|
||||
@@ -160,7 +160,7 @@ vue add eslint --config airbnb --lintOn save
|
||||
|
||||
Для таких случаев можно указать `"prompts": true` в настройках плагина, чтобы позволить пользователю сделать свой выбор:
|
||||
|
||||
``` json
|
||||
```json
|
||||
{
|
||||
"plugins": {
|
||||
"@vue/cli-plugin-eslint": {
|
||||
@@ -181,23 +181,27 @@ vue add eslint --config airbnb --lintOn save
|
||||
|
||||
После публикации репозитория, при создании проекта теперь можно указать опцию `--preset` для использования пресета из удалённого репозитория:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# использование пресета из репозитория GitHub
|
||||
vue create --preset username/repo my-project
|
||||
```
|
||||
|
||||
GitLab и BitBucket также поддерживаются. Убедитесь, что используете опцию `--clone` при загрузке из стороннего репозитория:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue create --preset gitlab:username/repo --clone my-project
|
||||
vue create --preset bitbucket:username/repo --clone my-project
|
||||
|
||||
# self-hosted repos
|
||||
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
|
||||
```
|
||||
|
||||
### Пресет из локального файла
|
||||
|
||||
При разработке удалённого пресета настроек может часто требоваться отправлять пресет в удалённый репозиторий для его проверки. Для упрощения разработки можно использовать локальные пресеты напрямую. Vue CLI будет загружать локальные пресеты, если путь в значении `--preset` будет относительным или абсолютным, или заканчиваться на `.json`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# ./my-preset должен быть каталогом, содержащим preset.json
|
||||
vue create --preset ./my-preset my-project
|
||||
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
|
||||
Вы можете быстро создавать прототип в одном файле `*.vue` с помощью команд `vue serve` и `vue build`, но для них сначала потребуется глобально установить дополнительный плагин:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
npm install -g @vue/cli-service-global
|
||||
# или
|
||||
yarn global add @vue/cli-service-global
|
||||
```
|
||||
|
||||
Недостаток `vue serve` в том, что он полагается на глобально установленные зависимости, которые могут отличаться на разных машинах. Поэтому его рекомендуется использовать только для быстрого прототипирования.
|
||||
@@ -18,14 +20,15 @@ npm install -g @vue/cli-service-global
|
||||
|
||||
Опции:
|
||||
|
||||
-o, --open Открыть в браузере
|
||||
-c, --copy Скопировать локальный URL в буфер обмена
|
||||
-h, --help Вывести информацию об использовании команды
|
||||
-o, --open Открыть в браузере
|
||||
-c, --copy Скопировать локальный URL в буфер обмена
|
||||
-p, --port <port> Используемый сервером порт (по умолчанию: 8080 или следующий свободный порт)
|
||||
-h, --help Вывести информацию об использовании команды
|
||||
```
|
||||
|
||||
Всё что вам потребуется — файл `App.vue`:
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<template>
|
||||
<h1>Hello!</h1>
|
||||
</template>
|
||||
@@ -33,13 +36,13 @@ npm install -g @vue/cli-service-global
|
||||
|
||||
Затем, в каталоге с файлом `App.vue`, выполните команду:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue serve
|
||||
```
|
||||
|
||||
`vue serve` использует такую же конфигурацию по умолчанию (webpack, babel, postcss & eslint) как и проекты создаваемые с помощью `vue create`. Он автоматически выбирает стартовый файл в текущем каталоге — этот файл может быть одним из `main.js`, `index.js`, `App.vue` или `app.vue`. Можно также явно указать стартовый файл:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue serve MyComponent.vue
|
||||
```
|
||||
|
||||
@@ -62,7 +65,7 @@ vue serve MyComponent.vue
|
||||
|
||||
Вы можете собрать целевой файл в режиме production для публикации с помощью `vue build`:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue build MyComponent.vue
|
||||
```
|
||||
|
||||
|
||||
34
docs/ru/guide/troubleshooting.md
Normal file
34
docs/ru/guide/troubleshooting.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Поиск и устранение неисправностей
|
||||
|
||||
В это документе рассматриваются некоторые общие проблемы, касающиеся Vue CLI, и способы их решения. Прежде чем открывать новый issue, всегда выполняйте следующие действия.
|
||||
|
||||
## Запуск установки через `sudo` или как `root`
|
||||
|
||||
Если устанавливаете `@vue/cli-service` как пользователь `root` или с помощью `sudo`, то могут возникнуть проблемы при запуске скриптов `postinstall` пакета.
|
||||
|
||||
Это функция безопасности npm. Вы всегда должны избегать запуска npm с привилегиями root, потому что сценарии установки скриптов могут быть непреднамеренно вредоносными.
|
||||
|
||||
Однако, если необходимо, то можно обойти эту ошибку, установив флаг `--unsafe-perm` для npm. Это реализуется путём добавления префикса с переменной окружения к команде:
|
||||
|
||||
```bash
|
||||
npm_config_unsafe_perm=true vue create my-project
|
||||
```
|
||||
|
||||
## Символические ссылки в `node_modules`
|
||||
|
||||
Если есть зависимости, установленные через `npm link` или `yarn link`, ESLint (а иногда и Babel) могут работать некорректно для этих слинкованных зависимостей. Это происходит потому, что [по умолчанию webpack разрешает символические ссылки на их настоящее местоположение](https://webpack.js.org/configuration/resolve/#resolvesymlinks), таким образом ломая поиск конфигурации ESLint / Babel.
|
||||
|
||||
Обходным решением этой проблемы будет отключение вручную разрешения символических ссылок в webpack:
|
||||
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: (config) => {
|
||||
config.resolve.symlinks(false)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning ПРЕДУПРЕЖДЕНИЕ
|
||||
Отключение `resolve.symlinks` может сломать горячую перезагрузку модулей, если ваши зависимости устанавливались сторонними npm-клиентами, использующие символические ссылки, такие как `cnpm` или `pnpm`.
|
||||
:::
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
Самый простой способ изменять конфигурацию webpack — использовать объект в опции `configureWebpack` в файле `vue.config.js`:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
@@ -23,7 +23,7 @@ module.exports = {
|
||||
|
||||
Если необходимо условное поведение, в зависимости от окружения, или вы хотите напрямую изменять конфигурацию — используйте функцию (будет лениво выполняться после установки переменных окружения). Она получает итоговую конфигурацию в качестве аргумента. Внутри функции можно напрямую изменить конфигурацию, ИЛИ вернуть объект для объединения:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
configureWebpack: config => {
|
||||
@@ -48,7 +48,7 @@ module.exports = {
|
||||
|
||||
### Изменение настроек загрузчика
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -70,7 +70,7 @@ module.exports = {
|
||||
|
||||
### Добавление нового загрузчика
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -89,7 +89,7 @@ module.exports = {
|
||||
|
||||
Если вы хотите заменить существующий [базовый загрузчик](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js), например воспользоваться `vue-svg-loader` для вставки SVG-файлов инлайн вместо загрузки обычными файлами:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -110,7 +110,7 @@ module.exports = {
|
||||
|
||||
### Изменение настроек плагина
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -127,7 +127,7 @@ module.exports = {
|
||||
|
||||
Например, предположим, необходимо изменить местоположение `index.html` по умолчанию с `/Users/test/proj/public/index.html` на `/Users/test/proj/app/templates/index.html`. По ссылке [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options) перечислен список параметров, которые можем передавать. Чтобы изменить шаблон, передадим новый путь к шаблону следующей конфигурацией:
|
||||
|
||||
``` js
|
||||
```js
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
@@ -153,7 +153,7 @@ module.exports = {
|
||||
|
||||
Вы можете перенаправить вывод в файл для более удобного изучения:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue inspect > output.js
|
||||
```
|
||||
|
||||
@@ -161,21 +161,21 @@ vue inspect > output.js
|
||||
|
||||
Вы также можете указать подмножество конфигурации для проверки, указав путь:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
# показать только первое правило
|
||||
vue inspect module.rules.0
|
||||
```
|
||||
|
||||
Или указать именованное правило или плагин:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue inspect --rule vue
|
||||
vue inspect --plugin html
|
||||
```
|
||||
|
||||
Наконец, вы можете вывести все именованные правила и плагины:
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
vue inspect --rules
|
||||
vue inspect --plugins
|
||||
```
|
||||
|
||||
299
docs/ru/migrating-from-v3/README.md
Normal file
299
docs/ru/migrating-from-v3/README.md
Normal file
@@ -0,0 +1,299 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Миграция с версии v3
|
||||
|
||||
Для начала глобально установите последнюю версию Vue CLI:
|
||||
|
||||
```sh
|
||||
npm install -g @vue/cli
|
||||
# ИЛИ
|
||||
yarn global add @vue/cli
|
||||
```
|
||||
|
||||
## Обновление всех плагинов сразу
|
||||
|
||||
В существующих проектах запустите команду:
|
||||
|
||||
```sh
|
||||
vue upgrade
|
||||
```
|
||||
|
||||
После чего ознакомьтесь со следующим разделом с информацией о крупных изменениях (breaking changes) в каждом пакете.
|
||||
|
||||
------
|
||||
|
||||
## Миграция вручную по одному пакету
|
||||
|
||||
При желании выполнить миграцию постепенно и вручную несколько советов:
|
||||
|
||||
### Глобальный пакет `@vue/cli`
|
||||
|
||||
#### [Переработана команда](https://github.com/vuejs/vue-cli/pull/4090) `vue upgrade`
|
||||
|
||||
- Было: `vue upgrade [patch | minor | major]` — выполняла только установку последних версий плагинов Vue CLI.
|
||||
- Стало: `vue upgrade [plugin-name]` — кроме обновления плагинов, запускает миграции из них для автоматизации процесса обновления. Для получения информации о дополнительных опциях этой команды выполните `vue upgrade --help`.
|
||||
|
||||
#### Изменён формат вывода `vue --version`
|
||||
|
||||
При запуске `vue --version`:
|
||||
|
||||
- 3.x: выводит `3.12.0`
|
||||
- 4.x: выводит `@vue/cli 4.0.0`
|
||||
|
||||
#### Добавлен дополнительный шаг подтверждения во избежание перезаписи
|
||||
|
||||
При запуске `vue invoke` / `vue add` / `vue upgrade` теперь появляется [дополнительный шаг подтверждения](https://github.com/vuejs/vue-cli/pull/4275) при наличии незафиксированных изменений в текущем репозитории.
|
||||
|
||||
|
||||
|
||||
#### Vue Router и Vuex теперь имеют сопутствующие CLI-плагины
|
||||
|
||||
При запуске `vue add vuex` или `vue add router`:
|
||||
|
||||
- В версии 3, только `vuex` или `vue-router` добавляется в проект;
|
||||
- В версии 4, также устанавливается `@vue/cli-plugin-vuex` или `@vue/cli-plugin-router`.
|
||||
|
||||
В настоящее время это не привносит ничего особенного для конечных пользователей, но такой подход позволяет добавлять больше возможностей для пользователей Vuex и Vue Router позднее.
|
||||
|
||||
Для разработчиков пресетов и плагинов есть ещё несколько изменений в этих двух плагинах:
|
||||
|
||||
- Структура каталогов по умолчанию изменена:
|
||||
- `src/store.js` перемещён в `src/store/index.js`;
|
||||
- `src/router.js` перемещён в `src/router/index.js`;
|
||||
- Опции `router` и `routerHistoryMode` в файле `preset.json` по-прежнему поддерживаются для совместимости. Но рекомендуется использовать `plugins: { '@vue/cli-plugin-router': { historyMode: true } }` для консистентности.
|
||||
- `api.hasPlugin('vue-router')` больше не поддерживается. Теперь `api.hasPlugin('router')`.
|
||||
|
||||
### `@vue/cli-service`
|
||||
|
||||
#### Обработка пробелов в шаблонах
|
||||
|
||||
Во Vue CLI v3 для уменьшения размеров итоговой сборки по умолчанию отключена опция `preserveWhitespace` для `vue-template-compiler`.
|
||||
|
||||
Однако это привносило свои тонкости использования.
|
||||
|
||||
Но после релиза Vue 2.6 теперь можно управлять обработкой пробелов с помощью [новой опции `whitespace`](https://github.com/vuejs/vue/issues/9208#issuecomment-450012518). Поэтому во Vue CLI v4 перешли на использование этой новой опции по умолчанию.
|
||||
|
||||
Возьмём в качестве примера следующий шаблон:
|
||||
|
||||
```html
|
||||
<p>
|
||||
Welcome to <b>Vue.js</b> <i>world</i>.
|
||||
Have fun!
|
||||
</p>
|
||||
```
|
||||
|
||||
С опцией `preserveWhitespace: false` все пробелы между тегами будут удалены, поэтому он скомпилируется в:
|
||||
|
||||
```html
|
||||
<p> Welcome to <b>Vue.js</b><i>world</i>. Have fun! </p>
|
||||
```
|
||||
|
||||
С опцией `whitespace: 'condense'` он скомпилируется в:
|
||||
|
||||
```html
|
||||
<p> Welcome to <b>Vue.js</b> <i>world</i>. Have fun! </p>
|
||||
```
|
||||
|
||||
Обратите внимание, что теперь сохраняется **инлайновый** пробел между тегами.
|
||||
|
||||
#### `vue-cli-service build --mode development`
|
||||
|
||||
Раньше при запуске команды `build` в режиме `development` расположение каталога `dist` отличалось от расположения в режиме `production`. Теперь, с учётом указанных ниже двух пулл-реквестов, структура и расположение каталогов будет во всех режимах одинакова (имена файлов всё ещё различаются — никаких хэшей в режиме `development`):
|
||||
|
||||
- [#4323](https://github.com/vuejs/vue-cli/pull/4323) ensure consistent directory structure for all modes
|
||||
- [#4302](https://github.com/vuejs/vue-cli/pull/4302) move dev configs into serve command
|
||||
|
||||
#### Для пользователей SASS/SCSS
|
||||
|
||||
Раньше во Vue CLI v3 использовался `sass-loader@7` по умолчанию.
|
||||
|
||||
Недавно вышел `sass-loader@8` в котором довольно сильно изменился формат конфигурации. Примечания к релизу: <https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0>
|
||||
|
||||
`@vue/cli-service` продолжает поддерживать `sass-loader@7` в v4, но настоятельно рекомендуем обратить внимание на релиз `sass-loader@8` и обновиться до последней версии.
|
||||
|
||||
#### Для пользователей Less
|
||||
|
||||
`less-loader` v4 несовместим с `less` >= v3.10, см. <https://github.com/less/less.js/issues/3414>.
|
||||
Настоятельно рекомендуем обновиться до `less-loader@5`, если в проекте используется Less.
|
||||
|
||||
#### Для пользователей CSS модулей
|
||||
|
||||
- [Устаревшая опция `css.modules` заменена на `css.requireModuleExtension`](https://github.com/vuejs/vue-cli/pull/4387). Это связано с обновлением `css-loader` до v3 и изменением формата конфигурации. С подробным объяснением можно ознакомиться по ссылке.
|
||||
|
||||
#### Настройки `vue.config.js`
|
||||
|
||||
Уже объявленная как устаревшая [опция `baseUrl`](../config/#baseurl) теперь [удалена](https://github.com/vuejs/vue-cli/pull/4388).
|
||||
|
||||
#### `chainWebpack` / `configureWebpack`
|
||||
|
||||
##### Метод `minimizer` в `chainWebpack`
|
||||
|
||||
Если настраивали правила через `chainWebpack`, то обратите внимание, что `webpack-chain` обновлён с версии v4 до v6. Наиболее заметным изменением является конфигурация `minimizer`.
|
||||
|
||||
Например, если необходимо включить опцию `drop_console` в плагине terser.
|
||||
В версии v3 это можно сделать через `chainWebpack` так:
|
||||
|
||||
```js
|
||||
const TerserPlugin = require('terser-webpack-plugin')
|
||||
module.exports = {
|
||||
chainWebpack: (config) => {
|
||||
config.optimization.minimizer([
|
||||
new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })
|
||||
])
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
В версии v4 необходимо изменить таким образом:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
chainWebpack: (config) => {
|
||||
config.optimization.minimizer('terser').tap((args) => {
|
||||
args[0].terserOptions.compress.drop_console = true
|
||||
return args
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Другие изменения
|
||||
|
||||
- [Правило `pug-plain` переименовано в `pug-plain-loader`](https://github.com/vuejs/vue-cli/pull/4230)
|
||||
|
||||
#### Базовые загрузчики / плагины
|
||||
|
||||
Скорее всего это вряд ли повлияет на пользователей, если не настраивали опции через `chainWebpack` / `configureWebpack`
|
||||
|
||||
`css-loader` был обновлён с версии v1 до v3:
|
||||
|
||||
- [История изменений v2](https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0)
|
||||
- [История изменений v3](https://github.com/webpack-contrib/css-loader/releases/tag/v3.0.0)
|
||||
|
||||
Несколько базовых загрузчиков и плагинов webpack обновлены, с незначительными изменениями:
|
||||
|
||||
- `url-loader` [с версии v1 до v2](https://github.com/webpack-contrib/url-loader/releases/tag/v2.0.0)
|
||||
- `file-loader` [с версии v3 до v4](https://github.com/webpack-contrib/file-loader/releases/tag/v4.0.0)
|
||||
- `copy-webpack-plugin` [с версии v4 до v5](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md#500-2019-02-20)
|
||||
- `terser-webpack-plugin` [с версии v1 до v2](https://github.com/vuejs/vue-cli/pull/4676)
|
||||
|
||||
### `@vue/cli-plugin-babel`, `@vue/babel-preset-app`
|
||||
|
||||
#### core-js
|
||||
|
||||
Требуется плагину babel в качестве peer-зависимости для полифилов, используемых в транспилированном коде.
|
||||
|
||||
Во Vue CLI v3 использовалась `core-js` версии 2.x, теперь она обновлена до 3.x.
|
||||
|
||||
Эта миграция автоматизирована, достаточно выполнить команду `vue upgrade babel`. Но если добавлялись пользовательские полифилы, может потребоваться обновить имена полифилов (подробную информацию можно найти в [истории изменений core-js](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md#L279-L297)).
|
||||
|
||||
#### Пресет Babel
|
||||
|
||||
Эта миграция также автоматизирована, при обновлении командой `vue upgrade babel`.
|
||||
|
||||
- В версии v3, babel пресет по умолчанию в `babel.config.js` был `@vue/app`.
|
||||
- В версии v4, пресет перемещён в плагин и теперь называется `@vue/cli-plugin-babel/preset`
|
||||
|
||||
Необходимость этого в том, что `@vue/babel-preset-app` в действительности является косвенной зависимостью проекта. Это работает благодаря «поднятию» (hoisting) npm-пакета. Однако может стать причиной потенциальных проблем, если у проекта несколько косвенных зависимостей одного и того же пакета, или если менеджер пакетов накладывает более строгие ограничения при разрешении зависимостей (например, yarn plug'n'play или pnpm). Поэтому он вынесен отдельной зависимостью проекта (`@vue/cli-plugin-babel`) для большей совместимости со стандартами и меньшей подверженности ошибкам.
|
||||
|
||||
------
|
||||
|
||||
### `@vue/cli-plugin-eslint`
|
||||
|
||||
Плагин теперь [требует ESLint в качестве peer-зависимости](https://github.com/vuejs/vue-cli/pull/3852).
|
||||
|
||||
Это не повлияет на проекты, созданные с помощью Vue CLI 3.1 или более поздних версий.
|
||||
|
||||
Если проект был создан с помощью Vue CLI 3.0.x или более ранних версий, то потребуется добавить `eslint@4` к зависимостям проекта (это автоматизированно при обновлении плагина с помощью команды `vue upgrade eslint`).
|
||||
|
||||
Также рекомендуется обновить ESLint до версии v5, а конфигурацию ESLint до последней версии (поддержка ESLint v6 будет добавлена в ближайшем будущем).
|
||||
|
||||
------
|
||||
|
||||
#### Пресет Prettier
|
||||
|
||||
Старая реализация пресета prettier была несовершенной. Шаблон по умолчанию обновлён с версии Vue CLI v3.10.
|
||||
|
||||
Теперь требуются `eslint`, `eslint-plugin-prettier` и `prettier` в качестве peer-зависимостей, следуя [стандартным практикам экосистемы ESLint](https://github.com/eslint/eslint/issues/3458).
|
||||
|
||||
В старых проектах при возникновении проблем как `Cannot find module: eslint-plugin-prettier` необходимо выполнить следующую команду для их исправления:
|
||||
|
||||
```sh
|
||||
npm install --save-dev eslint@5 @vue/eslint-config-prettier@5 eslint-plugin-prettier prettier
|
||||
```
|
||||
|
||||
------
|
||||
|
||||
#### Настройки `lintOnSave`
|
||||
|
||||
(затрагивает только процесс разработки)
|
||||
|
||||
Значение по умолчанию для опции `lintOnSave` (если не было указано) [изменено с `true` на `'default'`](https://github.com/vuejs/vue-cli/pull/3975). Ознакомиться с подробным объяснением можно [в документации](../config/#lintonsave).
|
||||
|
||||
Вкратце:
|
||||
|
||||
- В версии v3, по умолчанию, предупреждения линтинга и ошибки отображаются в браузере в слое для ошибок поверх приложения.
|
||||
- В версии v4, по умолчанию, только ошибки линтинга будут таким образом прерывать процесс разработки. Предупреждения будут отображаться в консоли терминала.
|
||||
|
||||
### `@vue/cli-plugin-pwa`
|
||||
|
||||
Базовый плагин workbox-webpack-plugin обновлён с версии v3 до v4. См. [примечания к релизу](https://github.com/GoogleChrome/workbox/releases/tag/v4.0.0).
|
||||
|
||||
Теперь доступно поле `pwa.manifestOptions` (его можно указать в файле `vue.config.js`). Благодаря этой опции можно сгенерировать `manifest.json` из объекта конфигурации, а не копировать из каталога `public`. Это обеспечивает более консистентный интерфейс управления конфигурацией PWA (Обратите внимание, что это опциональная возможность. Связанные пулл-реквесты: [#2981](https://github.com/vuejs/vue-cli/pull/2981), [#4664](https://github.com/vuejs/vue-cli/pull/4664)).
|
||||
|
||||
### `@vue/cli-plugin-e2e-cypress`
|
||||
|
||||
До Vue CLI v3.0.0-beta.10 команда для E2E-тестирования по умолчанию была `vue-cli-service e2e`. Позднее изменена на `vue-cli-service test:e2e`. Предыдущая команда объявлена устаревшей, но всё ещё поддерживалась. Теперь [поддержка старой команды удалена](https://github.com/vuejs/vue-cli/pull/3774).
|
||||
|
||||
### `@vue/cli-plugin-e2e-nightwatch`
|
||||
|
||||
Nightwatch.js обновлён с версии 0.9 до 1.x. Рекомендуем сначала изучить [руководство по миграции Nightwatch](https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0).
|
||||
|
||||
Поставляемая в комплекте конфигурация и генерируемые тесты [были полностью переработаны](https://github.com/vuejs/vue-cli/pull/4541). Перейдите по ссылке для получения более подробной информации. Большинство используемых кейсов во Vue CLI v3 по-прежнему поддерживаются. Это просто добавление новых возможностей.
|
||||
|
||||
Поскольку ChromeDriver изменил свою стратегию версионирования с 73-й версии, теперь он сделан peer-зависимостью проекта. В плагине реализована простая проверка версии браузера, поэтому при обновлении до несовместимой версии Chrome появится предупреждение с предложением обновить до соответствующей версии и ChromeDriver.
|
||||
|
||||
------
|
||||
|
||||
Аналогично плагину для cypress, поддержка устаревшей команды `vue-cli-service e2e` удалена.
|
||||
|
||||
### `@vue/cli-plugin-typescript`
|
||||
|
||||
При использовании Typescript, webpack в настройках разрешения модулей теперь [отдаёт предпочтение файлам с расширениями `ts(x)`, а не `js(x)`](https://github.com/vuejs/vue-cli/pull/3909).
|
||||
|
||||
### `@vue/cli-plugin-unit-jest`
|
||||
|
||||
Обновлён Jest с версии v23 до v24, поэтому рекомендуем сначала изучить [примечания к релизу](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly). А также, при необходимости, ознакомиться с [полной историей изменений](https://github.com/facebook/jest/blob/20ba4be9499d50ed0c9231b86d4a64ec8a6bd303/CHANGELOG.md#user-content-2400).
|
||||
|
||||
Плагин `unit-jest` теперь поставляется с 4 пресетами конфигурации:
|
||||
|
||||
- `@vue/cli-plugin-unit-jest` — пресет по умолчанию для наиболее распространённых типов проектов
|
||||
- `@vue/cli-plugin-unit-jest/presets/no-babel` — если не установлен `@vue/cli-plugin-babel` и требуется не использовать babel в проекте
|
||||
- `@vue/cli-plugin-unit-jest/presets/typescript` — пресет с поддержкой TypeScript (но без поддержки TSX)
|
||||
- `@vue/cli-plugin-unit-jest/presets/typescript-and-babel` — пресет с поддержкой TypeScript (в том числе TSX) и babel.
|
||||
|
||||
Если после создания проекта стандартная конфигурация Jest не изменялась (расположена в файле `jest.config.js` или в поле `jest` в `package.json`), то можно просто заменить массивный объект конфигурации одним единственным полем:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// Замените имя пресета на одно из списка выше по необходимости
|
||||
preset: '@vue/cli-plugin-unit-jest'
|
||||
}
|
||||
```
|
||||
|
||||
(зависимости `ts-jest`, `babel-jest` можно удалить после миграции конфигурации на использование пресета)
|
||||
|
||||
::: tip Напоминание
|
||||
По умолчанию тестовое окружение в новых пресетах использует jsdom@15, что отличается от среды по умолчанию в Jest 24 (jsdom@11). Это должно быть согласовано в предстоящем обновлении Jest 25. Большинство пользователей не будут затронуты этим изменением. Подробную информацию, связанную с jsdom, можно найти в истории изменений <https://github.com/jsdom/jsdom/blob/master/Changelog.md>
|
||||
:::
|
||||
|
||||
### `@vue/cli-plugin-unit-mocha`
|
||||
|
||||
- Теперь используется mochapack вместо mocha-webpack, см. историю изменений <https://github.com/sysgears/mochapack/releases>. Это изменение вряд ли повлияет на фактическое использование.
|
||||
- Обновление mocha до версии 6, см. [историю изменений Mocha](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md#600-0--2019-01-01) для подробной информации.
|
||||
|
||||
### `@vue/cli-service-global`
|
||||
|
||||
См. подробные изменения в пакетах [`@vue/cli-service`](#vue-cli-service) и [`@vue/cli-plugin-eslint`](#vue-cli-plugin-eslint).
|
||||
Reference in New Issue
Block a user