vscode下载即安装
vscode在这个环境中的作用就是打开我们创建的VUE项目,然后进行代码的修改。
下载地址:https://code.visualstudio.com/download
我们需要下载自己电脑对应的版本
user与system的版本区别: 其中user版本会安装在当前计算机的账户目录,就是你换个装好登录电脑,将无法使用该软件。而system是安装在非用户目录,所以用户都可以使用。我在这里下载的是system版本。
安装过程中,需要选择直接添加PATH,这样我们不需要配置PATH环境变量。
安装完成后,添加中文插件:
之后我们使用vscode打开项目的文件夹,然后修改代码即可。
node.js下载安装
下载网址:https://nodejs.org/zh-cn/download/
选择对应的版本:我现在的是长期支持版,64位
安装过程中,发现要进行自定义设置,我们这里选择第四个选项,将node和npm以及模块添加到环境变量中。
之后还会提示是否安装两个工具
但是由于我选择了这两个工具之后,后面由于网络问题,安装包一直下载不上导致失败:
最后,我卸载重新安装了一下。没有选择那两个插件:如果没有安装后面使用npm报错:gyp ERR! find Python,我们可以使用命令:
:https://github.com/nodejs/node-gyp#on-windows在安装。
完成安装后,打开cmd命令窗口,检查是否安装成功:
node -v//检查node.js的安装
npm -v//检查npm的安装
VUE环境搭建
设置nodejs prefix(全局)和cache(缓存)路径
使用npm或cnpm安装模块会分为本地安装和全局安装
npm install express//本地安装——会安装到当前项目
npm install express -g//全局安装会安装到指定的目录(node_global)
所以我们设置一下全局安装的目录。打开node.js的安装路径,然后新建两个文件夹:
设置缓存文件夹
npm config set cache "D:\node.js\node_cache"
设置全局模块存放路径
npm config set prefix "D:\node.js\node_global"
当我们设置成时候,使用npm install XXX -g安装以后模块就在D:\node.js\node_global里面
安装淘宝镜像cnpm
因为npm是国外的,所以使用比较慢,所以我们安装淘宝cnpm镜像来安装VUE。淘宝的cnpm命令管理工具可以代替默认的npm管理工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
修改系统变量PATH
设置环境变量之后,可以使任意目录下面都可使用cnpm与vue等命令,不需要输入全路径:
右击此电脑→属性→高级系统设置→环境变量
修改系统变量PATH
添加一个用户变量NODE_PATH
修改系统变量PATH
安装VUE
在cmd窗口输入:
cnpm install vue -g
这个时候可能会报错,提示:
这是因为我们上面修改了默认的扩展包安装路径,所以让这个导致这样的情况。那么我们修改用户环境变量PATH中的配置即可:将原来的C:\Users\XXXX\AppData\Roaming\npm改为下面的
然后重新打开cmd命令窗口执行VUE安装命令就没有问题了:
安装vue命令行工具,即vue-cli 脚手架
cnpm install vue-cli -g
到此我们的VUE环境就搭建完成了。