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

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

文件结构

VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用(二)_第1张图片

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

  1. src 文件夹 :
    1. assets 文件夹:存放各种资源文件,如图片等
    2. components 文件夹 :各种 .vue 组件
    3. router 文件夹 :包含 index.js ,项目路由器配置文件
    4. App.vue 主要布局容器 (CLI生成)
    5. main.js 项目入口文件(CLI生成)
  2. static 文件夹 : 可以存放被项目引用的静态文件,如 index.html 需要的 favicon.ico、js插件 etc.
  3. 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: '',
  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 单页应用的核心之一–路由的具象化。在我们的单页应用中,每个路由对应着一个页面,切换路由就可以相应的改变页面显示内容。

看一张调试模式下的结构图:
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用(二)_第2张图片

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 HomePagep>
  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 单页应用(二)_第3张图片

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

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

你可能感兴趣的:(Vue,Vue,爬坑之旅)