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
    }
  ]
})

那么页面变成了：
这里写图片描述

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

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

VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（二）

文件结构

猜你喜欢