Vue 初识____Vue开发环境搭建（WebStorm）

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

---

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

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

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

完成安装后，可以打开命令行，直接使用node命令，进入node.js交互模式。
然后可以输入console.log("Hello,World");测试安装。

// 查看安装的Node.js的版本
C:\Users\Think>node -v
v8.9.4

3、设置npm的默认安装路径和缓存路径

// 设置npm安装程序时的默认位置
npm config set prefix "D:\Program Files\nodejs\node_global"
// 设置npm安装程序时的缓存位置
npm config set cache "D:\Program Files\nodejs\node_cache"

然后再把D:\Program Files\nodejs\node_global\node_modules路径添加到环境变量PATH中。

4、安装webpack和vue-cli脚手架

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

npm install webpack -g
npm install vue-cli -g

安装路径为D:\Program Files\nodejs\node_global\node_modules文件夹下。

二、创建vue测试项目

---

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

启动项目

浏览器打开http://localhost:8080/#/如下显示：

三、安装WebStom

此处掠过。

四、在WebStorm中打开vue项目

1、在WebStorm中打开刚才创建的vue测试项目，项目的js文件可能会有编译异常。

可以通过在setting文件中修改js版本来解决。

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

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

添加一个新的npm配置。

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