Vue CLI 3.0 has been released and has undergone a refactoring to:

  1. Reduce the configuration hassles of modern front-end tools, especially when mixing multiple tools together;

  2. Wherever possible, include best practices in the toolchain and make them the default practice for any Vue application.

Vue CLI is a standardized build tool (chain) for Vue applications. At its core, it provides pre-configured build Settings based on WebPack 4 builds, with the goal of minimizing the configuration process developers have to go through. Therefore, Vue CLI 3 supports projects that have the following features out of the box:

  • Pre-configured Webpack features such as module hot replacement, code splitting, tree-shaking, efficient persistent caching, error coverage, etc.

  • ES2017 is transformed and polyfilled based on usage via Babel 7 + Preset -env

  • PostCSS (autoprefixer enabled by default) and all major CSS preprocessors are supported

  • Auto-generated HTML with hashed asset link and hints for preloading/prefetching resources

  • Pattern and cascade environment variables through.env files

  • Modern mode: Publish native ES2017 + bundles and traditional bundles in parallel

  • Multi-page pattern: Build an application with multiple HTML/JS entry points

  • Build goal: Build Vue single-file components into libraries or native Web components

In addition, you can mix a number of optional sets when creating new projects, including:

  • TypeScript

  • PWA

  • Vue Router & Vuex

  • ESLint / TSLint / Prettier

  • Unit testing with Jest or Mocha

  • Test E2E with Cypress or Nightwatch



Most importantly, the Vue CLI ensures that all of the above functions work well together without having to connect yourself.

It can be configured without Eject

All of the features listed above can be configured with zero: When a project is built through Vue CLI 3, it installs the Vue CLI runtime service (@vue/CLI-service), selects feature plug-ins, and generates the necessary configuration files. In most cases, you just need to focus on writing code.

However, CLI tools that try to abstract away the underlying dependencies often strip away the ability to fine-tune the internal configuration of those dependencies – in order to make such changes, users often have to “eject” the original configuration into the project in order to make changes. The downside of this is that once Eject, you won’t be able to upgrade to the latest version of the tool in the long run.

The development team acknowledged the importance of having lower-level access to the configuration, but did not want to abandon the eject users, so found a way to tweak the configuration without eject.

For third-party integrations such as Babel, TypeScript, and PostCSS, the Vue CLI respects the configuration files of these tools. For Webpack, users can use Webpack-Merge to merge simple objects into the final configuration, or use webpack-chain to precisely locate and adjust existing loaders and plug-ins. In addition, the Vue CLI comes with the Vue inspect command to help examine the internal Webpack configuration. The biggest benefit is that you don’t need to eject for minor tweaks – you can still upgrade CLI services and plug-ins to receive fixes and new functionality updates.



Extensible plug-in system

The plug-in system for Vue CLI 3 is powerful: it can inject dependencies and files at the scaffolding stage of your application and tweak your application’s Webpack configuration or inject other commands into the CLI Service during development. Most built-in integrations like TypeScript implement plug-in functionality using the same plug-in API, all of which are available to all community plug-ins. If you are interested in writing your own plug-in, check out the plug-in development guide.

In Vue CLI 3, you no longer have “templates” – instead, you can create your own remote Settings and share your chosen plug-ins and options with other developers.

Graphical User Interface (GUI)

Vue CLI 3 comes with a full GUI for not only creating new projects, but also managing plug-ins and tasks within projects. It even comes with a fancy Webpack dashboard like the following:



Instant Prototyping

Waiting for NPM install before writing code is not fun. Sometimes we just need an instant visit to the work environment to get that spark of inspiration. Using the Vue serve command in Vue CLI 3, you only need to enable the Vue single file component to prototype.



The prototype development server has the same setup as the standard application, so you can easily move the prototype *.vue file to the SRC folder of the correct scaffolding project to continue working on it.

More details on the updates are available in the release notes.

Get started ：cli.vuejs.org/zh/guide/

Source code download:

  • Source code (zip)

  • Source code (tar.gz)