Vue CLI

Vue CLI is a complete system for rapid development based on vue.js.

Vue – cli tool is designed to allow developers to out-of-the-box application development and the development of fast, it is adhering to the “agreed than configuration” thought, can simply be “no configuration is not configured, you’re in my way, don’t go to debate this is good, rapid business development is serious business. They don’t recommend it, but they don’t stop you from doing it. In addition, Webpack is not very friendly to beginners, and the ‘long and smelly’ configuration makes it difficult for average developers to write well-defined, performance-optimized configurations. Otherwise, cli tools like Parcel and create-react-app wouldn’t have popped up. All of these tools claim zero configuration and are designed to make code development fun.

Vue CLI provides:

· Interactive project scaffolding via @vue/ CLI will be updated iteratively with this release (community is better).

· Zero-configuration prototype development through @vue/ CLI + @vue/ CLI-service-global.

· A runtime dependency (@vue/ CLI-service) that:

  • Can upgrade
  • Built on WebPack with reasonable default configuration;
  • It can be configured through the configuration file in the project;
  • Extensions can be made through plug-ins.

· A rich collection of official plug-ins that integrate the best tools in the front-end ecosystem.

· A fully graphical user interface for creating and managing vue.js projects.

· Vue CLI is dedicated to standardizing the tool base in the Vue ecosystem. It ensures that the various build tools work smoothly based on smart defaults, so you can focus on writing your app instead of spending days obsessing over configuration. At the same time, it gives each tool the flexibility to adjust the configuration without eject.

· Local test server (VUE-CLI provides a set of local Node test server, which can be started by using vue-CLI commands), integrated package on-line solution, and some advantages, including modularization, translation, pre-processing, hot loading, static detection and automatic testing, etc.

The difference between:

  1. NPM package name changed. Vue -cli is vue scaffolding for 2.x version, @vue/ CLI is vue scaffolding for 3.x version.
  2. Vue 2 Create a project vue init Webpack. Vue 3 Create the project vue create. CLI 2 has the option of initializing projects from templates, while CLI 3 does not redevelop using templates. If developers want to initialize projects using templates like CLI 2, they can globally install a bridge tool @vue/ CLI-init. CLI 3 also cannot be named with a hump and supports vue UI creation using a graphical interface.
  3. Start project changed from NPM Run Dev (2) to NPM Run Serve (3).
  4. Generated vUE project directory name, directory structure changes.

  • Vue 3 has removed the config file directory and the build folder. CLI 3 also hides the Webpack configuration file. To customize the configuration, you need to create the vue.config.js file. At the same time, vue.config.js supports the webpack-chain writing method, which can be more convenient.

  • Vue 3 Removed the static resource folder and added the public folder. The static resource folder is moved to the public directory. The /xx.xx directory can be accessed directly, and the index. HTML folder is moved to the public directory.

  • Vue 3 added the Views folder to the SRC folder for sorting view components and public components.

  • The Node-Model folder is automatically downloaded when the vue 3 project is installed

  1. In the vue-CLI generated project, the webPack configuration is also included in the project configuration file. In projects generated by @vue/ CLI, it hides the webpack configuration for the project, and it throws a configuration file for the developer to customize. The advantage of @vue/ CLI is that if some of the configurations in the scaffolding are updated by the authorities, the developers will not be so troublesome to update, and the authorities also want developers to customize their own needs through configuration files if necessary, using webpack Merge.

For details, see cn.vuejs.org

Advantages of @vue/ CLI:

