vue开发入门

1，首先要先安装node.js 及 npm

https://nodejs.org/download/release/v9.8.0/  这个网页下载 node-v9.8.0-x64.msi 文件，然后安装。

设置环境变量：NODE_PATH 为 D:\Program Files\nodejs 

启动命令窗口，输入 node -v 会打印node.js的版本号为 v9.8.0  说明安装OK了。

在命令窗口输入 npm -v 会打印版本号为 5.6.0  说明npm也安装好了。

说明：新版的Node.js已自带npm，安装Node.js时会一起安装，如v9.8.0版本，npm的作用就是对Node.js依赖的包进行管理。

2，安装node.js相关环境：

     在命令窗口分别运行下面的命令：

     npm install express -g

     npm install jaden -g

     npm install mysql -g

     npm install -g express-generator

     然后运行命令：express --version  会打印版本号，如：4.16.0

3，安装vue-cli 和 webpack

     在命令窗口分别运行：npm install webpack -g

     npm install --global vue-cli

　 --global 意思是全局安装，这样Vue会安装到node的文件夹下，否则会安装到当前目录。

　 运行命令：vue --version  会打印版本号：2.9.3  说明vue-cli 安装成功。

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

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

 

4，创建vue测试项目

41、打开命令行，进入到希望创建vue测试项目的路径，然后在命令行中执行下列命令（cmd下的命令，不是node下的命令），进行项目创建。

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

　 执行上面这个命令后命令行会出现一些需要你填写选择的项目属性：

　　project name  工程名称

　　project description  工程描述

　　author  作者

　　vue build？standalone

　　install vue-router?  Yes

　　Use ESLint to lint your code?  No

　　set up unit tests?  No

　　setup e2e tests with nightwatch?  No

　　should we run 'npm install' for you after the project has been created?(recommended) npm

　　这句话是在问是否在工程创建后就去跑 npm 安装依赖 这里面有几个选项  第一个是【是】 也可以选最后一个 稍后自己就安装依赖 即 在命令行执行npm install 命令

42、在命令行中进入到项目路径vue_test目录，然后执行 npm install 命令，安装项目需要的依赖。（其中node-modules是依赖安装后出现的，没安装依赖以前是没有node_modules文件夹的）。

43、然后执行 npm run dev 命令，运行项目，然后用 localhost:8080 测试，会看到一个vue的欢迎界面。

 

5，在WebStorm中打开vue项目

51、在WebStorm中打开刚才创建的vue测试项目，项目的js文件可能会有编译异常。可以通过在setting文件中修改js版本为ECMAScript6来解决。

52、在WebStorm中设置项目的快速启动。在WebStorm右上角选择“Edit Configrations”，进入配置界面。

     点击配置界面左边的Defaults ，再点 Node.js 然后点左上角的大+号，

　　name 框里填 vue_test   

　　Node interpreter 框里，选择node.exe 所在的目录和该文件。

　　Working directory 框里 选择vue_test 目录。