vue.js 开发环境的简单搭建

1.     在node官网上下载node.js并安装。

2.     打开cmd运行框输入node –v  npm –v查看是否安装成功，如下图，如果出现相应的版本号，则说明安装成功。

3.安装cnpm（淘宝镜像）

在命令行输入npm install -g cnpm --registry= https://registry.npm.taobao.org然后等待，安装完成如下图。

4. 安装vue-cli脚手架构建工具

首先执行这句命令npm install -g vue-cli ，然后等待完成。

等完成之后就可以用vue-cli构建项目：首先在d盘建立一个文件夹，然后再命令行中把目录转到你新建的文件夹，最后在执行vue init webpack firstVue，（firstVue 是自己命的项目名称，可自行修改）如下图，运行初始化命令的时让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

然后在你新建的文件夹里面会出现你建的项目文件夹

打开这个文件夹，项目文件如下所示

5.  安装依赖包

首先把命令行中把目录转到firstVue这个文件夹，然后运行命令cnpm install，如下图所示，表示已安装。

安装完成后你的文件夹里面会多一个node_modules的文件夹，这个里面就是我们安装的依赖包文件。然后就可以运行这个项目

6.在项目目录中，运行命令  npm run dev

如上图所示浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。

按ctrl+c可以结束操作

看到这个图片就成功一半了。

7. 安装json和resource和router

   npm install vue-router –save

npm install vue-resource –save

npm install json-server –save

8. 执行完上面之后，在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools。

8. 下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。

10. 修改shells、chrome目录下的mainifest.json 中的persistant为true：

11. 打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式

12. 然后将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。

显示这个就证明成功了，撒花~\(≧▽≦)/~