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

原创已于 2024-09-29 10:35:53 修改 · 2.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

向星辰大海进发

关注

标签

#vue.js #经验分享 #node.js #intellij-idea #前端框架

分类前端开发

于 2023-10-24 12:51:56 首次发布

笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

学习

7 篇文章

订阅专栏

经验分享

4 篇文章

订阅专栏

本文详细介绍了Vue和Vue-Cli的安装配置过程，包括node和npm的管理，Vue-Cli的全局安装，创建Vue项目，使用Element-UI，以及项目启动和界面设计。还提到了常见问题及解决方案。

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

前言
这篇文章只是为了我自己方便查阅，所以记录了一些遇到的问题，因此非常详细，实际配置一个Node和脚手架没有这么复杂，前提是安装之前，要先考虑node.js、脚手架、vue项目所对应的版本，目前还是比较推荐v18+的版本，比如v18.20.4。
虽然这篇我安装的是node v11.15.0，但其实后面我建工程和安装一些包的时候发现，还是需要v16以上。

不要使用太高版本的软件或者包，假如你已经更新，比如更新了Node，可以试试版本回退，但还是那句话，任何难以撤消的命令，都不要轻易使用。还是建议定好一系列的版本再安装

关于vue工程：其实vue2.x和vue3.x都可以，vue3.x好处就是很多博主视频教程可能使用的是这个，语法上有些语句比vue2.x要更简洁一点，比较新，效率肯定是有提升的。但vue2.x就是比较成熟了，那种像csdn这种技术帖是很多的，新手来说vue2.x其实很不错啦，所以不要纠结vue选择哪个版本。

关于element-ui：我使用了npm install element-ui --legacy-peer-deps去强制安装，其实后面我再另一台电脑上又尝试了一下，是不需要–legacy-peer-deps去强制安装的，这种命令也最好不要在有选择的情况下使用。

关于启动命令：一般我这篇文里面的命令都是可以成功运行的，如果错误，看看package.json里面的scripts是什么启动命令。

最最重要的一点，就是看别人的教程安装软件或者配置什么的时候，一是要先看评论区，二是多看几篇帖子，三是一旦教程设计到更改系统里的某文件，或者删除某文件要注意备份，四是更新命令不要轻易使用，五是我这篇帖子有哪些觉得不对劲的就去看看其他人怎么做的。

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

node（此处安装nodejs、配置nodejs、node_global、node_cache）:
这里我看的是另一个博主的文章，写的非常详细，遇到问题可以看看讨论区
huangfuyk（必看）
推荐如express之类的模块用镜像安装。
vue-ci（安装脚手架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估计比较好？警告也不要怕，只要不是错误就行。选v18+ 以上是因为很多vue项目的一些包都需要18以上，比如npm安装vitepress。
3.假如要删除安装的脚手架，删除成功时，运行 vue -v会提示不是内部或外部命令，node_global的modules下没有这个模块，就证明卸载成功了。
4.升级node不要尝试那个n命令，因为只有mac支持。和这个博主一样的问题我遇到了link
5.node升级可以看这个教程华为云开发者联盟，按提示可以更新vue。

二、创建一个vue项目工程 ============================

global和node_cache同级
使用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

（待编辑）