# Vue踩坑手册

## Vue3[安装](https://so.csdn.net/so/search?q=%E5%AE%89%E8%A3%85&spm=1001.2101.3001.7020)配置、开发环境搭建（卸载2）

## 开发需知

1node：简单来讲就是环境。支持前端框架的开发环境

```plaintext
node -v
```

2npm：是下载node的时候一起下载下来的下载工具，类似python的pip。

```plaintext
npm -v
```

3cnpm：是因为npm属于外国的东西。下载的时候总是出现网络问题。然后淘宝安排的镜像安装工具。（在安装完淘宝镜像后把npm指令换成cnpm就行。）

```plaintext
cnpm -v
```

4vue-cli：这个是vue官方给配置的脚手架，用来快速启动一个vue项目而设计出来的。

```plaintext
vue -V
```

5vue.js：这个是vue框架本体，vue2和vue3说的都是这个。可是直接用vue的指令来创建vue。但是速度很慢。所以会有vue-cli的存在。

如果在一个 Vue 项目的目录下，你可以使用以下指令查看当前项目中 Vue.js 的版本：

```plaintext
npm list vue
```

如果想在全局查看 Vue.js 的版本，可以使用：

```plaintext
npm list -g vue
```

## ########开发之前请先安装上node环境#######

链接：[https://pan.baidu.com/s/1V4A1IYwjgNtyyDLI\_qd4Vg](https://pan.baidu.com/s/1V4A1IYwjgNtyyDLI_qd4Vg) 提取码：fvp8

这个是我提供的node的安装网盘链接

**一定要先安装了node再继续下面的操作**

## 1查看版本

```plaintext
npm list -g
```

如果在这里可以看到在这个文件夹下有很多的东西（除了你要安装的东西，我这个是安装好的）

![test](https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/313745bb34917a8211d9ff89646aef45e42579f4028d2f5d3756543439b93d56e4fec1720f286b7aa6d3e48ae64718c8?pictype=scale&from=30113&version=3.3.3.3&fname=%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-03-07%20191531.png&size=750 align="left")

点进去文件夹全部删除。再执行命令就发现东西全没了

如果卸载不掉文件夹，比如管理员权限删除不了，可以用npm往文件夹里多下载点七七八八的东西就能卸载掉了（实践出来的经验，不知道原理）。或者你点进去一个一个删除就能删了。

> 提醒：
> 
> 1 安装时推荐不要安装到C盘 ，但要记住安装在哪
> 
> 2 nodejs安装路径下，新建node\_global和node\_cache两个文件夹
> 
> 3 设置缓存文件夹
> 
> ```plaintext
> npm config set cache "完整安装路径\node_cache"
> ```
> 
> 4 设置全局模块存放路径
> 
> ```plaintext
> npm config set prefix "完整安装路径\node_global"
> ```
> 
> 5 设置环境变量 使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径 修改 系统变量 PATH，添加新的全局路径 `完整路径\node_global` 新增 系统变量 NODE\_PATH `完整路径\node_modules`

## 2安装淘宝镜像-注意命令行权限

```plaintext
npm config set registry https://registry.npmmirror.com
```

## 2.1安装vue-cli脚手架

```plaintext
npm install -g @vue/cli
```

这个过程或许很慢，有能力建议科学上网

## 2.2创建vue3的项目

另起一个目录（存放你的vue项目的地方）

运行

```plaintext
vue create my-vue3-app
```

直接选vue3然后回车，等进度转好了后执行

```plaintext
cd my-vue3-app
```

```plaintext
npm run serve
```

![test](https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/b5494c8da21b385ac7ec6b261c1c1fb5c66131bd2c1e1729d7a7ea903544c53408ba26675a7722a82a016572c27537d5?pictype=scale&from=30113&version=3.3.3.3&fname=%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-03-07%20192706.png&size=750 align="left")

成功后浏览器搜索“[http://localhost:8080/”](http://localhost:8080/”)

![test](https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/c1a17cc1a19ceedc30377ce19f8128bb67b1b17ab30c5b6a6f5a99af2613fda3389940f95add6d66cf13c5061861579e?pictype=scale&from=30113&version=3.3.3.3&fname=%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-03-07%20192851.png&size=750 align="left")

就成功了。

## 2.2.1注意

这个时候电脑只安装了全局的cnpm和vue-cli。并没有安装全局vue。如果想要安装全局vue执行

```plaintext
npm install -g vue //这条指令自动安装最新的vue，大概率是vue3
```

```plaintext
npm install -g vue@3.4.7 //这条指令能安装@3.4.7版本的vue（不过经过实验，全局环境里面可以不用有全局vue，只有一个全局vue-cli就行）
```