**vue-cli** [[vue官方网站 vue-cli]](https://cli.vuejs.org/guide/) Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious `Single Page Applications`. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. `Vue CLI` is a full system for rapid Vue.js development, providing: * Interactive project scaffolding via`@vue/cli`. * Zero config rapid prototyping via`@vue/cli`+`@vue/cli-service-global`. * A runtime dependency (`@vue/cli-service`) that is: * Upgradeable; * Built on top of webpack, with sensible defaults; * Configurable via in-project config file; * Extensible via plugins * A rich collection of official plugins integrating the best tools in the frontend ecosystem. * A full graphical user interface to create and manage Vue.js projects. `Vue CLI` aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting. ***** 内容索引 [TOC] ***** ## Installation The package name changed from`vue-cli`to`@vue/cli`. If you have the previous`vue-cli`(1.x or 2.x) package installed globally, you need to uninstall it first with`npm uninstall vue-cli -g`or`yarn global remove vue-cli`. >[warning] Vue CLI requires `Node.js` version 8.9 or above (8.11.0+ recommended). To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. n or nvm). ~~~ npm install -g @vue/cli # OR yarn global add @vue/cli ~~~ After installation, you will have access to the`vue`binary in your command line. You can verify that it is properly installed by simply running`vue`, which should present you with a help message listing all available commands. You can check you have the right version (3.x) with this command: ~~~ vue --version ~~~ ## Components of the System There are several moving parts of Vue CLI - if you look at the[source code](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue), you will find that it is a monorepo containing a number of separately published packages. ### **CLI** (`@vue/cli`) npm package: `@vue/cli` The CLI (`@vue/cli`) is a globally installed npm package and provides the`vue`command in your terminal. It provides the ability to quickly scaffold a new project via`vue create`, or instantly prototype new ideas via`vue serve`. You can also manage your projects using a graphical user interface via`vue ui`. We will walk through what it can do in the next few sections of the guide. ### **CLI Service** (`@vue/cli-service`) npm package: `@vue/cli-service` The CLI Service (`@vue/cli-service`) is a development dependency. It's an npm package installed locally into every project created by`@vue/cli`. The CLI Service is built on top of `webpack` and `webpack-dev-server`. It contains: * The core service that loads other CLI Plugins; * An internal webpack config that is optimized for most apps; * The`vue-cli-service`binary inside the project, which comes with the basic `serve`, `build` and `inspect` commands. If you are familiar with [create-react-app](https://github.com/facebookincubator/create-react-app),`@vue/cli-service`is roughly the equivalent of`react-scripts`, although the feature set is different. The section on [CLI Service](https://cli.vuejs.org/guide/cli-service.html) covers its detailed usage. ### **CLI Plugins** (`@vue/cli-plugin-` `vue-cli-plugin-`) npm packages: 1. `@vue/cli-plugin-`(for built-in plugins) 2. `vue-cli-plugin-`(for community plugins). CLI Plugins are npm packages that provide optional features to your `Vue CLI` projects, such as Babel/TypeScript transpilation, ESLint integration, unit testing, and end-to-end testing. It's easy to spot a Vue CLI plugin as their names start with either `@vue/cli-plugin-`(for built-in plugins) or `vue-cli-plugin-`(for community plugins). When you run the `vue-cli-service` binary inside your project, it automatically resolves and loads all CLI Plugins listed in your project's `package.json`. Plugins can be included as part of your project creation process or added into the project later. They can also be grouped into reusable presets. We will discuss these in more depth in the [Plugins and Presets](https://cli.vuejs.org/guide/plugins-and-presets.html) section. ## Basic ### Commands ~~~ $ vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: create [options] <app-name> create a new project powered by vue-cli-service add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service serve [options] [entry] serve a .js or .vue file in development mode with zero config build [options] [entry] build a .js or .vue file in production mode with zero config ui [options] start and open the vue-cli ui init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) config [options] [value] inspect and modify the config upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor) info print debugging information about your environment Run vue <command> --help for detailed usage of given command. ~~~ ### Creating a Project To create a new project, run: ~~~ shell $ vue create hello-world ~~~ A new project can also be generated inside an existing directory, like so: ~~~ shell $ vue create . ~~~ >[warning] If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. You must launch the command as`winpty vue.cmd create hello-world`. If you however want to still use the`vue create hello-world`syntax, you can alias the command by adding the following line to your`~/.bashrc`file.`alias vue='winpty vue.cmd'`You will need to restart your Git Bash terminal session to pull in the updated bashrc file. The`vue create`command has a number of options and you can explore them all by running: ~~~ $ vue create --help Usage: create [options] <app-name> create a new project powered by vue-cli-service Options: -p, --preset <presetName> Skip prompts and use saved or remote preset -d, --default Skip prompts and use default preset -i, --inlinePreset <json> Skip prompts and use inline JSON string as preset -m, --packageManager <command> Use specified npm client when installing dependencies -r, --registry <url> Use specified npm registry when installing dependencies -g, --git [message|false] Force / skip git initialization, optionally specify initial commit message -n, --no-git Skip git initialization -f, --force Overwrite target directory if it exists -c, --clone Use git clone when fetching remote preset -x, --proxy Use specified proxy when creating project -b, --bare Scaffold project without beginner instructions -h, --help Output usage information ~~~ Projects created via `vue create` are ready to go without the need for additional configuration. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts. Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. ### `~/.vuerc` Saved presets will be stored in a JSON file named`.vuerc`in your user home directory(path: `~/.vuerc`). If you wish to modify saved presets / options, you can do so by editing this file. ### Plugins and Presets [[官方文档]](https://cli.vuejs.org/guide/plugins-and-presets.html#plugins) * **plugins** Vue CLI uses a plugin-based architecture.If you inspect a newly created project's `package.json`, you will find dependencies that start with `@vue/cli-plugin-`. Plugins can modify the internal webpack configuration and inject commands to `vue-cli-service`. Most of the features listed during the project creation process are implemented as plugins. In case you want to install a plugin into an already created project, you can do so with the`vue add`command: ~~~bash $ vue add eslint ~~~ >[info] `vue add` is specifically designed for installing and invoking Vue CLI plugins. It is not meant as a replacement for normal npm packages. For normal npm packages, you should still use your package manager of choice. The command resolves`@vue/eslint`to the full package name `@vue/cli-plugin-eslint`, installs it from npm, and invokes its generator. ~~~bash # these are equivalent to the previous usage $ vue add cli-plugin-eslint ~~~ `vue-router`and`vuex`are special cases - they do not have their own plugins, but you can add them nonetheless: ~~~bash $ vue add router $ vue add vuex ~~~ Without the`@vue`prefix, the command will resolve to an unscoped package instead. For example, to install the 3rd party plugin`vue-cli-plugin-apollo`: ~~~bash # installs and invokes vue-cli-plugin-apollo $ vue add apollo ~~~ You can also use 3rd party plugins under a specific scope. For example, if a plugin is named`@foo/vue-cli-plugin-bar`, you can add it with: ~~~bash $ vue add @foo/bar ~~~ You can pass generator options to the installed plugin (this will skip the prompts): ~~~bash $ vue add eslint --config airbnb --lintOn save ~~~ If a plugin is already installed, you can skip the installation and only invoke its generator with the `vue invoke` command. The command takes the same arguments as `vue add`. * **presets** A Vue CLI preset is a JSON object that contains pre-defined options and plugins for creating a new project so that the user doesn't have to go through the prompts to select them. Presets saved during`vue create`are stored in a configuration file in your user home directory (`~/.vuerc`). You can directly edit this file to tweak / add / delete the saved presets. ### Using the GUI You can also create and manage projects using a graphical interface with the`vue ui`command: ~~~bash $ vue ui ~~~ The above command will open a browser window with a GUI that guides you through the project creation process.  ### CLI Service Inside a Vue CLI project,`@vue/cli-service` installs a binary named `vue-cli-service`. You can access the binary directly as `vue-cli-service` in npm scripts, or as `./node_modules/.bin/vue-cli-service` from the terminal. This is what you will see in the `package.json`of a project using the default preset: ~~~bash { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ~~~ You can invoke these scripts using either npm or Yarn: ~~~bash $ npm run serve # OR $ yarn serve ~~~ If you have [npx](https://github.com/npm/npx) available (should be bundled with an up-to-date version of npm), you can also invoke the binary directly with: ~~~bash $ npx vue-cli-service serve ~~~ You can run scripts with additional features using the GUI with the `vue ui`command.  #### vue-cli-service serve #### vue-cli-service build #### vue-cli-service inspect #### Checking All Available Commands Some CLI plugins will inject additional commands to `vue-cli-service`. For example, `@vue/cli-plugin-eslint` injects the `vue-cli-service lint` command. You can see all injected commands by running: ~~~bash $ npx vue-cli-service help ~~~ You can also learn about the available options of each command with: ~~~bash $ npx vue-cli-service help [command] ~~~ ## Development ### Browser Compatibility [[官方文档]](https://cli.vuejs.org/guide/browser-compatibility.html#browserslist) #### browserslist You will notice a `browserslist` field in `package.json`(or a separate `.browserslistrc`file) specifying a range of browsers the project is targeting. This value will be used by [@babel/preset-env](https://new.babeljs.io/docs/en/next/babel-preset-env.html) and [autoprefixer](https://github.com/postcss/autoprefixer) to automatically determine the JavaScript features that need to be transpiled and the CSS vendor prefixes needed. See [here](https://github.com/ai/browserslist)for how to specify browser ranges. #### Modern Mode Vue CLI offers a "Modern Mode" to help you solve this problem. When building for production with the following command: ~~~bash $ vue-cli-service build --modern ~~~ Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support [ES modules](https://jakearchibald.com/2017/es-modules-in-browsers/), and one legacy bundle targeting older browsers that do not. * The modern bundle is loaded with`<script type="module">`, in browsers that support it; they are also preloaded using`<link rel="modulepreload">`instead. * The legacy bundle is loaded with`<script nomodule>`, which is ignored by browsers that support ES modules. * A fix for`<script nomodule>`in Safari 10 is also automatically injected. In production, the modern bundle will typically result in significantly faster parsing and evaluation, improving your app's loading performance. >[success] **Detecting the Current Mode in Config** >Sometimes you may need to change the webpack config only for the legacy build, or only for the modern build. > Vue CLI uses two environment variables to communicate this: > * `VUE_CLI_MODERN_MODE`: The build was started with the`--modern`flag > * `VUE_CLI_MODERN_BUILD`: when true, the current config is for the modern build. Otherwise it's for the legacy build. > > **Important:** These variables are only accessible when/after `chainWebpack()` and `configureWebpack()`functions are evaluated, (so not directly in the `vue.config.js` module's root scope). That means it's also available in the postcss config file(`postcss.config.js` ). >[warning] Caveat: **Adjusting webpack plugins** > Some Plugins, i.e. `html-webpack-plugin`, `preload-plugin` etc. are only included in the config for modern mode. Trying to tap into their options in the legacy config can throw an error as the plugins don't exist. > Use the above tip about *Detecting the Current Mode* to manipulate plugins in the right mode only, and/or check if the plugin actually exists in the current mode's config before trying to tap into their options. ### HTML and Static Assets [[官方文档]](https://cli.vuejs.org/guide/html-and-static-assets.html#html) #### HTML #### Static Assets Static assets can be handled in two different ways: * Imported in JavaScript or referenced in templates/CSS via *relative paths*. Such references will be handled by `webpack`. * Placed in the `public`directory and referenced via *absolute paths*. These assets will simply be copied and not go through webpack. Note we recommend importing assets as part of your module dependency graph so that they will go through webpack with the following benefits: * Scripts and stylesheets get minified and bundled together to avoid extra network requests. * Missing files cause compilation errors instead of 404 errors for your users. * Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. The `public` directory is provided as an **escape hatch**, and when you reference it via absolute path, you need to take into account where your app will be deployed. If your app is not deployed at the root of a domain, you will need to prefix your URLs with the `publicPath`. When to use the`public`folder? * You need a file with a specific name in the build output. * You have thousands of images and need to dynamically reference their paths. * Some library may be incompatible with `Webpack` and you have no other option but to include it as a`<script>`tag. ### Working with CSS [[官方文档]](https://cli.vuejs.org/guide/css.html) #### Referencing Assets All compiled CSS are processed by [css-loader](https://github.com/webpack-contrib/css-loader), which parses `url()` and resolves them as module requests. This means you can refer to assets using relative paths based on the local file structure. Note if you want to reference a file inside an npm dependency or via webpack alias, the path must be prefixed with`~`to avoid ambiguity. #### PostCSS Vue CLI uses PostCSS internally. You can configure PostCSS via `.postcssrc` or any config source supported by [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config), and configure [postcss-loader](https://github.com/postcss/postcss-loader) via `css.loaderOptions.postcss` in `vue.config.js`. The [autoprefixer](https://github.com/postcss/autoprefixer) plugin is enabled by default. To configure the browser targets, use the [browserslist](https://cli.vuejs.org/guide/browser-compatibility.html#browserslist) field in `package.json`. >[success] Note on Vendor-prefixed CSS Rules > In the production build, Vue CLI optimizes your CSS and will drop unnecessary vendor-prefixed CSS rules based on your browser targets. With`autoprefixer`enabled by default, you should always use only non-prefixed CSS rules. ### Working with Webpack [[官方文档]](https://cli.vuejs.org/guide/webpack.html#simple-configuration) #### Simple Configuration The easiest way to tweak the webpack config is providing an object to the `configureWebpack` option in `vue.config.js`: ~~~javascript // vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } } ~~~ The object will be merged into the final webpack config using [webpack-merge](https://github.com/survivejs/webpack-merge). >[warning] Some webpack options are set based on values in `vue.config.js` and should not be mutated directly. For example, > * instead of modifying`output.path`, you should use the`outputDir`option in`vue.config.js`; > * instead of modifying`output.publicPath`, you should use the`publicPath`option in`vue.config.js`. > > This is because the values in`vue.config.js`will be used in multiple places inside the config to ensure everything works properly together. If you need conditional behavior based on the environment, or want to directly mutate the config, use a function (which will be lazy evaluated after the env variables are set). The function receives the resolved config as the argument. Inside the function, you can either mutate the config directly, OR return an object which will be merged: ~~~javascript // vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // mutate config for production... } else { // mutate for development... } } } ~~~ #### Chaining(Advanced) The internal webpack config is maintained using [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). The library provides an abstraction over the raw webpack config, with the ability to define named loader rules and named plugins, and later "tap" into those rules and modify their options. This allows us finer-grained control over the internal config. Below you will see some examples of common modifications done via the `chainWebpack` option in `vue.config.js`. >[info] [vue inspect](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config) will be extremely helpful when you are trying to access specific loaders via chaining. #### Inspecting the Project's Webpack Config(`inspect` command) Since `@vue/cli-service` abstracts away the webpack config, it may be more difficult to understand what is included in the config, especially when you are trying to make tweaks yourself. `vue-cli-service` exposes the `inspect` command for inspecting the resolved webpack config. The global`vue`binary also provides the `inspect` command, and it simply proxies to `vue-cli-service inspect` in your project. The command will print the resolved webpack config to stdout, which also contains hints on how to access rules and plugins via chaining. You can redirect the output into a file for easier inspection: ~~~bash $ vue inspect > output.js ~~~ Note the output is not a valid webpack config file, it's a serialized format only meant for inspection. You can also inspect a subset of the config by specifying a path: ~~~bash # only inspect the first rule $ vue inspect module.rules.0 ~~~ Or, target a named rule or plugin: ~~~bash $ vue inspect --rule vue $ vue inspect --plugin html ~~~ Finally, you can list all named rules and plugins: ~~~bash $ vue inspect --rules $ vue inspect --plugins ~~~ **Using Resolved Config as a File** Some external tools may need access to the resolved webpack config as a file, for example IDEs or command line tools that expect a webpack config path. In that case you can use the following path: ~~~bash <projectRoot>/node_modules/@vue/cli-service/webpack.config.js ~~~ This file dynamically resolves and exports the exact same webpack config used in `vue-cli-service` commands, including those from plugins and even your custom configurations. #### 静态资源处理及路径 [[参考文档]](https://segmentfault.com/a/1190000016120011) 相对路径 绝对路径 webpack打包`~`,`@()` * html文件中，通过`script`标签引入js文件。 * vue中，通过 `import name from pathStr` 语句导入文件，不光可以导入js文件。 “name”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 “pathStr”指的是文件的相对路径字符串. eg: ~~~javascript //code-1：‘@’，以根目录的方式定义相对路径 import banana from '@/components/banana' //code-2：‘.’，父子目录的方式定义相对路径 // ‘. /’指当前目录 // ‘../’指当前目录的上一层目录 import apple from '../components/apple' ~~~ #### 减少包体积 [# Webpack + Vue，部署时减少包体积的几种方法](https://juejin.im/post/5abba68cf265da239c7b6bdc) 减少打包后文件体积的方法： 1. 采用懒加载 2. 启用 Gzip 压缩 3. 将依赖库挂到 CDN 上 4. 减少不必要的库依赖 [# vue首屏加载优化](https://segmentfault.com/a/1190000010042512) 1. 按需加载 2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化 3. 异步组件 4. 优化组件加载时机 5. 服务端开启 gzip压缩, #### Webpack的externals的使用 [# Webpack的externals的使用](https://www.jianshu.com/p/b8d934d4a84e) **vue.config.js** ~~~javascript var path="web/"; function getProdExternals() { return { axios: "axios", "chart.js": "Chart", vue: "Vue" }; } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? path:'/', configureWebpack: { externals: process.env.NODE_ENV === 'production' ? getProdExternals() : {} }, // 生产环境是否生成 sourceMap 文件 productionSourceMap:false, } ~~~ 通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。 比如我们在index.html用CDN的方式引入jquery，webpack编译打包时不打包处理它，但是可以引用到它。 ~~~xml <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> ~~~ 使用方法 ~~~javascript const $ = require("jquery") 或者 import $ from "jquery"; $("#content").html("<h1>hello world</h1>") //配置 externals: { jquery: "jQuery" }, ~~~ ### Modes and Enviroment Variables [[官方文档]](https://cli.vuejs.org/guide/mode-and-env.html#modes) #### Modes By default, there are three modes: * `development` is used by`vue-cli-service serve` * `test` is used by `vue-cli-service test:unit` * `production` is used by`vue-cli-service build` and `vue-cli-service test:e2e` You can overwrite the default mode used for a command by passing the`--mode`option flag. For example, if you want to use development variables in the build command: ~~~bash $ vue-cli-service build --mode development ~~~ When running `vue-cli-service`, environment variables are loaded from all [corresponding files](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables). If they don't contain a `NODE_ENV` variable, it will be set accordingly. Then `NODE_ENV` will determine the primary mode your app is running in - development, production or test - and consequently, what kind of webpack config will be created. 1. `NODE_ENV=test` Vue CLI creates a webpack config that is intended to be used and optimized for unit tests. It doesn't process images and other assets that are unnecessary for unit tests. 2. `NODE_ENV=development` Vue CLI creates a webpack configuration which enables HMR, doesn't hash assets or create vendor bundles in order to allow for fast re-builds when running a dev server. 3. `NODE_ENV=production` obtain an app ready for deployment, regardless of the environment you're deploying to. >[warning] NODE\_ENV > If you have a default `NODE_ENV` in your environment, you should either remove it or explicitly set `NODE_ENV` when running `vue-cli-service` commands. #### Enviroment Variables You can specify env variables by placing the following files in your project root: ~~~ .env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified mode .env.[mode].local # only loaded in specified mode, ignored by git ~~~ An env file simply contains key=value pairs of environment variables: ~~~ 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`. Loaded variables will become available to all`vue-cli-service`commands, plugins and dependencies. >[info] Env Loading Priorities > 1. An env file for a specific mode (e.g. `.env.production`) will take higher priority than a generic one (e.g. `.env`). > 2. In addition, environment variables that already exist when Vue CLI is executed have the highest priority and will not be overwritten by`.env`files. > 3. `.env`files are loaded at the start of`vue-cli-service`. Restart the service after making changes. 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+). ### Build Tagrets [[官方文档]](https://cli.vuejs.org/guide/build-targets.html#app) When you run `vue-cli-service build`, you can specify different build targets via the `--target`option. This allows you to use the same code base to produce different builds for different use cases. #### App **`App`** is the default build target. In this mode: * `index.html`with asset and resource hints injection * vendor libraries split into a separate chunk for better caching * static assets under 4kb are inlined into JavaScript * static assets in `public` are copied into output directory #### Library >[warning] In lib mode, Vue is ***externalized***. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global`Vue`variable. To avoid this behavior provide`--inline-vue`flag to`build`command. ~~~bash $ vue-cli-service build --target lib --inline-vue ~~~ You can build a single entry as a library using ~~~bash $ vue-cli-service build --target lib --name myLib [entry] ~~~ ~~~bash File Size Gzipped dist/myLib.umd.min.js 13.28 kb 8.42 kb dist/myLib.umd.js 20.95 kb 10.22 kb dist/myLib.common.js 20.57 kb 10.09 kb dist/myLib.css 0.33 kb 0.23 kb ~~~ The entry can be either a `.js` or a `.vue` file. If no entry is specified, `src/App.vue` will be used. A lib build outputs: * `dist/myLib.umd.min.js`: Minified version of the UMD build. * `dist/myLib.umd.js`: A UMD bundle for consuming directly in browsers or with AMD loaders * `dist/myLib.common.js`: A CommonJS bundle for consuming via bundlers (unfortunately, `webpack` currently does not support ES modules output format for bundles yet) * `dist/myLib.css`: Extracted CSS file (can be forced into inlined by setting`css: { extract: false }`in`vue.config.js`) **`.Vue` vs `.JS/TS` Entry Files** - When using a `.vue` file as entry, your library will directly expose the Vue component itself, because the component is always the default export. - When using a`.js`or`.ts` file as entry, it may contain named exports, so your library will be exposed as a Module. This means the default export of your library must be accessed as `window.yourLib.default` in UMD builds, or as `const myLib = require('mylib').default` in CommonJS builds. If you don't have any named exports and wish to directly expose the default export, you can use the following webpack configuration in `vue.config.js`: ~~~javascript module.exports = { configureWebpack: { output: { libraryExport: 'default' } } } ~~~ #### Web Component >[warning] Web Component mode does not support IE11 and below. >[warning] In web component mode, Vue is ***externalized***. This means the bundle will not bundle `Vue` even if your code imports `Vue`. The bundle will assume `Vue` is available on the host page as a global variable. To avoid this behavior provide `--inline-vue` flag to `build` command. ~~~bash $ vue-cli-service build --target wc --inline-vue ~~~ You can build a single entry as a web component using ~~~bash $ vue-cli-service build --target wc --name my-element [entry] ~~~ Note that the entry should be a `*.vue` file. `Vue CLI` will automatically wrap and register the component as a Web Component for you, and there's no need to do this yourself in `main.js`. You can use `main.js` as a demo app solely for development. The `build` will produce a single JavaScript file (and its minified version) with everything inlined. The script, when included on a page, registers the`<my-element>`custom element, which wraps the target Vue component using `@vue/web-component-wrapper`. The wrapper automatically proxies properties, attributes, events and slots. See the [docs for`@vue/web-component-wrapper`](https://github.com/vuejs/vue-web-component-wrapper)for more details. >[info] the bundle relies on`Vue`being globally available on the page. This mode allows consumers of your component to use the Vue component as a normal DOM element: ~~~html <script src="https://unpkg.com/vue"></script> <script src="path/to/my-element.js"></script> <!-- use in plain HTML, or in any other framework --> <my-element></my-element> ~~~ **Bundle that Registers Multiple Web Components** When building a web component bundle, you can also target multiple components by using a glob as entry: ~~~bash $ vue-cli-service build --target wc --name foo 'src/components/*.vue' ~~~ When building multiple web components, `--name` will be used as the prefix and the custom element name will be inferred from the component filename. For example, with `--name foo` and a component named `HelloWorld.vue`, the resulting custom element will be registered as `<foo-hello-world>`. **Async Web Component** When targeting multiple web components, the bundle may become quite large, and the user may only use a few of the components your bundle registers. The async web component mode produces a code-split bundle with a small entry file that provides the shared runtime between all the components, and registers all the custom elements upfront. The actual implementation of a component is then fetched on-demand only when an instance of the corresponding custom element is used on the page: ~~~ vue-cli-service build --target wc-async --name foo 'src/components/*.vue' ~~~ ~~~ File Size Gzipped dist/foo.0.min.js 12.80 kb 8.09 kb dist/foo.min.js 7.45 kb 3.17 kb dist/foo.1.min.js 2.91 kb 1.02 kb dist/foo.js 22.51 kb 6.67 kb dist/foo.0.js 17.27 kb 8.83 kb dist/foo.1.js 5.24 kb 1.64 kb ~~~ Now on the page, the user only needs to include Vue and the entry file: ~~~ <script src="https://unpkg.com/vue"></script> <script src="path/to/foo.min.js"></script> <!-- foo-one's implementation chunk is auto fetched when it's used --> <foo-one></foo-one> ~~~ #### Using vuex in builds When building a [Webcomponent](https://cli.vuejs.org/guide/build-targets.html#web-component) or [Library](https://cli.vuejs.org/guide/build-targets.html#library), the entry point is not `main.js`, but an `entry-wc.js` file, generated here: [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) So to use vuex in web component target, you need to initialize the store in `App.vue`: ~~~javascript import store from './store' // ... export default { store, name: 'App', // ... } ~~~ ### Deployment [[官方文档]](https://cli.vuejs.org/guide/deployment.html#bitbucket-cloud) #### Docker (Nginx) Deploy your application using nginx inside of a docker container. 1. Install [docker](https://www.docker.com/get-started) 2. Create a `Dockerfile` file in the root of your project. ~~~shell 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. Create a`.dockerignore`file in the root of your project Setting up the`.dockerignore`file prevents`node_modules`and any intermediate build artifacts from being copied to the image which can cause issues during building. ~~~shell **/node_modules **/dist ~~~ 4. Create a`nginx.conf`file in the root of your project `Nginx`is an HTTP(s) server that will run in your docker container. It uses a configuration file to determine how to serve content/which ports to listen on/etc. See the [nginx configuration documentation](https://www.nginx.com/resources/wiki/start/topics/examples/full/) for an example of all of the possible configuration options. The following is a simple `nginx` configuration that serves your vue project on port`80`. The root `index.html` is served for `page not found`/`404` errors which allows us to use `pushState()` based routing. ~~~shell 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. Build your docker image ~~~shell docker build . -t my-app # Sending build context to Docker daemon 884.7kB # ... # Successfully built 4b00e5ee82ae # Successfully tagged my-app:latest ~~~ 6. Run your docker image This build is based on the official`nginx`image so log redirection has already been set up and self daemonizing has been turned off. Some other default settings have been setup to improve running nginx in a docker container. See the [nginx docker repo](https://hub.docker.com/_/nginx) for more info. ~~~shell docker run -d -p 8080:80 my-app curl localhost:8080 # <!DOCTYPE html><html lang=en>...</html> ~~~ ## Configuration Reference [[官方文档]](https://cli.vuejs.org/config/#global-cli-config) You can use the `vue config` command to inspect or modify the global CLI config. Some global configurations for `@vue/cli`, such as your preferred package manager and your locally saved presets, are stored in a JSON file named `.vuerc` in your home directory. You can edit this file directly with your editor of choice to change the saved options. ### vue.config.js `vue.config.js`is an optional config file that will be automatically loaded by`@vue/cli-service`if it's present in your project root (next to`package.json`). You can also use the`vue`field in`package.json`, but do note in that case you will be limited to JSON-compatible values only. The file should export an object containing options: ~~~javascript // vue.config.js module.exports = { // options... } ~~~ #### publicPath * Type:`string` * Default:`'/'` The base URL your application bundle will be deployed at (known as `baseUrl` before Vue CLI 3.3). This is the equivalent of webpack's `output.publicPath`, but Vue CLI also needs this value for other purposes, so you should **always use `publicPath` instead of modifying webpack `output.publicPath`**. By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. `https://www.my-app.com/`. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at `https://www.foobar.com/my-app/`, set `publicPath` to `'/my-app/'`. The value can also be set to an empty string (`''`) or a relative path (`./`) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app. >[warning] **Limitations of relative publicPath** > Relative`publicPath`has some limitations and should be avoided when: > * You are using HTML5`history.pushState`routing; > * You are using the`pages`option to build a multi-paged app. This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value: ~~~javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' } ~~~ #### outputDir * Type:`string` * Default:`'dist'` The directory where the production build files will be generated in when running `vue-cli-service build`. Note the target directory will be removed before building (this behavior can be disabled by passing`--no-clean`when building). Always use `outputDir` instead of modifying webpack `output.path`. #### assetsDir * Type:`string` * Default:`''` A directory (relative to **`outputDir`**) to nest generated static assets (js, css, img, fonts) under. `assetsDir`is ignored when overwriting the filename or chunkFilename from the generated assets. #### indexPath * Type:`string` * Default:`'index.html'` Specify the output path for the generated `index.html` (relative to **`outputDir`**). Can also be an absolute path. #### configureWebpack * Type:`Object | Function` If the value is an Object, it will be merged into the final config using [webpack-merge](https://github.com/survivejs/webpack-merge). If the value is a function, it will receive the resolved config as the argument. The function can either mutate the config and return nothing, OR return a cloned or merged version of the config. #### chainWebpack * Type:`Function` A function that will receive an instance of `ChainableConfig` powered by [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). Allows for more fine-grained modification of the internal webpack config. #### pages * Type:`Object` * Default:`undefined` Build the app in multi-page mode. Each "page" should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either: * An object that specifies its`entry`,`template`,`filename`,`title`and`chunks`(all optional except`entry`). Any other properties added beside those will also be passed directly to`html-webpack-plugin`, allowing user to customize said plugin; * Or a string specifying its`entry`. ~~~javascript module.exports = { pages: { index: { // entry for the page entry: 'src/index/main.js', // the source template template: 'public/index.html', // output as dist/index.html filename: 'index.html', // when using title option, // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // chunks to include on this page, by default includes // extracted common chunks and vendor chunks. chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. subpage: 'src/subpage/main.js' } } ~~~ When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of `html-webpack-plugin` and `preload-webpack-plugin`). Make sure to run `vue inspect` if you are trying to modify the options for those plugins. ### Babel Babel can be configured via `babel.config.js`. Vue CLI uses `babel.config.js`which is a new config format in Babel 7. Unlike`.babelrc`or the`babel`field in`package.json`, this config file does not use a file-location based resolution, and is applied consistently to any file under project root, including dependencies inside`node_modules`. It is recommended to always use`babel.config.js`instead of other formats in Vue CLI projects. All Vue CLI apps use `@vue/babel-preset-app`, which includes `babel-preset-env`, JSX support and optimized configuration for minimal bundle size overhead. See [its docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) for details and preset options. ### ESLint ESLint can be configured via`.eslintrc`or`eslintConfig`field in`package.json`. See [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) for more details. [[vue-cli3的eslint配置问题]]([https://www.jianshu.com/p/bfc7e7329cff](https://www.jianshu.com/p/bfc7e7329cff)) 配置后需要重启服务器才生效 重启之，es-lint配置成功了 #### `package.json`文件中eslint的配置 1、关闭eslint 直接注释掉`package.json`文件中eslint的配置就可以了（以下是vue-cli的默认配置） ~~~javascript "eslintConfig": { "root": true,////此项是用来告诉eslint找当前配置文件不能往父级查找 "env": { "node": true//此项指定环境的全局变量，下面的配置指定为node环境 }, "extends": [// 此项是用来配置vue.js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错 "plugin:vue/essential", "@vue/standard" ], "rules": {//规则配置写在这里 "indent": [1, 4] }, "parserOptions": { "parser": "babel-eslint"//此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析 } }, ~~~ 或者vue.config.js中将以下三项设置为false ~~~javascript devServer: { overlay: { warnings: false, errors: false }, lintOnSave: false } ~~~ 详细解读可参考 [vue-cli配置官方文档](https://cli.vuejs.org/zh/config/#pages) 或者 [vue-cli-eslint github说明书](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) 2、修改eslint的语法检测，文件为根目录下的`package.json`文件（规则写在rules内） 格式： ~~~javascript rules: { "规则名": [规则值, 规则配置] } ~~~ 规则值： ~~~javascript "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作为一个错误（退出代码触发时为1） ~~~ #### eslint 规则配置参数 ~~~javascript "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名 "no-class-assign": 2,//禁止给类赋值 "no-cond-assign": 2,//禁止在条件表达式中使用赋值语句 "no-console": 2,//禁止使用console "no-const-assign": 2,//禁止修改const声明的变量 "no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1) "no-continue": 0,//禁止使用continue "no-control-regex": 2,//禁止在正则表达式中使用控制字符 "no-debugger": 2,//禁止使用debugger "no-delete-var": 2,//不能对var声明的变量使用delete操作符 "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/ "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1} "no-dupe-args": 2,//函数参数不能重复 "no-duplicate-case": 2,//switch中的case标签不能重复 "no-else-return": 2,//如果if语句里面有return,后面不能跟else语句 "no-empty": 2,//块语句中的内容不能为空 "no-empty-character-class": 2,//正则表达式中的[]内容不能为空 "no-empty-label": 2,//禁止使用空label "no-eq-null": 2,//禁止对null使用==或!=运算符 "no-eval": 1,//禁止使用eval "no-ex-assign": 2,//禁止给catch语句中的异常参数赋值 "no-extend-native": 2,//禁止扩展native对象 "no-extra-bind": 2,//禁止不必要的函数绑定 "no-extra-boolean-cast": 2,//禁止不必要的bool转换 "no-extra-parens": 2,//禁止非必要的括号 "no-extra-semi": 2,//禁止多余的冒号 "no-fallthrough": 1,//禁止switch穿透 "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3. "no-func-assign": 2,//禁止重复的函数声明 "no-implicit-coercion": 1,//禁止隐式转换 "no-implied-eval": 2,//禁止使用隐式eval "no-inline-comments": 0,//禁止行内备注 "no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数） "no-invalid-regexp": 2,//禁止无效的正则表达式 "no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量 "no-irregular-whitespace": 2,//不能有不规则的空格 "no-iterator": 2,//禁止使用__iterator__ 属性 "no-label-var": 2,//label名不能与var声明的变量名相同 "no-labels": 2,//禁止标签声明 "no-lone-blocks": 2,//禁止不必要的嵌套块 "no-lonely-if": 2,//禁止else语句内只有if语句 "no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以） "no-mixed-requires": [0, false],//声明时不能混用声明类型 "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格 "linebreak-style": [0, "windows"],//换行风格 "no-multi-spaces": 1,//不能用多余的空格 "no-multi-str": 2,//字符串不能用\换行 "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行 "no-native-reassign": 2,//不能重写native对象 "no-negated-in-lhs": 2,//in 操作符的左边不能有! "no-nested-ternary": 0,//禁止使用嵌套的三目运算 "no-new": 1,//禁止在使用new构造一个实例后不赋值 "no-new-func": 1,//禁止使用new Function "no-new-object": 2,//禁止使用new Object() "no-new-require": 2,//禁止使用new require "no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number "no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON() "no-octal": 2,//禁止使用八进制数字 "no-octal-escape": 2,//禁止使用八进制转义序列 "no-param-reassign": 2,//禁止给参数重新赋值 "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接 "no-plusplus": 0,//禁止使用++，-- "no-process-env": 0,//禁止使用process.env "no-process-exit": 0,//禁止使用process.exit() "no-proto": 2,//禁止使用__proto__属性 "no-redeclare": 2,//禁止重复声明变量 "no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/ "no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错 "no-return-assign": 1,//return 语句中不能有赋值表达式 "no-script-url": 0,//禁止使用javascript:void(0) "no-self-compare": 2,//不能比较自身 "no-sequences": 0,//禁止使用逗号运算符 "no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 "no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用 "no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格 "no-sparse-arrays": 2,//禁止稀疏数组， [1,,2] "no-sync": 0,//nodejs 禁止同步方法 "no-ternary": 0,//禁止使用三目运算符 "no-trailing-spaces": 1,//一行结束后面不要有空格 "no-this-before-super": 0,//在调用super()之前不能使用this或super "no-throw-literal": 2,//禁止抛出字面量错误 throw "error"; "no-undef": 1,//不能有未定义的变量 "no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined "no-undefined": 2,//不能使用undefined "no-unexpected-multiline": 2,//避免多行表达式 "no-underscore-dangle": 1,//标识符不能以_开头或结尾 "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false; "no-unreachable": 2,//不能有无法执行的代码 "no-unused-expressions": 2,//禁止无用的表达式 "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数 "no-use-before-define": 2,//未定义前不能使用 "no-useless-call": 2,//禁止不必要的call和apply "no-void": 2,//禁用void操作符 "no-var": 0,//禁用var，用let和const代替 "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注 "no-with": 2,//禁用with "array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格 "arrow-parens": 0,//箭头函数用小括号括起来 "arrow-spacing": 0,//=>的前/后括号 "accessor-pairs": 0,//在对象中使用getter/setter "block-scoped-var": 0,//块语句中使用var "brace-style": [1, "1tbs"],//大括号风格 "callback-return": 1,//避免多次调用回调什么的 "camelcase": 2,//强制驼峰法命名 "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号 "comma-spacing": 0,//逗号前后的空格 "comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾 "complexity": [0, 11],//循环复杂度 "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的 "consistent-return": 0,//return 后面是否允许省略 "consistent-this": [2, "that"],//this别名 "constructor-super": 0,//非派生类不能调用super，派生类必须调用super "curly": [2, "all"],//必须使用 if(){} 中的{} "default-case": 2,//switch语句最后必须有default "dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾 "dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号 "eol-last": 0,//文件以单一的换行符结束 "eqeqeq": 2,//必须使用全等 "func-names": 0,//函数表达式必须有名字 "func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式 "generator-star-spacing": 0,//生成器函数*的前后空格 "guard-for-in": 0,//for in循环要用if语句过滤 "handle-callback-err": 0,//nodejs 处理错误 "id-length": 0,//变量名长度 "indent": [2, 4],//缩进风格 "init-declarations": 0,//声明时必须赋初值 "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格 "lines-around-comment": 0,//行前/行后备注 "max-depth": [0, 4],//嵌套块深度 "max-len": [0, 80, 4],//字符串最大长度 "max-nested-callbacks": [0, 2],//回调嵌套深度 "max-params": [0, 3],//函数最多只能有3个参数 "max-statements": [0, 10],//函数内最多有几个声明 "new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用 "new-parens": 2,//new时必须加小括号 "newline-after-var": 2,//变量声明后是否需要空一行 "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格 "object-shorthand": 0,//强制对象字面量缩写语法 "one-var": 1,//连续声明 "operator-assignment": [0, "always"],//赋值运算符 += -=什么的 "operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首 "padded-blocks": 0,//块语句内行首行尾是否要空行 "prefer-const": 0,//首选const "prefer-spread": 0,//首选展开运算 "prefer-reflect": 0,//首选Reflect的方法 "quotes": [1, "single"],//引号类型 `` "" '' "quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号 "radix": 2,//parseInt必须指定第二个参数 "id-match": 0,//命名检测 "require-yield": 0,//生成器函数必须有yield "semi": [2, "always"],//语句强制分号结尾 "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格 "sort-vars": 0,//变量声明时排序 "space-after-keywords": [0, "always"],//关键字后面是否要空一格 "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格 "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格 "space-in-parens": [0, "never"],//小括号里面要不要有空格 "space-infix-ops": 0,//中缀操作符周围要不要有空格 "space-return-throw-case": 2,//return throw case后面要不要加空格 "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格 "spaced-comment": 0,//注释风格要不要有空格什么的 "strict": 2,//使用严格模式 "use-isnan": 2,//禁止比较时使用NaN，只能用isNaN() "valid-jsdoc": 0,//jsdoc规则 "valid-typeof": 2,//必须使用合法的typeof的值 "vars-on-top": 2,//var必须放在作用域顶部 "wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格 "wrap-regex": 0,//正则表达式字面量用小括号包起来 "yoda": [2, "never"]//禁止尤达条件 ~~~ ### TypeScript TypeScript can be configured via `tsconfig.json`. See [@vue/cli-plugin-typescript](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript)for more details. ### Unit Testing **Jest** See[@vue/cli-plugin-unit-jest](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest)for more details. **Mocha** (via`mocha-webpack`) See[@vue/cli-plugin-unit-mocha](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha)for more details. ## Plus ### Vue CLI 3多页应用实践和源码设计 [来源](http://www.sohu.com/a/250918168_610492)