Recommended course: vue tutorial
Evan You, the author of Vue, announced the official release of Vue CLI 3.0 on Medium, which will also bring long-awaited new functions to many developers.
Rich built-in functions
Evan You said that Vue CLI 3.0 is completely different from other versions, and it has been rebuilt to:
1, try to reduce the trouble of modern front-end tools in configuration, especially when developers use a variety of tools;
2. Add best practices into the tool chain as much as possible, and make it the default practice of Vue application.
The core goal of Vue CLI is to provide settings for a pre-configured build based on webpack 4, and the goal is to minimize the number of times developers configure it, so Vue CLI 3 supports off-the-shelf projects with the following characteristics:
(1) Pre-configured webpack functions, such as module hot replacement, code splitting, tree jitter, efficient persistent caching, etc.
(2)es 20 17 is transformed by Babel 7+preset-env(Babel plug-in), and polyfill is injected according to the usage.
(3) Support PostCSS (autoprefixer is enabled by default) and all major CSS preprocessors.
(4) Modern mode: release native ES20 17 +bundle and traditional bundle in parallel (details are as follows).
(5) Multi-page mode: build an application with multiple HTML/JS entry points.
(6) construction goal: build Vue single file components into libraries or native Web components (as follows)
In addition, when creating a new project, you can mix and choose various integrations:
Typed document
AIDS patient
Vue router and accessories. Vuex
ESLint/TSLint/more beautiful
Unit testing with Jest or Mocha
E2E test with Cypress or Night Watch.
And Vue CLI can ensure that all the above functions can be used well together.
Can be configured without popping up.
The functions listed above all support zero configuration: when building a project with Vue CLI 3, the Vue CLI runtime service (@ vue/cli-service) will be installed, the function plug-in will be selected, and the necessary configuration files will be generated. In other words, you just need to focus on your code.
CLI tools usually lose the ability to fine-tune potential dependencies when deleting them, so users usually have to "exit" to make changes. The disadvantage of this is that once it pops up, in the long run, you will not be able to upgrade to the latest version of the tool.
Evan You thought it was very important to access the configuration in a low-level way, but he didn't want to abandon those "pop-up" users, so he found a configuration method without pop-up.
For third-party integration, such as Babel, TypeScript and PostCSS, Vue CLI respects the configuration files of these tools. Webpack users can use webpack-merge to merge simple objects into the final configuration, or use webpack-chain to accurately locate and adjust existing loaders and plug-ins.
In addition, Vue CLI comes with the vue inspect command to help you check the internal Webpack configuration. The biggest advantage is that you can still upgrade CLI services and plug-ins, which can be repaired or updated with a little adjustment without popping up.
Extensible plug-in system
The plug-in system of Vue CLI 3 is very powerful: it can inject dependencies and files in the application construction stage, adjust the application's webpack configuration, or inject other commands into CLI services during the development process. Most built-in integrations like TypeScript use plugin API to implement plug-in functions.
Moreover, there is no "template" for Vue CLI 3. Instead, you can now set it up remotely and share your plug-ins and options with other developers.
Graphical user interface (GUI)
Thanks to the outstanding performance of Guillaume Chau (the core team of Vue.js), Vue CLI 3 also comes with a complete GUI, which can not only create new projects, but also manage plug-ins and tasks in projects, such as:
It doesn't need electronics, just start it with vue ui.
Note: Although Vue CLI 3 is in a stable version, the UI is still in the testing stage and will be constantly updated.
Instant prototyping
Sometimes we need to visit the working environment immediately to get new inspiration, and waiting for npm installation becomes a troublesome thing. With the Vue serve command of Vue CLI 3, you only need to enable the Vue single file component to perform the prototype design:
More function
Modern mode
With Babel, you can use all the latest language features in ES20 15+, but it also means that we need translation and multifill bundling to support the old browsers. These converted packages are usually more verbose and slower to parse and run than the original local es 20 15+ code. Since most modern browsers now support native es 20 15+ code, it certainly supports older code, but it is a waste for browsers to run such inefficient code.
Using "modern mode" can help you solve this problem. At build time, use the following command:
Vue-CLI-Service Build-Modern Vue CLI will generate two versions of the application: one is the Modern software package of the modern browser that supports es module, and the other is the old software package of the old browser that does not support ES module.
The generated HTML file automatically adopts the technology discussed in Phillip Walton's post:
& ltscript type="module "> Modern software packages can be loaded in browsers that support it; You can also use
You can use
Patches for the< script module & gt will be automatically injected into Safari 10.
For Hello World applications, modern software packages are reduced by 16%. In practical application, modern software packages usually significantly speed up the parsing and evaluation, thus improving the loading performance of applications.
Note: The reason why the modern mode is not set as the default is that if CORS/CSP is used, it will take longer to build and some extra configuration.
Building Web components
Now, you can build any *. Vue component to Web component in Vue CLI 3 project:
Vue-CLI-Service Build-Target WC-Name My-Element src/MyComponent. Vue will generate a JavaScript package, encapsulate the internal Vue components, register them as native custom elements on the page, and then treat them as artificial.
You can even build multiple *. Packaging vue components into packages with multiple code partitions:
Vue-CLI- service construction-target WC-async' src/components/*.' Vue' contains a small entry file in the generated package, registering all components as native custom elements, but only when the corresponding custom elements are instantiated for the first time on the page can the code of the underlying Vue components be obtained.
With Vue CLI 3, you can also use the same code base to build applications, UMD libraries or local Web components.
Finally, Evan You said that Vue CLI 3 can now be used as a standard building tool for Vue applications, but this is only the beginning. As mentioned above, the long-term goal of Vue CLI is to integrate current and future best practices into the tool chain and ultimately provide users with high-performance applications.