Detailed explanation of Vue CLI configuration principle

Detailed explanation of the principle of configuring Vue CLI

The veteran skips this passage directly, the novice can take a look, I was also very confused when I was in contact with the freshman

想必能看到这篇文章，大家已经或多或少学习了vue,但你可能不太清楚node,webpack，npm,淘宝镜像,CLI,

Let me give you a brief review:

• If you simply write a few Vue Demo programs, then you don’t need Vue CLI. When we simply wrote some examples of Vue before, we usually introduced Vue according to the official document mode, but in In actual company projects, it is impossible to adopt such a simple and clumsy way, we will passwebpack
• If we really want to use a three-piece set of pure html, css, and js to write a project, you can imagine how many JS files are referenced to each other, even if you can distinguish them and maintain them later, it is also not conducive to others to learn your code. Here we are going to contact modular development webpack

webpack是一个现代的JavaScript应用的静态模块打包工具

• In order for webpack to run normally, it must rely on the node environment. In order for the node environment to execute a lot of code normally, it must contain various dependent packages, and this kind of package can be managed and used with the npm tool (node ​​package manager).俗称webpack为打包工具
• We usually use webpack to configure the project, webpack-loader introduces various files, or builds a local server, all kinds of things, if our company writes a project every time we have to perform various complicated configurations, the efficiency is simply too low, especially The code configured by yourself is not standardized enough, the version is prone to errors and various problems, which is very undesirable, which is created by many large companiesCLI,他们利用webpack等进行了绝大多数的配置供与其他人直接来使用

The CLI service is built on webpack and webpack-dev-server . It contains:

• Load the core services of other CLI plug-ins;
• An internal webpack configuration optimized for most applications;
• Internal project vue-cli-servicecommand, provide serve, buildand inspectcommand.

We can save dozens of times the configuration time before using the simple operation of CLI

Into the title

Node.js

前提是需要安装node.js

Recommended articles for node.js installation:

Node.js installation

如果我们事先安装好了，不妨检查一下node版本,这里建议node版本最好高一点

Check the npm version

、
、
、

webpack

同样webpack也是使用cli的前提

At its core , webpack is a static module bundler for modern JavaScript applications

从本质来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

Webpack is installed globally:

cnpm install webpack -g
cnpm is a domestic Taobao mirror, if not, just use npm

cnpm install [email protected] -g(我安装的指定版本)

Then we check the version of our computer

、
、
、

CLI

The preparations are complete, let's install cli globally now:

There are very few people using scaffolding 2 now, we directly install version 3 and above

cnpm install -g @vue/cli

下面这个命令可以让我们在cli3的基础上使用cli2

cnpm install @vue/cli -init -g

Check version

·
·
·
·

After the installation is complete, we initialize the project

Vue CLI2 initialization project

vue init webpack project01

I won’t go into details here and just put the picture

·
·
·

Vue CLI3 initialization project

vue create project01

①：

Defult是默认，我们选择第三个手动配置

②：

空格进行选择和取消我们所需的配置,需要什么就选什么就好了，刚接触的话默认的就好

③：

我们选择 vue3

④：

他问我们是否需要将ESLint等配置单独放在一个json文件，而不是package.json中

We choose to 第一个configure into a separate file

⑤：

还记得我上面自己的配置吗，这里就是这个意思，我们可以自己手动配置然后保存起来

We choose No

⑥：

cd project02

cnpm run serve

Open the web page with the default port 8080

You're done