Vue+Vue-Cli安装配置使用全过程详解
Vue+Vue-Cli安装配置使用全过程详解
Vue+Vue-Cli是前端开发中常用的框架和脚手架工具，本文将详细介绍从Node环境配置到Vue项目创建再到项目启动的全过程。通过本文，读者可以掌握Vue开发环境的配置方法，为后续的Vue项目开发打下基础。
一、安装和配置node,vue-cli
在开始之前，需要确保已经安装了Node.js。推荐使用v18+版本，如v18.20.4。如果已经安装了其他版本的Node.js，可以考虑版本回退。
Node.js安装
打开命令行，输入以下命令：
#有人是这样安装的
npm install -g @vue/cli
#我使用的（推荐）
npm install @vue/cli --registry https://registry.npm.taobao.org
如果出现"Unhandled rejection Error:EACCES:permission denied"，说明操作权限不足，需要重新安装可采用如下代码。（不是很推荐，因为可能会出现一些错误）
sudo npm install -g @vue/cil
检查是否安装完成，如果终端输出版本号，表示 Node.js 已安装。
vue --version
如果提示Node版本和@vue/cli版本冲突，那就卸载@vue/cli，再指定版本安装。
npm uninstall -g @vue/cli@版本号
npm uninstall -g @vue/cli
我的Node版本是11.15.0，而3.x 以下版本的 vue 脚手架是 vue-cli ，即 [ 0, 3.0]，3.x 以上版本的 vue 脚手架是 @vue/cli，即 [ 3.0 ，5.x ]，4.5又是一个分界线，所以我选择4.5.13（稳定版本）
npm install -g @vue/cli@4.5.13 --registry https://registry.npm.taobao.org
出现出现 $ cd one-project 和 $ npm run serve，代表已经成功。
注意事项：
- 启动系统终端时用管理员运行。
- 我的Node版本太老了，不要选最新也不要太老，17.x，18.x估计比较好？警告也不要怕，只要不是错误就行。选v18+ 以上是因为很多vue项目的一些包都需要18以上，比如npm安装vitepress。
- 假如要删除安装的脚手架，删除成功时，运行 vue -v会提示不是内部或外部命令，node_global的modules下没有这个模块，就证明卸载成功了。
- 升级node不要尝试那个n命令，因为只有mac支持。和这个博主一样的问题我遇到了link
- node升级可以看这个教程华为云开发者联盟，按提示可以更新vue。
二、创建一个vue项目工程
使用cd…可以退到上一级文件夹，我们退到含有node_cache和node_global的那个文件夹，还可以关掉命令提示符，再次管理员运行命令行提示符。
#打开D盘
D:
#打开自己设置的node_golbal文件夹下自建的Vue-Workspace文件夹
cd D:\Node\node_golbal\Vue-Workspace
#创建工程
vue create 项目名称
首先，我下面的命令行图片里面的所有node_cache都改为node_global！！！即下面这些图中node_cache应该为node_global，大概是第八步的图片。
我的global里面是我的项目（project）所在位置
我们要打开node_global。因为第一次做的时候做出错了，后面出了很多错误！又懒得截图了，所以下面图片没有改，但上面的命令我改很方便，所有是正确的。
选择工程配置
启动系统终端时用管理员运行！
第一步，选择手动。(上下键控制，空格为选择，Enter为确认所有选项完成开始下一个命令)
第二步，选择有图示选择，如果有Choose vue version的选项也选上。
第三步，我选的3.x，这步自己斟酌。(推荐2版本，因为后面非常方便使用ElementUI。
第四步，是否选择历史路由？否。
第五步，选Less
第六步，选单独的配置文件，即第一个选项。
第七步，是否保存为模板？否。
第八步，出现两条蓝色命令项目创建完成。
三、启动vue界面
两种方法：一种是在之前的命令行里面启动，另一种是使用其他软件启动。
方法一：使用intellij idea启动vue项目
step1：选中import a project，选择要打开的vue项目后点击确认。
step2：选择插件下载，点击Plugins,选择marketplace，再搜索vue下载。
step3：查看JavaScript版本是否为6/6+
step4：点击软件下方Terminal，在命令行中依次输入如下语句：
初始化
npm install
启动服务
npm run serve
注意事项
我的软件是2020版的，所以有些操作界面可能不同，其他版本可以参考这个博主的。
链接：运行（前面的没问题可以不看）
方法二：在系统命令行中输入命令来启动。
vue ui
成功后会像前一种方法一样，有一个Local和Network，选一个按地址访问即可。
四、设计界面，开始项目
step1：使用别人的iview和Element，美观又方便。在CMD中打开工程src，输入命令：
npm install element-ui -save
这一步非常重要，如果由于npm版本问题，会发生冲突，一个方法是降级，一个方法是强制安装你需要的东西，这里我们选择第二中方法。
发生冲突：
解决办法，添加–legacy-peer-deps。（这个命令不能多用）
在CMD中管理员运行，打开工程文件夹，输入如下代码：
npm install element-ui --legacy-peer-deps
这样就可以成功安装Element-ui啦！
可能在创建项目或者安装模块的时候不小心把npm删除了，点击之前的.msi文件，点击repair。
五、项目打包到Github
（待编辑）