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