Vue CLI Introduction

1. What is Vue CLI?

Vue CLI is a complete system for rapid development based on Vue. Js. 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 its configuration.

• CLI is a Command Line Interface, commonly known as scaffolding
• It is a fast and cumbersome scaffolding for single-page applications, makes it easy to create new applications, and can be used to automatically generate vue and Webpack project templates.
• If we are developing large projects, we will definitely need to use the Vue CLI
• Vue CLI provides us with a clear code directory structure, project structure, deployment, hot loading, unit testing and other functions. It can improve the productivity of developers.

2. Vue CLI dependent environment

• Rely on NodeJS and NPM:

  • Install nodeJS. NPM is installed by default, and nodeJS is usually at least 8.9.
  • NPM stands for Node Package Manager. Node package management and distribution tool
  • Domestic NPM is sometimes slow, you can install CPNM image, this is a Taobao NPM image.

  Use taobao custom CNPM command line tools to replace the default tool of NPM NPM install - g CNPM - registry=https://registry.npm.taobao.orgCopy the code

  This allows you to install modules using CNPM

  Use taobao custom CNPM command line tools to replace the default tool of NPM NPM install - g CNPM - registry=https://registry.npm.taobao.orgCopy the code

• Rely on webpack

  • Vue. Js official scaffolding tool uses webpack template to compress and optimize all resources, providing a complete set of functions in the development process to improve development efficiency
  • Global installation of Webpack

  npm install webpack -g
  Copy the code

  • For more information about Webpack, see —-vue’s WebPack packaging principles and usage

Vue CLI scaffolding installation

Step 1: Install NodeJs

Download nodejs from nodejs.org/en/

Then unzip the installation to see the nodeJS version

node -v
Copy the code

Step 2: Install the global WebPack

Webpack has a global installation and a local installation. Global installation is common to all services. A partial installation is a separate installation of a version of WebPack for a project. The global WebPaack and local Webpack versions can be different

npm install webpack -g
Copy the code

Step 3: Install the local Webpack

Install webpack NPM install webpack –save-dev

Step 4: Install Vue Cli scaffolding

Here we need to name the problem with the Vue CLI version. Vue CLI currently has versions 2, 3 and 4. What’s the difference between them? The differences between VUe2 and VUe3 are significant, while the differences between VUe3 and VUe4 are minor. Here are the differences

1. Differences between VUe2, vue3 and VUe4

• Install, uninstall

vue-cli2

Global installation: NPM install -g vue-cli or CNPM install -g vue-cli Uninstallation: NPM uninstall -g vue-cli or CNPM uninstall -g vue-cliCopy the code

Vue cli3 and vue cli4

Global installation: NPM install -g@vue/cli@version or CNPM install -g@vue/cli@version uninstall: NPM uninstall-g@vue/CLI@version number or CNPM uninstall-g@vue/cli@version numberCopy the code

You can specify a version number using @. If you do not specify a version number, the default download is version 4

• Project creation

Vue – cli2:

vue init webpack demo
Copy the code

Vue cli3 and vue cli4

vue create demo 
Copy the code

• The project structure

vue-cli2:

Vue cli3 and vue cli4:

• Project start

vue-cli2:

npm run dev
Copy the code

Vue cli3 and vue cli4

npm run serve
Copy the code

These are macro performance differences, which we’ll talk about later at the code level

Because vue2,3, and 4 are now used, we all learn when we learn.

2 Install VUE scaffolding

Vue-cli official website: cli.vuejs.org/, run the following installation commands:

npm install -g @vue/cli
Copy the code

View the installed version

Vue -v or vue --versionCopy the code

B) Install the old version of VUE

With older versions of vue Init, you can install a bridge tool globally

npm install -g @vue/cli-init
Copy the code

Then, in execution

Iii. Vue CLI scaffolding construction project

When we install, we install vue4, but our project may be an older version of the project. Or we want to create an older version of the project. We can install a vUE bridge tool.

1. Build a VUE2 project.

Next, we want to create a vue2 project, first: install vue’s bridge tool.

npm install -g @vue/cli-init
Copy the code

You are now ready to create a project for VUe2.

Next, create the project

vue init webpack my-project
Copy the code

The first time you create a project, you download the Component. The download process is slow, so we can download cli-Component offline.

2. Install vue-CLI offline

An error occurs when a VUE project is created using the vue-CLI command vue init webpack vuedemo, indicating that the connection times out. Procedure

Vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443Copy the code

There are two solutions

A. Install a Taobao image using CNPM. B. Download the offline component package and install it offlineCopy the code

Here’s a focus on the second option:

Step 1: Download vuE-CLI Component from Github

https://github.com/vuejs-templates/webpack
Copy the code

If github is slow to open, try github Accelerator

https://toolwa.com/github/
Copy the code

Step 2: The downloaded compressed package is webpack-version. Zip, we need to change the directory name webpack after decompressing

Then create a folder in the user directory:.vue-templates. Note the dot (.) before ve-templates. When we run the vue init webpack vuedemo command again, we need to take the parameter –offline to indicate the offline initialization

vue init webpack vuecli2 --offline
Copy the code

You will then be prompted with a number of options to choose as needed.

Step 3: Then run the command to start the project.

npm run dev
Copy the code

Look at the following page and you’re done

Iv. Vue scaffolding installation meaning and project structure

1. The meaning of vUE scaffold installation

When we install vue-CLI scaffolding, we have a lot of options, so how should we choose these options? If we knew what they meant, we would know how to choose. What does each of these mean

1. Project name: Enter the name of the Project

2. Project description

3. Author: Name, email address. Here are the git usernames and mailboxes from our global Settings

4. Vue build There are two ways to build, as follows:

• Runtime + Compiler: This is recommended for most users
• This is lighter than the Runtime +compiler approach, but only allows templates to be used in.vue-ending files

At first glance, it seems that we should choose Runtime + Compiler for the development environment and run-time only is more appropriate for the production environment. So how exactly? Let’s verify it later:

The system failed to compile because there was an extra comma at the end of the template line

5. Install Vue-router: Indicates whether vue-router is installed

I chose no here, because I didn’t use it at first, but when I did, I added it

6. Use ESLint to Lint your code: Whether to Use the ESLint specification for your code

This means that if we use the ES specification for our code, we will get an error at compile time if it does not conform to the specification. You can choose it, you can choose not to use it, you can choose not to use it at the beginning. Use and not use effects: An error is reported when there is something non-standard in the code. For example, at the end of the line;

Manually turn ESlint on | off

Modify the index.js general configuration file and modify the useEslint parameter to control whether to enable Eslint code validation

useEslint: true,
Copy the code

7. Pick on ESLint: Preset to use the ESLint standard

This is the standard for formatting code. There are three options, and we usually choose Standard

8. Set up unit tests: Whether to use unit tests

We don’t need unit tests to start with, so choose No

Setup e2E Tests with Nightwatch: Setup e2E tests with Nightwatch

We didn’t need it at first, so we set it to no

10. Should we run npm installFor you: Command to use. There are three options

Usually we choose the first NPM

---