VUE运行环境搭建

VUE运行环境搭建

下载并安装node.js

进入node.js中文网下载和自己电脑对应版本的node.js安装包
点我跳转

下载好后双击进行安装

安装时直接下一步就行，期间只需要选择接受协议，如果想改变安装位置，可以改变安装位置

我这里安装位置为D:\nodejs

然后一直Next直到完成安装就行了
安装完成后可以在命令行输入 node -v测试一下，如果出现版本号就可以了

配置NPM

1.在nodejs安装路径下，新建node_global和node_cache两个文件夹

在命令行分别输入
npm config set cache “D:\nodejs\node_cache”
npm config set prefix “D:\nodejs\node_global”
设置缓存目录和全局的模块存放位置

然后继续在命令行分别输入
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
设置npm镜像为淘宝镜像

然后在命令行输入 npm config ls 查看路径和镜像是否已经设置成功

配置环境变量

右键 此电脑 打开属性界面----如果桌面 此电脑 图标是快捷方式，先右键选择打开文件所在位置再右键选择属性

选择 高级系统设置


在编辑页面点新建输入node.js安装路径中新建的全局目录路径 D:\nodejs\node_global 然后确定

然后在系统变量里新建 NODE_PATH 变量，设置其值为安装目录下的node_modules文件夹的路径
D:\nodejs\node_modules

最后确定，一直确定知道回到下面的页面，win7系统配置环境变量略有区别，如有疑问请百度

下载VUE

在命令行执行npm install vue -g ，等待下载VUE

继续输入npm install vue-cli -g ，等待下载vue脚手架

创建测试项目

新建一个文件夹，在此文件夹里按住shift键然后鼠标右键点击文件夹空白处，选择在此处打开Powershell窗口

在此窗口输入 vue init webpack myproject 进行创建项目

如果报错的话，就回到nodejs的安装目录，进入node_global 文件夹下将 vue.ps1 文件给删掉，一定要看清后缀名，不要删错

然后回到Powershell窗口继续执行 vue init webpack myproject 语句创建项目

然后对新项目进行一些配置

然后等待下载文件完成

然后输入 cd myproject 进入新创建的项目文件夹下，输入 npm run dev 指令回车运行项目

运行成功后复制网址

在浏览器打开后如下图所示

小结

以上就是VUE环境搭建的全部内容了，如果对上述过程有疑问，可以留言给我，我们一起探究一下