Vue CLI 3.0 is completely different from the other versions and has undergone refactoring to:

  1. Minimize the configuration headaches of modern front-end tools, especially when developers mix tools together;

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

The core goal of Vue CLI is to provide build Settings for pre-configuration based on WebPack 4. The goal is to minimize the number of developer configurations, so Vue CLI 3 supports out-of-the-box projects with the following features:

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

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

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

  • 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 (details below)

In addition, you can mix and choose multiple integrations when creating new projects:

  • TypeScript

  • PWA

  • Vue Router & Vuex

  • ESLint / TSLint / Prettier

  • Unit testing with Jest or Mocha

  • Test E2E with Cypress or Nightwatch

Furthermore, the Vue CLI ensures that all of the above functions work well together.

All of the features listed above support zero configuration: When building a project with Vue CLI 3, it installs the Vue CLI runtime service (@vue/CLI-service), selects the feature plug-in, and generates the necessary configuration files. That said, you just need to focus on your code.

CLI tools that remove potential dependencies often lose the ability to fine-tune those dependencies, so users often have to “eject” them in order to make changes. The downside of this is that once it pops up, you won’t be able to upgrade to the latest version of the tool in the long run.

You thought it was important to access configs in low-level form, but he didn’t want to abandon users who “eject,” so he figured out a way to configure without eject.

For third-party integrations such as Babel, TypeScript, and PostCSS, the 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 precisely locate and adjust existing loaders and plug-ins.

In addition, the Vue CLI comes with the Vue inspect command to help you check the internal Webpack configuration. The best part is that with minor tweaks and no eject, you can still upgrade CLI services and plug-ins for fixes or updates.

The Vue CLI 3 plug-in system is very 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 use the Plugin API The function of plug-in (https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js).

Also, Vue CLI 3 no longer has “template”; instead, you can now set up your plug-ins and options remotely and share them with other developers.

Thanks to Guillaume CHAU (the core team behind Vue.js), Vue CLI 3 also comes with a full GUI that allows you to not only create new projects, but also manage plug-ins and tasks within projects, such as:

It doesn’t need Electron, just start it with vue UI.

Note: While Vue CLI 3 is in stable release, the UI is still in beta and will continue to be updated.

Sometimes we need instant access to the work environment for new ideas, and waiting for NPM install becomes a hassle. Using the Vue serve command in Vue CLI 3, you only need to enable the Vue single file component to prototype:

With Babel, you can use all the latest language features in ES2015 +, but this also means that we need to translate and polyfill bundles to support older browsers. These transformed packages are generally more verbose and slower to parse and run than the original native ES2015 + code. Given that most modern browsers today support native ES2015 + code, it must also support older code, but it is a waste for browsers to run such inefficient code.

“Modern Mode” can help you solve this problem. At build time, use the following command:

vue-cli-service build --modernCopy the code

The Vue CLI will generate two versions of the application: a modern package for a modern browser that supports the ES module, and an older package for an older browser that does not support the ES module.

The generated HTML file automatically by Phillip Walton (https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) post the techniques discussed:

  • <script type=”module”> can load modern packages in browsers that support it, and can also be preloaded with < link rel=” modulePreload “>;

  • Older packages can be loaded using <script nomodule>. Browsers that support ES modules ignore the package automatically.

  • <script nomodule> fixes are automatically injected in Safari 10.

For Hello World applications, modern packages have shrunk by 16%. In practice, modern software packages often significantly speed up parsing and evaluation, thus improving application load performance.

Yu Creek also said:

The reason we didn’t make Modern Mode the default is that if you use CORS/CSP, you need a longer build time and some extra configuration.

You can now build any *. Vue component into a Web component in a Vue CLI 3 project:

vue-cli-service build --target wc --name my-element src/MyComponent.vueCopy the code

This will generate a JavaScript package that wraps the internal Vue component and registers it as a native custom element on the page, which can then be thought of as < my-Element >.

You can even put multiple *. Vue components into a package with multiple pieces of code split:

vue-cli-service build --target wc-async 'src/components/*.vue'Copy the code

Included in the generated package is a small entry file that registers all components as native custom elements, but the code for the underlying Vue component is not available until the corresponding custom element is instantiated on the page for the first time.

With Vue CLI 3, you can also use the same code base to build applications, UMD libraries, or native Web components.

Finally, Vue CLI 3 is now available as a standard build tool for Vue applications, but this is just the beginning, yu said. 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.

Documentation: https://cli.vuejs.org/guide/installation.html

Original link: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb