What is Vue CLI? Let’s talk about the configuration and use of vue cli

What is Vue CLI? The following article will give you an in-depth introduction to vue cli and talk about the configuration and use of vue cli. I hope it will be helpful to you!

1. Vue CLI

1.1. What is Vue CLI

• If you just write a few Vue Demo programs, then you don't need Vue CLI. (Learning video sharing: vuejs video tutorial)

• If you are developing a large-scale project, then you need and must use Vue CLI

• When using Vue.js to develop large-scale applications, we need to consider things such as code directory structure, project structure and deployment, hot loading, code unit testing, etc.

• If each project has to complete these tasks manually, it will be inefficient, so we usually use some scaffolding tools to help complete these things.

What does CLI mean?

• CLI is Command-Line Interface, translated as command line interface, but commonly known as scaffolding.

• Vue CLI is an officially released vue.js project scaffolding

• Use vue-cli You can quickly build a Vue development environment and corresponding webpack configuration.

##What does scaffolding look like

##1.2. Prerequisites for using Vue CLI - Node

Install NodeJS

You can download and install it directly from the official website.

URL: http://nodejs.cn/download/

Detect the installed version

Automatically by default Installing Node and NPM

The Node environment requires version 8.9 or higher


What is NPM?

The full name of NPM is Node Package Manager

is a NodeJS package management and distribution tool that has become an unofficial standard for publishing Node modules (packages).

In the future, we will often use NPM to install some dependency packages during the development process.

cnpm安装
由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]

1.3. Prerequisites for using Vue CLI - Webpack

Vue.js official scaffolding tool uses webpack template

It will compress all resources and perform optimization operations

It provides a complete set of functions during the development process, which can make our development process efficient.

Global installation of Webpack

npm install webpack -g

1.4.Using Vue CLI

Install Vue scaffolding

npm install -g @vue/cli

Note: The version installed above is the Vue CLI3 version. If you need to initialize the project according to the Vue CLI2 method, you cannot.

Vue CLI2 initialization project

vue init webpack my-project

Vue CLI3 initialization project

vue create my-project

2. Vue CLI2

2.1. Detailed explanation of Vue CLI2

##2.2. Detailed explanation of directory structure

2.3. The difference between Runtime-Compiler and Runtime-only

Brief summary

1. If after During development, if you still use template, you need to select Runtime-Compiler

2. If you use the .vue folder for future development, you can select Runtime-only

2.4.render and template

Runtime-Compiler and Runtime-only

Why is there such a difference?
We need to first understand how the Vue application runs. How the template in Vue is finally rendered into the real DOM.
Let’s look at the picture below

2.5. Vue program running process

2.6.Usage of render function

##2.7.npm run build

2.8.npm run dev

2.9.Modify Configuration: webpack.base.conf.js alias

##3. Vue CLI3

3.1. Understanding Vue CLI3

vue-cli 3 and 2 versions are very different

1.vue-cli 3 is based on webpack 4, vue-cli 2 is still webapck 3

2. The design principle of vue-cli 3 is "0 configuration". Remove the build and config directories under the root directory of the configuration file

3. vue-cli 3 provides the vue ui command, providing Visual configuration is made more user-friendly
4. The static folder is removed, the public folder is added, and index.html is moved to public

3.2. Detailed explanation of directory structure

3.3. Where does the configuration go?

UI configuration

Start the configuration server: vue ui

3.4. Customization Configuration: Alias ​​

[Related video tutorial recommendations:

web front-end

]

The above is the detailed content of What is Vue CLI? Let’s talk about the configuration and use of vue cli. For more information, please follow other related articles on the PHP Chinese website!