Sublime Text
Chrome浏览器调试
首先通过webpack构建vue项目（构建过程可自行搜索），项目结构如图，各目录的作用，图上也做了相应的描述，可仔细查看了解；而平时开发项目过程中，一般情况下只需要对src目录进行操作。 Tips:图2是来自网上的截图。
平常写习惯静态页面的同学，第一眼看到vue的目录结构，会感觉很凌乱，不知怎么运行？各文件是怎样的一个关系？具体是怎么一个加载过程？ 下面就来介绍项目加载的一个过程，理清各文件的关系，有利于大家理解整个项目（下面是以exprice为例子，各文件的代码跟初始化有稍微区别）。 1.项目运行入口index.html，在body中只有一个id为app的div标签，这个id将会连接到src/main.js内容，代码如下图： Tips： 1.头部head设置双击不进行放大； 2.方法change使页面不同分辨率下自适应。
2.在main.js中，新建了一个vue实例，并使用el：#app链接到index.html中的app，并使用template引入组件
3.看一下App.vue中的内容，是一个标准的App.vue模板的形式，包含了、、三部分，在标签下，有
4.在index.js的代码中，建立了路由相关的内容，也就会渲染到app.vue下面的
5.在home.vue的template中，我们可以头部组件和内容区域；到此，这个页面的加载渲染过程结束了，代码和最终效果如下图：