Vue3&ElementPlus搭建说明_npm 淘宝源没有element plus

Vue3&ElementPlus搭建说明
1、准备工作（已安装的跳过）
1.1 安装nodeJS
安装过程很简单，在官网下载安装包，点击安装，一直下一步直到安装完成即可，新版本的node.js会自动添加环境变量，不需要再手动添加环境变量，如有疑问，可自行前往环境变量查看。
node.js官网：https://nodejs.org/zh-cn/ 出现下图所示表示node安装完成。

1.2 检查安装的node.js是否成功及其版本号
进入cmd（Windows+R进入运行界面，输入cmd回车即可）窗口，在cmd窗口中输入命令：node -v
若出现node.js的版本号，则表示node.js安装成功。如下图所示

1.3 检查npm版本，并修改镜像为淘宝镜像（国外镜像下载慢）
安装node后会自动安装npm，可以通过命令查看npm的版本号：npm -v
若出现npm的版本号，即表示npm已经安装成功，如下图所示

在命令行输入如下命令，配置npm镜像为淘宝镜像：npm config set registry https://registry.npm.taobao.org

当然，也可以安装cnpm，通过cnpm来执行npm命令：请自行百度。

2、安装vue-cli4.5
2.1 卸载vue-cli1.x或者2.x（没有全局安装的跳过）
由于vue-cli4出现，vue cli的包名由vue-cli 改成了@vue/cli。
如果你安装了vue-cli1.x或者2.x 请先通过npm uninstall vue-cli -g进行卸载。

2.2 安装vue-cli4.5
因为vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同：npm install -g @vue/cli 全局安装vue-cli最新版本。安装之后查看vue-cli是否安装成功及其版本号：vue -V 注意，此时需要使用大写的-V。

3、创建vue项目
3.1 进入创建项目目录
根据自己的需要进入想要创建vue项目的目录，然后通过cmd窗口执行命令（可通过在目录窗口上方的路径地址栏中输入cmd进入当前目录，也可以从c盘逐步进入当前目录）: vue create test001创建项目，test001位项目名，项目名中不允许出现大写字母

3.2 选择自定义配置
通过键盘中的向下箭头控制，选择 Manually select features 手动配置, 如下图所示。

3.3 选择手动配置中的选项
向上向下箭头控制方向，空格进行选中，可选择如下配置，引入Router 和vuex以及CSS预处理器，选择完成回车即可

	选择vue版本
1

选择是否使用历史模式：此处建议选择不使用，即输入N，选择使用hash模式

选择CSS预处理器：此处建议选择 Sass/SCSS(with dart-sass)，即直接选择回车即可。node-sass是自动编译实时的，dart-sass需要保存后才会生效

选择eslint 校验规则：此处建议选择默认配置，即直接回车即可。

选择什么时候进行代码校验：此处建议选择第一个，即直接回车即可Lint on save 保存时检查， Lint and fix on commit 提交时检查

选择如何存放配置：此处一般选择默认配置，即直接回车In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

选择是否保存本次配置：建议选择N，即不保存，否则以后创建项目修改不配置不太方便

等待创建项目：若出现如下界面，表示项目创建完成。

4、运行创建的vue项目
4.1 运行创建的vue项目
进入创建的项目

	在项目目录下执行命令运行项目：npm run serve 出现如下页面表示运行成功。
     
	浏览器访问：http://localhost:8080/#/（上图的链接）
1
2
3

4.2 引用基于vue-cli4的Element组件
引入ElementPlus组件：vue add element-plus

	下载依赖包：npm install

    	运行项目：npm run serve
1
2
3

4.3 错误解决

	先卸载：npm uninstall vue-loader-v16
	执行安装：cnpm i vue-loader-v16
1
2