Vue JavaScript CLI tool gets a rewrite
Vue CLI, which provides a standard build tool chain for applications built with the Vue JavaScript framework, has been rewritten in its Version 3.0 release, which debuted on August 10.
Called a “completely different beast” from its predecessor by Vue.js creator Evan You, Vue CLI 3.0 is intended to reduce configuration “fatigue” of front-end tools. Incorporating best practices in the tool chain was a goal as well.
Vue CLI 3 provides Vue CLI projects out-of-the-box support for the following:
- Preconfigured webpack capabilities, including hot module replacement, code-splitting, and efficient long-term caching.
- ECMAScript 2017 transpilation and usage-based polyfills injection, which is done via the Babel 7 JavaScript compiler and the preset+env preset capability.
- Support for the PostCSS tool and major CSS preprocessors.
- Auto-generated HTML with hashed asset links and preload/prefetch resource hints.
Vue CLI 3.0 integrates with technologies such as TypeScript, the ESLint linting utility, and Mocha unit testing.
For prototyping, developers can use the vue serve command for prototyping with single-file components. To build a web component, use the command vue-cli-service build --target wc --name my-elementsrc/MyComponent.vue.
The Modern Mode in Vue CLI will produce app versions for modern browsers that support ECMAScript modules and another targeting old browsers that do not support these modules. Use this command vue-cli-service build --modern for Modern Mode.
Vue CLI 3 was designed with a plugin architecture. Plugins can inject dependencies and files during an application’s scaffolding, tweak a webpack configuration, or inject additional commands to the CLI service. Most built-in integrations are implemented as plugins via a plugin API; TypeScript is one such integration.
Also in Vue CLI 3, developers can set a remote preset to share a selection of plugins. Vue CLI 3 also has a UI for creating new projects and managing plugins and tasks. The UI has a webpack dashboard.