Vue CLI配置原理详解

配置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的网页

 

大功告成

————————————————
版权声明：本文为CSDN博主「佐宗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46242909/article/details/111081296