Vue-cli 2.x is more like a template copier, where all webpack configuration and build commands are coupled to a specific project, and package.json contains a bunch of development dependencies. While @vue/cli is a build CLI, it has the advantage of being ready to use out of the box.

  • Example Remove the CLI service layer

    The CLI service (@vue/ CLI-service) is a development environment dependency. It is an NPM package that is installed locally in each @vue/ CLI created project. With vue-cli-service separated, project build updates are just a command matter, unless a lot of specialization is done. Specialized operations should be encapsulated in vue-CLI plug-ins.

    · CLI services are built on top of Webpack and WebPack-dev-server. It contains:

    • Load core services of other CLI plug-ins. CLI: global vue commands used for project creation and management, including vue create and Vue UI, which provide quick project creation and function selectionvueCommand line tool command. CLI commands do less work, so they are not updated as often (and developers rarely update them).
    • Service layer: Responsible for the actual build of the project, that is, the WebPack project build. This section is frequently updated and is generally used as a local dependency on the project. The WebPack configuration is a no-care and no-maintenance area for the business developer of a project. An internal WebPack configuration optimized for most applications; Vue-cli-service inside the project provides serve, build, and inspect commands.

  • The plugin:

    CLI plug-ins are NPM packages that provide optional functionality to your Vue project, such as Babel/TypeScript translation, ESLint integration, unit testing, and end-to-end testing. The name of the Vue CLI plug-in starts with @vue/cli-plugin- (built-in plug-in) or vue-cli-plugin- (community plug-in) and is very easy to use. When you run vue-cli-service inside your project, it automatically parses and loads all the CLI plug-ins listed in package.json.

    Vue-cli’s plugin mechanism is flexible, and vue-CLI is far too benevolent compared to create-react-app. Webpack can be fully customized using webpack-chain and Webpack-Merge. If you want to do deep vue-CLI customization, it is not recommended to write it directly in vue.config.js, but to encapsulate it in a plug-in, maintain it independently, and then rely on it for your project. This simplifies the cost and complexity of the upgrade.

  • GUI interface: Although most people think it is not useful, because it does improve development efficiency and actually improve the effect. Just comfortable and intuitive, that’s all.

  • Rapid prototyping: VuE-CLI3 supports running a VUE file directly. Turn on the speed boost. The optimization here has multi-core build and cache enabled by default.

  • Modern mode: advanced code for advanced browsers (after ES6), while compatible with older browsers, advanced code in both file size and script parsing efficiency has been improved. Modern mode can provide a modern browser only version, and a back version of the old browser, can be executed with vue-cli-service build –modern, enable this mode will automatically build two versions of the JS package, for the native ES2015+ package supporting modern browsers. And for other older browsers, the generated HTML will pass

  • Build Configuration: Internally integrate common plug-ins and Babel transformations required for VUE development builds, presenting a best practice. In this way, most projects no longer need to care about the build configuration, so that the unified and stupid build speed is greatly accelerated. There is also TypeScript PWA support built in support for optional vue create commands, NPM Run Lint fixes the style of code provided by ESlint in conjunction with Prettier, which can be changed in.eslinttec.js

The construction of the vue – cli2

Vue scaffolding currently comes in 2,3, and 4 versions. To build any version of scaffolding, you first need to install Node.

After the node is successfully installed, check whether the scaffold has been installed before vue-cli by typing the command vue -v or vue –version.

Install webpack and scaffolding globally:

Continue typing the following command in the window:

1.npm install webpack -g

2.npm install -g vue-cli

You can also install the specified version of scaffolding by executing the following command line:

NPM install -g vue -cli@version if you want to install scaffolding of a version less than 3

For scaffolding 3 or later, run NPM install -g@vue /cli @version

@ vue/cli3 building

1. Install Node by downloading it from the Node website.

2. Run NPM install -g@vue /cli and NPM install webpack -g

3. Vue create project // project is the project name

4. Step 3 Press Enter and let us select template:

Insert a picture description here

Default (Babel, eslint): The default configuration, only Babel and eslint, the rest must be configured separately

Manually select features: manual configuration

Here we choose Manually, which is to say Manually this

Advantages of using @vue/ CLI:

  • Vue-cli 3 is built based on Webpack 4, with faster startup packaging speed, vue-CLI 2 or Webapck 3.
  • The project structure is simpler, with fewer files and a clearer structure.
    • The config file directory and build folder are removed. If you need to customize the configuration, you need to create the vue.config.js file
    • Static resources are moved to the public directory. You can use /xx.xx to access static resources, and move index.html to public
    • New.browserslistrc file, which specifies the scope of the target browser for the project, is used to determine which JavaScript features need to be translated and which CSS browser prefixes need to be added, which can be understood as browser compatibility.
    • Add babel.config.js to replace.babelrc with the same function
  • With vue Create, options are simplified and the startup project is changed from NPM run dev to NPM run serve
  • @vue/ CLI follows the tooling best practices and sets these best practices as the default configuration of Vue apps for the Webpack configuration
  • ES2017 and Babel 7 support out of the box
  • Excellent CSS support, including SCSS and PostCSS support
  • Many integration options (TypeScript, PWA, Web Components, point-to-point testing, Jest, etc.)
  • Vue UI command is provided to install and manage plug-ins using GUI through visual interface (of course, plug-ins can also be added by vue add Plugin). For example, when using iView as required, you can directly install vuE-CLI-plugin-iView in visual interface. Can be implemented on demand import
  • In 2.x, observers are created for data from the start, regardless of its size. When the data is large, this can cause significant performance pressure when the page loads. The 3.x version will only create observers for “data that was used to render the initial visible portion”, and 3.x observers are more efficient
  • 3.0 adds TypeScript and PWA support

