VUE 学习笔记 从零开始一步一步构建 VUE 单页应用（二）

上篇 从零开始一步一步构建 VUE 单页应用（一） 对单页应用做了简单的介绍并创建了一个单页应用的模版。这篇就先来看看这个项目的文件结构，然后再看看要怎么修改才能实现我们自己的页面。

文件结构

用官方的 vue-cli 生成的项目文件结构如上图所示，简单介绍下上面图中各文件的作用。

src 文件夹 ：

1. assets 文件夹：存放各种资源文件，如图片等

2. components 文件夹 ：各种 .vue 组件

3. router 文件夹 ：包含 index.js ，项目路由器配置文件

4. App.vue 主要布局容器 （CLI生成）

5. main.js 项目入口文件（CLI生成）

static 文件夹 ： 可以存放被项目引用的静态文件，如 index.html 需要的 favicon.ico、js插件 etc.

index.html 项目首页

其实我们主要的工作目录也就是在 src 里面，其他的文件基本不用动，

那么我们先从 main.js 项目入口文件开始看起：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

代码很少，也就做了二件事，首先导入 vue，vue-router，主容器文件 app.vue ，然后 new 一个 vue 对象，将 router 和 组件注册到 vue对象中。这个文件我们先不用动，不影响我们后面的开发。

然后是主容器 App.vue ，

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

<style>
//这里写样式，省略，，，
</style>

这里面的内容也很少，跟传统的 Html 文件很像，唯一有点区别的就是 Template 标签，这个标签里的内容就是最后显示在页面上的东西，也即是单页应用的核心组成部分–组件。每个组件是独立的，组件之间可以自由组合，重复使用。

这里有一点需要注意的就是，每个 Template 标签内只能有一个子标签，也就是一个 div，在这个 div 里面写我们的布局，可以把 Template 看成是 Html 标签，它里面只能有一个 div，也就是 body。

这个 div 里面有二个元素，一个 img 也就是我们看到的 vue 的 logo，然后就是一个 router-view 标签，它就是路由视图，是 vue 单页应用的核心之一–路由的具象化。在我们的单页应用中，每个路由对应着一个页面，切换路由就可以相应的改变页面显示内容。

看一张调试模式下的结构图：



PS:这里使用了 VUE 官方提供的一个调试工具，官方文档 的最开始，安装里面里面有说到，推荐使用 VUE DevTools 进行调试。

可以看到 APP 节点也就是前面说到的主容器，它下面有一个节点 Hello ，也就是 router-view，Hello 节点其实也是一个组件，对应这 Hello.vue 这个文件，那么这个 router-view 是怎么变成 Hello 的呢？那就需要看 router 文件夹下面的 index.js 这个文件了。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})

代码也很少，做的事情和 main.js 很像，导入 Hello 组件，生成 router 对象，router 对象里可以有很多个路由，这里只注册了一个，可以看到，每个路由包含了三个字段，path , name , component .

所以我们现在可以这么理解，在 App.vue 里面的 router-view 节点之所以会显示为 Hello 组件的内容，就是因为 Hello 组件被注册到了这个路由的入口地址，这里如果把 Hello 组件换成我们自己的组件，那么界面就会变成我们自己写的界面。

比如我新增一个组件 Home.vue

<template>
<div>
<p>This is HomePage</p>
</div>

</template>

然后将 index.js 改成

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})

那么页面变成了：



写到这里相信大家也都知道了以后我们的页面要怎么写了，大概思路就是先写组件，然后将组件在路由里面注册，然后在页面上切换路由就会显示不同的界面。

这一篇先讲到这里，下一篇开始就是如何慢慢的完成一个单页应用。这个系列文章其实也是我自己的一个学习过程，边学边写，加深理解，方便自己以后查看同时也造福后来人。