Vue+Vue-Cli安装配置使用全过程详解

Vue+Vue-Cli安装配置使用全过程详解

一、安装和配置node,vue-cli

node:
这里我看的是另一个博主的文章，写的非常详细，遇到问题可以看看讨论区
huangfuyk（必看）
推荐如express之类的模块用镜像安装。
vue-cli:
打开之前设置的node_global文件夹，在命令行中全局安装

#有人是这样安装的
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，再指定版本安装。(不了解的可以看看这篇link)

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，代表已经成功。
注意事项：
1.启动系统终端时用管理员运行。
2.我的Node版本太老了，不要选最新也不要太老，17.x，18.x估计比较好？警告也不要怕，还是可以用的。
3.删除成功时，运行 vue -v会提示不是内部或外部命令，node_global的modules下没有这个模块，就证明卸载成功了。
4.升级node不要尝试那个n命令，因为只有mac支持。和这个博主一样的问题我遇到了link
5.node升级可以看这个教程华为云开发者联盟，按提示可以更新vue。
排雷：不要使用太高版本的Node，6.xx较好。已经安装的搜版本回退尝试一下。

二、创建一个vue项目工程

cd…可以退到上一级文件夹，我们退到含有node_cache和node_global的那个文件夹，还可以关掉命令提示符，再次管理员运行命令行提示符。

#打开D盘
D:
#打开自己设置的node_golbal文件夹下自建的Vue-Workspace文件夹
cd D:\Node\node_golbal\Vue-Workspace
#创建工程
vue create 项目名称

首先，我命令行里面的所有node_cache都改为node_globall！！！即下面这些图中node_cache应该为node_global，我们要打开node_global。因为第一次做的时候做出错了，后面出了很多错误！又懒得截图了，所以下面图片没有改，但之前的操作全是正确的。

第一步，选择手动。(上下键控制，空格为选择，Enter为确认所有选项完成开始下一个命令)

第二步，选择有图示选择，如果有Choose vue version的选项也选上。

第三步，我选的3.x，这步自己斟酌。(推荐2版本，因为后面非常方便使用ElementUI。

第四步，是否选择历史路由？否。

第五步，选Less

第六步，选单独的配置文件，即第一个选项。

第七步，是否保存为模板？否。

第八步，出现两条蓝色命令项目创建完成。

注意事项
1.我命令行中打开的是有包含vue命令脚本等文件的cache文件夹，因为我在安装和配置时更改了存储设置。
2.启动系统终端时用管理员运行！

三、启动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版的，所以有些操作界面可能不同，其他版本可以参考这个博主的。
链接：link（前面的没问题可以不看）

方法二：在系统命令行中输入命令来启动。

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

（待编辑）