利用vue实现网站基本功能-项目加载过程

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模板的形式，包含了<template></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中，我们可以头部组件和内容区域；到此，这个页面的加载渲染过程结束了，代码和最终效果如下图：