[[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 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 [options] Options: -V, --version output the version number -h, --help output usage information Commands: create [options] create a new project powered by vue-cli-service add [options] [pluginOptions] install a plugin and invoke its generator in an already created project invoke [options] [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]