新手下载使用vue学习总结——应该能解决遇到的大部分问题

劣币追逐良币

已于 2022-10-14 20:05:19 修改

阅读量535

点赞数 1

文章标签： vue.js 学习 javascript

于 2022-10-14 17:03:16 首次发布

本文链接：https://blog.csdn.net/qq_56861734/article/details/127318677

版权

4、全局下载@vue/Cli（可选下载cnpm（淘宝镜像），webpack，express）

5、创建vue项目

本次学习之旅到此结束，恭喜你又学习了一项技能，congratulations！！！

使用idea启动vue项目：还在学习中......

前言：作为一个纯小白最近学习下载并使用Vue，中间遇到一些问题，为了方便以后同样和我一样不懂的小伙伴避坑，也是方便以后自己查看，所以写下这篇文章，其中不免有我理解错误的地方，欢迎大家讨论指正，好了，静下心来食用这份保姆级教程吧

请按照以下步骤操作：

1、下载安装node.js

下载：官网下载长期维护版，链接：Node.js，

安装：下载后傻瓜式安装（可选：按照需要更改安装路径，如D:\Program Files，其余直接点击下一步即可）

确认：cmd 命令窗口下输入（node -v和npm -v）出现版本号即可确认安装成功

2、新建两个文件夹

到nodejs目录下新建两个文件夹node_cache和node_global

3、配置

（1）环境配置

方法：右键此电脑点击属性下拉找到高级系统设置，点击环境变量进行下面操作

a、系统变量：

新建NODE_PATH，变量值是node_modules的地址

Path点击编辑增加node_global的路径地址(vue命令)，并确认是否有nodejs的路径地址

b、用户变量：

Path将默认c盘【C:\Users\你的用户名\AppData\Roaming\npm】修改为node_global文件所在的路径（为了节省C盘内存）

（2）npm配置

温馨提示：下面所有操作cmd以管理员身份(后面会提到为什么）打开

在cmd 运行三个命令：

npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache "D:\Program Files\nodejs\node_cache"

npm config set registry "https://registry.npm.taobao.org/"（淘宝镜像，设置后后面安装淘宝镜像不操作也可以）

确认：输入npm config get查看是否设置成功

更新npm为最新版本（不过一般下载的即为最新版本）

输入：npm install -g npm

填坑：这里之所以用管理员身份打开是因为执行config后会在【C:\Users\用户名】自动生成一个.npmrc文件，它会影响你执行npm install XXX（提示你没有权限），甚至执行npm -v也会报错。

此时如果你还是头铁，怕用管理员身份会不小心操作到什么关键指令，有两种方法可以解决这个问题：

1、删除.npmrc文件再执行npm install XXX；

2、修改文件夹node_global和node_cache的权限，这里可以参考这位博主的文章解决npm异常npm WARN logfile could not be created: Error: EPERM: operation not permitted_南城猿的博客-CSDN博客_npm warn

4、全局下载@vue/Cli（可选下载cnpm淘宝镜像，webpack，express）

好了，到了这一步已经把前期的准备工作都准备好了，下面就比较简单了，我安装的时候vue安装已经按照新版方法进行，如果你也要下载新版本，请往下看：

下载基本指令：npm install XXX

cmd命令窗口执行如下命令：

下载：npm install -g @vue/cli（-g就是表明全局下载）

确认：vue --version可以查看版本号即可成功

这里讲一个查看你都下载了哪些工具包的方法，因为一般都是执行的全局下载（-g)，所以都会下载到node_global文件夹下的node_modules下，我这里就是有7个

如果确认已经下载但是输入vue --version提示vue 不是内部或外部命令，请看这个：

vue 不是内部或外部命令_＊且听风吟的博客-CSDN博客_vue不是内部命令

ok，至此你就可以使用vue指令创建Vue项目了

可选：如果需要下载淘宝镜像（可以提高下载工具包的速度或者某些工具包不能下载的问题，和配置镜像的效果是一样的，下载后可以用cnpm代替npm指令）

cmd命令窗口执行如下命令：npm install -g cnpm --registry=http://registry.npm.taobao.org

5、创建vue项目

cd到要创建的vue项目目录下，执行npm create app-name或者vue create app-name（新版创建方法，相当于旧版vue init webpack app-name+cnpm/npm install)

执行cd app-name和npm run serve/vue serve得到一个网址，浏览器输入即可编辑你的Vue项目了

执行过程中会依次出现的页面见下图