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版本
选择是否使用历史模式:此处建议选择不使用,即输入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/#/(上图的链接)
4.2 引用基于vue-cli4的Element组件
引入ElementPlus组件:vue add element-plus
下载依赖包:npm install
运行项目:npm run serve
4.3 错误解决
先卸载:npm uninstall vue-loader-v16
执行安装:cnpm i vue-loader-v16