配置Vue CLI原理详解

老手直接跳过这段话，新手可以看看,我大一接触的时候也是很懵

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

我在这里给大家简单的梳理一下：

• 如果你只是简单的写几个vue的Demo程序的话，那么你是不需要Vue CLI的，我们之前在简单的写vue的一些实例的时候，通常都是按照官方文档的模式进行引入vue，但在实际的公司项目中，不可能采用这么简单笨拙的的方式，我们会通过webpack
• 我们如果真的想要使用纯html,css,js三件套来写项目，你可以想象有多少JS文件，互相引用，就算自己可以分清，后期维护呢，同样也不利于别人学习你的代码，这里就要接触模块化开发webpack

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

• 而webpack为了可以正常运行，必须依赖node环境，node环境为了可以正常执行很多代码，必须其中包含各种依赖的包，而这种包可以用npm工具进行管理和使用（node package manager）所以俗称webpack为打包工具
• 我们通常是使用webpack配置项目，webpack-loader引入各种文件，或者搭建本地服务器，各种各种，如果我们公司每次写一个项目都要进行各种冗杂的配置，效率简直是太低，尤其是自己配置的代码不够规范，版本容易出错以及各种问题，这是非常不可取的，这就由许多大公司创建了CLI,他们利用webpack等进行了绝大多数的配置供与其他人直接来使用

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

我们使用CLI的简单操作就可以省去以前几十倍的配置时间

进入正题

Node.js

前提是需要安装node.js

node.js安装推荐文章：

node.js的安装

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

检查npm版本

、
、
、

webpack

同样webpack也是使用cli的前提

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

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

webpack全局安装：

cnpm install webpack -g
cnpm是国内淘宝镜像，没有的话使用npm就好了

cnpm install webapck@5.10.0 -g(我安装的指定版本)

然后我们检查一下自己电脑的版本

、
、
、

CLI

准备工作已经完成，我们现在来全局安装cli:

现在使用脚手架2的已经很少了，我们直接安装3以上版本

cnpm install -g @vue/cli

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

cnpm install @vue/cli -init -g

检查版本

·
·
·
·

安装完成之后，我们初始化项目

Vue CLI2初始化项目

vue init webpack project01

这里我就不详细讲了直接放图

·
·
·

Vue CLI3初始化项目

vue create project01

①：

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

②：

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

③：

我们选择 vue3

④：

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

我们选择第一个配置到单独文件中

⑤：

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

我们选择No

⑥：

cd project02

cnpm run serve

打开默认端口8080的网页

大功告成