vue/cli4 + element ui + vue2x 项目创建使用总结（一条龙教程）

前言

在使用新版本的vue 过程中遇见了很多问题，感觉把能踩得坑都给踩了，所以今天在这里总结一下。希望大家能少踩点坑。

一、安装node.js

1.进入node官网：https://nodejs.org/zh-cn/
选择自己想要安装的版本：
2.下载完毕后 选择同意协议，然后点击next。

3.可以选择更换安装地址

4.然后一路下一步就可以，他会默认添加环境变量。

5.测试是否安装成功，打开cmd 输入 node -v, 和 npm -v。
出现版本号即为安装成功。

注意！！！出现问题一定不要重复安装，可以选择修复一下node.exe,或者，换一个版本的node 安装，否则安装vue/cli时会报错。

Error: Cannot find module ‘C:\Users\AppData\Roaming\npm\node_modules\.

二、安装vue脚手架

1.运行 npm install -g @vue/cli

npm install -g @vue/cli

----------这里我还遇见了一个非常奇葩的问题，我安装vue他竟然给我报python 解释器的错误。大家如果遇见可以尝试下这条命令。

npm install --global --production windows-build-tools

三、创建vue项目

1.运行 vue create 你的项目名

vue create my_vue3

2.可以生成默认的，也可以自己配置，我选择自己配置，因为默认的没有router等一些模块。
3.选择你需要的项目模块，如果想使用vue3的element ui 就一定要选择 第一项版本选择。（按下空格选中）
4.这里选择版本，尽量选择 2.x,否则在使用 element ui 时会报错：Uncaught TypeError: Cannot read property ‘prototype’ of undefined。
我在这里卡了很久才发现问题原因，吐槽一下我自己。
5.选择是否以history方式的路由，就是 hash 是带 /#/,history方式不会带，会比较美观一点。
6.选择CSS pre-processor,我选的是 第二种 node-sass的，大家可以根据自己需要选择。
7.选择一个linter/formatter配置,我选的是最后一项 常用的。
8.选择其他配置特性。这个仅供参考，可以根据自己需要选择。
9.喜欢将Babel、ESLint等的配置放在哪里。我选择的是各自配置，不是总体配置。
10.是否保存配置，下次选择会默认这些配置。我选的No
11.等待创建项目完成。此处我还遇见过一个坑，就是vs code的终端创建项目失败，最后试了试管理员打开cmd才成功。具体可以参照 https://blog.csdn.net/weixin_46010646/article/details/119637527?spm=1001.2014.3001.5501 来解决。

四、打开项目地址，并引入element ui

1.首先可以现使用这两条命令运行创建好的项目。
2.会出现两个地址，一个是本机地址，一个是内网地址。
3.打开一个，出现此界面即为成功，（不容易，鼓励自己一下!）

4.引入element ui
(注意官网给的命令是针对 vue/cli3的，vue/cli4 是不行的。)
所以需要运行 git仓库里的命令

vue add element

或者

vue add element-plus

还需要做一些配置，当前存储库中存在未提交的更改，是否隐藏或提交更改。我选的 y
选择导入方式，我选的是第一项全部导入。
是否要覆盖元素的SCSS变量？我选的 y

选择要加载的区域设置 我选的第一项 zh-CN
配置完成并再次运行 npm run serve

出现 el-button 并且有如图样式即为成功。（太不容易了，我都快要哭了）

总结

版本脚手架更新到 vue/cli4 ，变化还是很大的，稍微不注意，就会报各种错误，但主要还是版本匹配的问题，选择对正确的相对应的版本就会减少一些错误，我也是踩了很多坑。不过还是要感谢这位大哥，感谢大哥赏了口饭吃。

希望这篇文章对大家有所帮助，如果有错误还请大家及时指出。