Merge branch 'dev' into upgrade-webpack

Author: haoqunjiang

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     "indent": ["error", 2, {
       "MemberExpression": "off"
     }],
+    "no-shadow": ["error"],
     "node/no-extraneous-require": ["error", {
       "allowModules": [
         "@vue/cli-service",

CHANGELOG.md

@@ -1,4 +1,4 @@
-# vue-cli [![Build Status](https://circleci.com/gh/vuejs/vue-cli/tree/dev.svg?style=shield)](https://circleci.com/gh/vuejs/vue-cli/tree/dev) [![Windows Build status](https://ci.appveyor.com/api/projects/status/rkpafdpdwie9lqx0/branch/dev?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-cli/branch/dev) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
+# vue-cli [![Build Status](https://circleci.com/gh/vuejs/vue-cli/tree/dev.svg?style=shield)](https://circleci.com/gh/vuejs/vue-cli/tree/dev) [![Windows Build status](https://ci.appveyor.com/api/projects/status/rkpafdpdwie9lqx0/branch/dev?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-cli/branch/dev) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 
 > Vue CLI is the Standard Tooling for Vue.js Development.

README.md

@@ -3,7 +3,6 @@ environment:
 
 install:
   - ps: Install-Product node $env:nodejs_version
-  - yarn patch-chromedriver
   - yarn --network-timeout 600000
 
 test_script:

appveyor.yml

@@ -247,10 +247,20 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
 
 ### css.modules
 
+Deprecated since v4, please use [`css.requireModuleExtension`](#css-requireModuleExtension) instead.
+
+In v3 this means the opposite of `css.requireModuleExtension`.
+
+### css.requireModuleExtension
+
 - Type: `boolean`
-- Default: `false`
+- Default: `true`
 
-  By default, only files that ends in `*.module.[ext]` are treated as CSS modules. Setting this to `true` will allow you to drop `.module` in the filenames and treat all `*.(css|scss|sass|less|styl(us)?)` files as CSS modules.
+  By default, only files that ends in `*.module.[ext]` are treated as CSS modules. Setting this to `false` will allow you to drop `.module` in the filenames and treat all `*.(css|scss|sass|less|styl(us)?)` files as CSS modules.
+
+  ::: tip
+  If you have customized CSS Modules configurations in `css.loaderOptions.css`, then the `css.requireModuleExtension` field must be explictly configured to `true` or `false`, otherwise we can't be sure whether you want to apply these options to all CSS files or not.
+  :::
 
   See also: [Working with CSS > CSS Modules](../guide/css.md#css-modules)
 
@@ -304,6 +314,8 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
   - [less-loader](https://github.com/webpack-contrib/less-loader)
   - [stylus-loader](https://github.com/shama/stylus-loader)
 
+  It's also possible to target `scss` syntax separately from `sass`, with the `scss` option.
+
   See also: [Passing Options to Pre-Processor Loaders](../guide/css.md#passing-options-to-pre-processor-loaders)
 
   ::: tip
@@ -338,6 +350,10 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
 
   This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to `http://localhost:4000`.
 
+  ::: warning
+  When `devServer.proxy` is set to a string, only XHR requests will be proxied. If you want to test an API URL, don't open it in the browser, use an API tool like Postman instead.
+  :::
+
   If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options:
 
   ``` js

docs/config/README.md

@@ -20,7 +20,7 @@
 
   > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading.
 
-  Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js).
+  Additionally, [all Nightwatch CLI options are also supported](https://nightwatchjs.org/guide#command-line-options).
 
 ## Configuration
 

docs/core-plugins/e2e-nightwatch.md

@@ -38,6 +38,8 @@ The version string for the **project local** `@vue/cli-service` version that is
 
   Nothing happens if the provided version is satisfied. Otherwise, an error will be thrown.
 
+  Note: It's recommended to use [the `peerDependencies` field in `package.json`](https://docs.npmjs.com/files/package.json#peerdependencies) under most circumstances.
+
 
 ## resolve
 
@@ -54,12 +56,13 @@ Resolve a path for the current project
 
 - **Arguments**
   - `{string} id` - plugin id, can omit the (@vue/|vue-|@scope/vue)-cli-plugin- prefix
+  - `{string} version` - semver version range, optional
 
 - **Returns**
   - `{boolean}`
 
 - **Usage**:
-Check if the project has a plugin with given id
+Check if the project has a plugin with given id. If version range is given, then the plugin version should satisfy it
 
 ## addConfigTransform
 
@@ -177,4 +180,3 @@ Get the entry file taking into account typescript.
 
 - **Usage**:
 Checks if the plugin is being invoked.
-

docs/dev-guide/generator-api.md

@@ -19,6 +19,8 @@ The version string for the `@vue/cli-service` version that is loading the plugin
 
   Nothing happens if the provided version is satisfied. Otherwise, an error will be thrown.
 
+  Note: It's recommended to use [the `peerDependencies` field in `package.json`](https://docs.npmjs.com/files/package.json#peerdependencies) under most circumstances.
+
 ## getCwd
 
 - **Usage**:

docs/dev-guide/plugin-api.md

@@ -241,51 +241,57 @@ Let's consider the case where we have created a `router.js` file via [templating
 api.injectImports(api.entryFile, `import router from './router'`)
 ```
 
-Now, when we have a router imported, we can inject this router to the Vue instance in the main file. We will use `onCreateComplete` hook which is to be called when the files have been written to disk.
+Now, when we have a router imported, we can inject this router to the Vue instance in the main file. We will use `afterInvoke` hook which is to be called when the files have been written to disk.
 
 First, we need to read main file content with Node `fs` module (which provides an API for interacting with the file system) and split this content on lines:
 
 ```js
 // generator/index.js
 
-api.onCreateComplete(() => {
-  const fs = require('fs')
-  const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
-  const lines = contentMain.split(/\r?\n/g)
-})
+module.exports.hooks = (api) => {
+  api.afterInvoke(() => {
+    const fs = require('fs')
+    const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
+    const lines = contentMain.split(/\r?\n/g)
+  })
+}
 ```
 
 Then we should to find the string containing `render` word (it's usually a part of Vue instance) and add our `router` as a next string:
 
-```js{8-9}
+```js{9-10}
 // generator/index.js
 
-api.onCreateComplete(() => {
-  const fs = require('fs')
-  const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
-  const lines = contentMain.split(/\r?\n/g)
+module.exports.hooks = (api) => {
+  api.afterInvoke(() => {
+    const fs = require('fs')
+    const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
+    const lines = contentMain.split(/\r?\n/g)
 
-  const renderIndex = lines.findIndex(line => line.match(/render/))
-  lines[renderIndex] += `\n  router,`
-})
+    const renderIndex = lines.findIndex(line => line.match(/render/))
+    lines[renderIndex] += `\n  router,`
+  })
+}
 ```
 
 Finally, you need to write the content back to the main file:
 
-```js{2,11}
+```js{12-13}
 // generator/index.js
 
-api.onCreateComplete(() => {
-  const { EOL } = require('os')
-  const fs = require('fs')
-  const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
-  const lines = contentMain.split(/\r?\n/g)
+module.exports.hooks = (api) => {
+  api.afterInvoke(() => {
+    const { EOL } = require('os')
+    const fs = require('fs')
+    const contentMain = fs.readFileSync(api.entryFile, { encoding: 'utf-8' })
+    const lines = contentMain.split(/\r?\n/g)
 
-  const renderIndex = lines.findIndex(line => line.match(/render/))
-   lines[renderIndex] += `${EOL}  router,`
+    const renderIndex = lines.findIndex(line => line.match(/render/))
+    lines[renderIndex] += `${EOL}  router,`
 
-  fs.writeFileSync(api.entryFile, lines.join(EOL), { encoding: 'utf-8' })
-})
+    fs.writeFileSync(api.entryFile, lines.join(EOL), { encoding: 'utf-8' })
+  })
+}
 ```
 
 ## Service Plugin

docs/dev-guide/plugin-dev.md

@@ -89,13 +89,13 @@ import styles from './foo.module.css'
 import sassStyles from './foo.module.scss'
 ```
 
-If you want to drop the `.module` in the filenames, set `css.modules` to `true` in `vue.config.js`:
+If you want to drop the `.module` in the filenames, set `css.requireModuleExtension` to `false` in `vue.config.js`:
 
 ``` js
 // vue.config.js
 module.exports = {
   css: {
-    modules: true
+    requireModuleExtension: false
   }
 }
 ```
@@ -108,8 +108,13 @@ module.exports = {
   css: {
     loaderOptions: {
       css: {
-        localIdentName: '[name]-[hash]',
-        camelCase: 'only'
+        // Note: the following config format is different between Vue CLI v4 and v3
+        // For Vue CLI v3 users, please refer to css-loader v1 documentations
+        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
+        modules: {
+          localIdentName: '[name]-[hash]',
+          localsConvention: 'camelCaseOnly'
+        }
       }
     }
   }
@@ -126,9 +131,17 @@ module.exports = {
   css: {
     loaderOptions: {
       // pass options to sass-loader
+      // @/ is an alias to src/
+      // so this assumes you have a file named `src/variables.sass`
       sass: {
-        // @/ is an alias to src/
-        // so this assumes you have a file named `src/variables.scss`
+        data: `@import "~@/variables.sass"`
+      },
+      // by default the `sass` option will apply to both syntaxes
+      // because `scss` syntax is also processed by sass-loader underlyingly
+      // but when configuring the `data` option
+      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
+      // in that case, we can target the `scss` syntax separately using the `scss` option
+      scss: {
         data: `@import "~@/variables.scss";`
       },
       // pass Less.js Options to less-loader

docs/guide/css.md

@@ -265,49 +265,77 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho
 
 ### Now
 
-1. Install the Now CLI globally:
+This example uses the latest Now platform version 2.
+
+1. Install the Now CLI:
 
 ```bash
 npm install -g now
+
+# Or, if you prefer a local one
+npm install now
 ```
 
 2. Add a `now.json` file to your project root:
 
     ```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"
     }
     ```
 
-    You can further customize the static serving behavior by consulting [Now's documentation](https://zeit.co/docs/deployment-types/static).
-
-3. Adding a deployment script in `package.json`:
+    If you have different/additional folders, modify the route accordingly:
+
+    ```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" }
+    + }
+    ```
 
-    ```json
-    "deploy": "npm run build && now && now alias"
+    If your `outputDir` is not the default `dist`, say `build`:
+
+    ```diff
+    - {
+    -   "src": "package.json",
+    -   "use": "@now/static-build"
+    - }
+    + {
+    +   "src": "package.json",
+    +   "use": "@now/static-build",
+    +   "config": { "distDir": "build" }
+    + }
     ```
 
-    If you want to deploy publicly by default, you can change the deployment script to the following one:
+3. Adding a `now-build` script in `package.json`:
 
     ```json
-    "deploy": "npm run build && now --public && now alias"
+    "now-build": "npm run build"
     ```
+    
+    To make a deployment, run `now`.
 
-    This will automatically point your site's alias to the latest deployment. Now, just run `npm run deploy` to deploy your app.
+    If you want your deployment aliased, run `now --target production` instead.
 
 ### Stdlib
 

docs/guide/deployment.md

@@ -46,6 +46,8 @@ FOO=bar
 VUE_APP_SECRET=secret
 ```
 
+Note that only variables that start with `VUE_APP_` will be statically embedded into the client bundle with `webpack.DefinePlugin`.
+
 For more detailed env parsing rules, please refer to [the documentation of `dotenv`](https://github.com/motdotla/dotenv#rules). We also use [dotenv-expand](https://github.com/motdotla/dotenv-expand) for variable expansion (available in Vue CLI 3.5+).
 
 Loaded variables will become available to all `vue-cli-service` commands, plugins and dependencies.
@@ -55,6 +57,8 @@ Loaded variables will become available to all `vue-cli-service` commands, plugin
 An env file for a specific mode (e.g. `.env.production`) will take higher priority than a generic one (e.g. `.env`).
 
 In addition, environment variables that already exist when Vue CLI is executed have the highest priority and will not be overwritten by `.env` files.
+
+`.env` files are loaded at the start of `vue-cli-service`. Restart the service after making changes.
 :::
 
 ### Example: Staging Mode
@@ -80,7 +84,7 @@ In both cases, the app is built as a production app because of the `NODE_ENV`, b
 
 ### Using Env Variables in Client-side Code
 
-Only variables that start with `VUE_APP_` will be statically embedded into the client bundle with `webpack.DefinePlugin`. You can access them in your application code:
+You can access env variables in your application code:
 
 ``` js
 console.log(process.env.VUE_APP_SECRET)

docs/guide/mode-and-env.md

@@ -20,9 +20,10 @@ serve a .js or .vue file in development mode with zero config
 
 Options:
 
-  -o, --open  Open browser
-  -c, --copy  Copy local url to clipboard
-  -h, --help  output usage information
+  -o, --open         Open browser
+  -c, --copy         Copy local url to clipboard
+  -p, --port <port>  Port used by the server (default: 8080 or next available port)
+  -h, --help         Output usage information
 ```
 
 All you need is an `App.vue` file:

docs/guide/prototyping.md

@@ -30,7 +30,7 @@ Vue CLI состоит из нескольких составных частей
 
 ### CLI
 
-CLI (`@vue/cli`) — это npm-пакет, устанавливаемый глобально и предоставляющий команду `vue` в терминале. Он позволяет быстро создать новый проект командой `vue create`, или мгновенно прототипировать ваши новые идеи через `vue serve`. Также можно управлять проектами в графическом интерфейсе через `vue ui`. Мы рассмотрим, что он может делать в следующих разделах руководства.
+CLI (`@vue/cli`) — это npm-пакет, устанавливаемый глобально и предоставляющий команду `vue` в терминале. Он позволяет быстро создать новый проект командой `vue create`, или мгновенно прототипировать ваши новые идеи через `vue serve`. Также можно управлять проектами в графическом интерфейсе через `vue ui`. Мы рассмотрим, что он может делать, в следующих разделах руководства.
 
 ### Сервис CLI