Vue CLI scaffolding

introduce

The Vue CLI is a scaffolding for quickly building a VUE project and configuring plug-ins. The core is based on plug-ins and other plug-in architecture

  • Interactive project scaffolding via @vue/ CLI.

  • 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

The 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

System components

The Vue CLI consists of several separate sections, which can be reflected in the source code, which will be studied in a follow-up article

CLI

CLI (@vue/ CLI) is a globally installed NPM package that provides vue commands in terminals. It can quickly build a new project with Vue Create or prototype new ideas directly with Vue Serve. You can also manage all your projects through a graphical interface through the Vue UI

CLI service

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.

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

  • Load core services of other CLI plug-ins.
  • An internal WebPack configuration optimized for most applications;
  • Intra-projectvue-cli-serviceCommand, provideserve,build 和 inspectThe command

CLI plug-in

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

The installation

You can use any of the following commands to install the Vue CLI

npm install -g @vue/cli
//OR
yarn global add @vue/cli
Copy the code

After the installation is complete you can view the version by following the command

vue --version
Copy the code

Create a project

You can create a project from the command line or from the Vue UI. This article only covers the basics of creating a project from the command line. You can create a project by running a command

Vue create Project nameCopy the code

When it runs it will give you a choice

The first two allow you to quickly create a vUE project with the default configuration, but you can also manually install and configure those plug-ins by selecting the third option

Let’s take a look at what happens after selecting the third option, which brings us to a tool selection option

  • Choose Vue Version —– Select the Vue version
  • Babel — — — — — the Babel plug-in
  • TypeScript ——ts
  • Progressive Web App (PWA) Support—–
  • The Router – routing
  • Vuex—– Status management tool
  • CSS pre-processors —— CSS pre-compiled
  • Linter/Formatter ——- Code validation
  • Unit Testing—–
  • E2E Testing—– Black box Testing

After selecting the corresponding option, it will enter the Select VUE version (if you selected this option in your last cup).

According to the figure, there will be a detailed selection function for the previous options

And then we’re going to go to the following screen

Select whether to use class syntax to create component instances

Home = new vue(), class home extends vue {}

Do you use Babel with TypeScript for auto-detected population?

Whether to use history to configure routes

Select the CSS precompile tool. There are two types of SCSS. Dart-sass is used for CSS precompile

Select code validation principles to use

  • ESLint with error Prevention only—- Error alerts only,(recommended if you are not familiar with ESLint)
  • ESLint + Airbnb config—- Loose mode
  • ESLint + Standard config—- Normal mode
  • ESLint + Prettier—— Strict mode
  • TSLint (deprecated)—— TS format validation tool

Note that we chose ESLint, there will be no TS format validation, you can install another plugin for TS format validation, for both JS and TS projects

The next step is to select the checksum time, the first checksum on save and the second checksum on fix and commit

Choose where to save the code, either as a separate file or in package.json

Will the above configuration be used in future projects?

At this point a VUE project is set up

Installing a plug-in

We can use the following command to install the plug-in we need, of course, the plug-in installation should be the official readme

Vue add Specifies the name of the plug-inCopy the code

This command is really a syntactic sugar to parse the plug-in into the full package name @vue/ cli-plugin-plug-in name, then install it from NPM and call its generator.