Skip to main content

Command Palette

Search for a command to run...

Vue踩坑手册

Published
1 min read
L

nothing

Vue3安装配置、开发环境搭建(卸载2)

开发需知

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

node -v

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

npm -v

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

cnpm -v

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

vue -V

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

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

npm list vue

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

npm list -g vue

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

链接:https://pan.baidu.com/s/1V4A1IYwjgNtyyDLI_qd4Vg 提取码:fvp8

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

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

1查看版本

npm list -g

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

test

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

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

提醒:

1 安装时推荐不要安装到C盘 ,但要记住安装在哪

2 nodejs安装路径下,新建node_global和node_cache两个文件夹

3 设置缓存文件夹

npm config set cache "完整安装路径\node_cache"

4 设置全局模块存放路径

npm config set prefix "完整安装路径\node_global"

5 设置环境变量 使得在任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径 修改 系统变量 PATH,添加新的全局路径 完整路径\node_global 新增 系统变量 NODE_PATH 完整路径\node_modules

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

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

2.1安装vue-cli脚手架

npm install -g @vue/cli

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

2.2创建vue3的项目

另起一个目录(存放你的vue项目的地方)

运行

vue create my-vue3-app

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

cd my-vue3-app
npm run serve

test

成功后浏览器搜索“http://localhost:8080/”

test

就成功了。

2.2.1注意

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

npm install -g vue //这条指令自动安装最新的vue,大概率是vue3
npm install -g vue@3.4.7 //这条指令能安装@3.4.7版本的vue(不过经过实验,全局环境里面可以不用有全局vue,只有一个全局vue-cli就行)