Advantage:

  1. Remove the CLI service layer for easy maintenance.

The Vue CLI consists of cli and Service layer. Cli is mainly responsible for user project creation and management. Cli commands are not updated frequently, but the Service layer is responsible for the actual construction of the project, including maintaining the configuration of the entire Webpack, which is updated frequently.

Prior to @vue/ CLI, all webPack configurations were coupled to specific projects, and package.json included a whole bunch of development dependencies, which made upgrading webPack dependencies cumbersome and potentially incompatible. After using @vue/ CLI, it is equivalent to handing over the configuration and upgrade of Webpack to the Vue CLI team. Let professional people do professional things and get better use experience with the minimum cost.

A runtime dependency (@vue/cli-service) that:

  • Can upgrade
  • Built on WebPack and with reasonable default configuration
  • This can be done through a configuration file within the project
  • Extensions can be made through plug-ins
  1. Plug-in, passwebpack-chainandwebpack-mergeWebpack can be fully customized. A rich collection of official plug-ins that integrate the best tools in the front-end ecosystem.
  2. GUI interface, by starting @vue-CLI GUI, project dependency is clear and can be directly installed in the interface dependency, a completely graphical user interface system for creating and managing vue.js projects.
  3. Rapid prototyping, @vue/ CLI also supports a vUE file directly run, convenient rapid prototyping, zero configuration prototype development can quickly validate ideas.@vue/cli + @vue/cli-service-globalImplementation of zero configuration prototype development
  4. Modern mode: advanced code for advanced browsers (after ES6), while compatible with older browsers, advanced code from the file size and script parsing efficiency, running efficiency are higher.
  5. Js Development: Follow up official best practices and cutting edge technologies

Monitoring mechanism

3.0 will bring a proxy-based observer implementation that provides the full range of responsiveness of overlay languages (JavaScript), eliminating some of the limitations currently in the Vue 2 series with object.defineProperty. These limitations include:

Monitoring the addition and deletion of attributes; Subscription-based modification of arrays, monitoring of.length modification; Support for Map, Set, WeakMap and WeakSet

The compiler

Vue 3.0 will see a big improvement in compiler-related code compilation, summed up in one sentence: “tree-shaking” output; More AOT optimizations; Better parsing errors; Source Map is supported.

If you are using a tree-shaker packer, the optional features used in the template are imported in the generated code through the module syntax of ES. Optional features that are not used are “shaken out” in the packaged file. As a result of the improvements brought about by the new virtual DOM implementation, we can perform some more efficient compilation time optimization, such as static tree lifting and static properties lifting as of July 1, 1997; As well as providing some hints from the compiler to the runtime to avoid the Children normalization process of child components; Provides VNode quick path creation and so on. The parser is rewritten so that if an error occurs while compiling the template, it can provide information about where the error occurred. Source map support for templates is also available; Third party tools such as ESlint-plugin-Vue and IDE language services are also supported.

11 compatible with IE

The new codebase is currently only for major browsers, and we assume they all support ES2015. But, alas, we also know that many users will still need to support IE11 for the foreseeable future. With the exception of Proxy, most of the ES2015 features can be used in IE11 in the form of translation or shippers. Our plan is to implement a separate alternative Observer with the same API, but based on the old Object.defineProperty API; It is then released by building a separate version of Vue 3.x that uses this implementation, but this separate version still has the same change detection problems as Vue 2.x, so it is not really a fully compatible version of 3.x. We also realize that this will cause some inconvenience to third-party library authors who need to consider compatibility issues between two different versions, but when we do get to that stage, we will definitely make sure we provide clear guidance.