第一步---在window下搭建Vue.Js开发环境（和项目文件目录介绍和vue调试工具谷歌vue-devtools插件下载）

搭建Vue.Js开发环境

1-的NodeJS官网http://nodejs.cn/下载安装包，（最好不要装在Ç盘）

2-安装完的node.js之后，打开CMD输入：

（1）-node -v //显示节点版本

（2）-npm -v //显示npm包管理器版本

3-由于有些NPM有些资源被屏蔽或者是国外资源的原因，经常会导致用NPM安装依赖包的时候失败，所有我还需要NPM的国内

的镜像CNPM

安装方法：cmd命令行中输入npm install -g cnpm --registry = http：//registry.npm.taobao.org

4-安装完CNPM后， 安装VUE-CLI脚手架构建工具：

cmd输入：cnpm install -g vue-cli

-------到这里VUE环境和工具已经装好了

开始使用VUE-CLI构建VUE项目

1-在˚F盘创建目录F：\ myVue，创建完目录是空的，这个工作目录以后会添加各个项目目录

2-CMD输入:(进入目录）

3-在myVue目录下，运行命令vue init webpack firstVue。其中，webpack是构建工具，模块打包器，也就是整个项目是基于webpack的。其中，firstVue是项目文件夹的名称，这个文件夹会自动生成在vuejs这个工作目录中。

4-安装过程中，需要我们输入项目名称，描述，作者，版本（独立版），使用ESLint规范等等

此时，我们看到工作目录下已经自动生成了目录firstVue，如下图

5-cd到我们的项目文件夹firstVue中，运行命令cnpm install安装包，（我们已经使用淘宝镜像cnpm）

6-安装完之后，我们发现项目文件夹下多了一个node_modules目录，里面就是项目依赖包资源

7 - 安装完依赖包之后，就可以运行整个项目了。运行项目在项目目录中，运行命令npm run dev，会用热加载的方式运行我们的应用程序，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

8-如图，浏览器中输入http：// localhost：8080显示

问题解决

如果启动过程中出现下方问题，只需要将配置目录下的index.js文件中dev的端口由8080改为8088

-------------------------------------------------- -------------------------------------------------- --------------

项目文件目录介绍

一级目录

静态目录存放第三方静态资源，静态“.gitkeep文件，保证即使静态目录为空也可以提交git的仓库。（如果创建目录为空GIT中会忽略掉，不会提交到仓库）

-----------------------------------------------------------------------------------------------------

VUE-devtools如何使用

教程链接：https ：//segmentfault.com/a/1190000009682735

当我们添加完VUE-devtools扩展程序之后，我们在调试VUE应用的时候，铬开发者工具中会看一个VUE的一栏，点击之后就可以看见当前页面VUE对象的一些信息.vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。

已经编译好的VUE-devtools，拖动下载好的的.crx文件到谷歌浏览器安装拓展程序就可以安装。

链接：https：//pan.baidu.com/s/1c0mxO8-M0_wOaBeL70QAFA密码：2enp