**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)