Vue.js开发环境搭建(IDE:Webstorm OS:Windows10)

一、安装Node.js，搭建Vue环境

1、访问Node.js官网（https://nodejs.org/en/download/）进行安装包下载。

2、下载成功之后运行安装程序，进行安装。

如果是用安装程序进行安装，在安装过程中会自动进行Nodejs环境变量的配置，如果是通过其他方式进行安装，可能需要手动配置环境变量。

完成安装后，可以打开命令行，直接使用node命令，进入node.js交互模式。

然后可以输入console.log("Hello,World");测试安装。

3、新建D盘nodejs文件夹，同事创建global和cache子文件夹，设置npm的默认安装路径，和缓存路径：

执行npm set prefix "D:\nodejs\global"

执行npm set cache "D:\nodejs\cache"

在命令行中执行下列两个命令，进行安装。

npm install webpack -g

npm install vue-cli -g

将D:\nodejs\global加入Path环境变量。

输入vue测试是否安装成功。

二、创建vue测试项目

1、打开命令行，进入到希望创建vue测试项目的路径，然后在命令行中执行下列命令，进行项目创建。

D:

cd VueProjects

vue init webpack vue_test //其中vue_test为项目名称

按照提示完胜剩余三步，出现以下页面即表示安装成功。（此操作为非必须操作：在package.json目录下执行npm install.,在项目目录下执行npm install vue-router --save来安装路由。在项目目录下执行npm install vuex --save安装vuex。）

三、用webstorm打开项目

1、在WebStorm中设置项目的快速启动

在WebStorm右上角选择“Edit Configrations”，进入配置界面。

2、在配置界面中配置下图红框中的几个属性即可。

很多教程到这就结束了，但我要调试怎么办？难道还是需要打开一个终端？研究了WebStorm的Run/Debug，解决方案很简单，

就是Run->Edit Configurations... Add New Configuration，新建一个npm的Run/Debug