创建页面

项目中所有页面都放在views文件夹里面

文件或文件夹命名要有意义

如果要新建的页面存在多个嵌套关系，按照下面步骤依次创建即可

此处以创建一个直播管理页面为例

在views文件件下创建要展示的页面，新建存放所有页面最外层文件夹 liveManage
因为直播管理底下包含了2个页面创建直播/监控直播所以在 liveManage 文件夹里面在创建放置2个页面的文件夹 establishLive 和 monitorLive
创建直播和监控直播为我们要展示的页面，在establishLive 和 monitorLive 文件夹下分别新建 index.vue 文件（index.vue即为要展示的页面）

index.vue 页面模板

<template>
    <div>
    
    </div>
</template>

<script >
    export default {}
</script>

创建路由

每个路由的name不可重复且不能命名为index （保证路由name唯一）

主菜单的 component:Layout不需要改动，子菜单的component需要指向要展示的页面即为新建的 .vue文件

在新建完.vue文件之后需要配置路由才能在页面展示，打开项目文件 src – router – index.js创建路由

{
  path: '/liveManage',
  component: Layout,
  name: 'liveManage',
  meta: { title: '直播管理', icon: 'layoutWeb', type: '0' },
  children: [
    {
      path: 'establishLive/index',
      name: 'establishLive',
      component: _import('liveManage/establishLive/index'),
      meta: { title: '创建直播', type: '0' }
    },
    {
      path: 'monitorLive/index',
      name: 'monitorLive',
      component: _import('liveManage/monitorLive/index'),
      meta: { title: '监控直播', type: '0' }
    }
  ]
}

路由结构拆分讲解：

a、主菜单路由配置

{
  path: '/liveManage',
  component: Layout,
  name: 'liveManage',
  meta: { title: '直播管理', icon: 'layoutWeb', type: '0' },
  children: []
}
// a.path – 对应views底下新建的主菜单文件夹（即为 直播管理liveManage 文件夹）
// b.component – Layout此项不需要改动（Layout为独立可复用的页面结构 – 包含页面头部导航和左侧菜单）
// c.name – 对应path中的文件名（例如：path中路径为 /navBar 此时name即为 navBar）
// d.meta – title:对应页面展示菜单项的名称 icon:对应页面展示菜单项的图标（把src – icons – svg 文件里面的所有图表的文件名填入此处即可）

b、子菜单路由配置

{
  path: 'establishLive/index',
  name: 'establishLive',
  component: _import('liveManage/establishLive/index'),
  meta: { title: '创建直播' }
}
// a.	path – 对应主菜单liveManage底下新建的子菜单文件夹里的index.vue文件
// b.	name – 对应path中的文件名，同主菜单一样不能重复且不能命名为index

搭建页面

html代码必须要写在template标签底下的div中，且template标签底下不能出现2个或2个以上的html标签（template 底下的div中可以存在多个html标签）

页面搭建参考组件文档，直接搭建即可。

调用接口

出于好维护的目的 src – api 文件夹底下新建接口文件的时候需每一类都要新建一个文件夹存放，不可把所有的接口都写在一个文件中，src – store – modules 文件夹底下新建的.js文件也同理，每一类要新建一个.js文件存放在一起

找到src – api文件夹在api文件夹底下新建存放直播管理接口的文件夹 live 在liveManageApi文件夹下新建 index.js文件用来定义接口模块。如图：
在新建的index.js文件中添加js代码

import request from '@/utils/request'
// 创建直播
export function addLive(postselectinfo) {
  return request({
    url: 'http://192.168.0.5:7300/mock/5c807e76e04e7106ba522011/example/addLiveData',
    method: 'POST',
    data: postselectinfo
  })
}
// a.export function xxx () {} 为定义要导出的接口模块
// b.url – 接口地址  method – 请求方式  data – 数据
// c.es6模块主要有2个功能 export 和 inport

// export 用于对外输出本模块变量的接口
// import 用于在一个模块中加载另一个含有export接口的模块
// postselectinfo - 接口参数

找到 src – store – modules 文件夹，在modules文件夹下创建一个.js文件用来加载第2步中创建的接口模块 – 在modules文件夹下新建 liveInterface.js 文件。如图：

在新建的liveManage.js文件中添加js代码:

import {
  addLive
} from '@/api/live/index'
const liveInterface = {
  actions: {
    // 创建直播表格数据
    AddLive ({ commit }, postselectinfo) {
      return new Promise((resolve, reject) => {
        addLive(postselectinfo).then(response => {
          resolve(response.data)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
export default liveInterface
// a.Import 用于加载第2步中创建含有export接口的模块
// b.actions里面的AddLive 和addLive 为第2步创建接口模块的时候起的名字
// c.AddLiveTable() {}  --  名字的首字母大写

找到 src – store – index.js 文件。如图：

在文件里面通过import 引入第3步创建的.js文件

import liveInterface from './modules/liveInterface'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    liveInterface
  },
  getters
})
export default store

在需要调用接口的 .vue页面中调用接口

a. 因为vue中方法需要放在methods中，所以在建好的 export default {} 中添加

export default {
  data() {
    return {
      postList: {}
    }
  },
  methods: {
    fetchData() { // 调用接口
      this.$store
        .dispatch('AddLive', this.postList)
        .then(res => {
          console.log(res)
        }).catch((err) => { console.log(err) })
    }
  }
}
// dispatch接收2个参数 接口名称（创建的首字母大写的名称 AddLive） 接口需要传递的参数 实例中this.postList为一个变量需要在data return中定义 
// res即为后台返回的数据
// catch 错误捕获

此时接口调用代码完成，如果需要在页面加载完执行调用接口 Vue 中提供了钩子函数在对应的钩子函数中调用调用接口方法即可

vue 钩子函数

vue 的生命周期是： 
vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

初始化时间和生命周期结束的时间点上 beforeCreate 会执行（创建vue实例，vue实例进行一个基础的初始化的时候自动调用 beforeCreate 函数）

进入完 beforeCreate 函数vue会继续处理一些外部的注入和双向的绑定的相关内容

以上注入和绑定完成之后基本上vue的初始化实例就完成了 在这个节点上 created 会执行

初始化基本完成之后 vue会询问实例中是否有el选项 （分为2条支线 yes no）

       yes -- 会继续询问实例上是否有 template 属性 （分为2条分支 yes no）
       
       yes --  会用已有的template模板进行渲染
       
       no -- 会把el外层的html当做模板（vue实例没有模板，没有template的时候会把el上绑定的div当做模板来进行渲染）

在页面渲染之前 beforeMount 会执行（模板和数据相结合，即将挂载到页面上之前的时间点）

当 beforeMount 执行完毕之后，模板结合数据生成最终vue实例的dom元素会被挂载到页面之上（内容已经被显示到页面之上）

页面挂载完成之后 mounted 会执行

*** beforeUpdate  updated (数据发生改变的时候这两个钩子会被执行)  vm.test = 'dell'

*** 数据发生改变还没有重新渲染之前 beforeUpdate 会执行

*** 当重新渲染之后 updated 会执行


beforeDestroy -- vm.$destroy()被调用的时候会被执行（即组件即将被销毁的时候）  vm.$destroy()

destroyed -- 组件完全被销毁之后 destroyed会执行

← 框架文件夹说明

# 创建页面

# index.vue 页面模板

# 创建路由

# 搭建页面