Vue实战篇十八：搭建一个知识库框架

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录
Vue实战篇十八：搭建一个知识库框架

---

一、背景

• 知识库框架需包含三部分：。

1. 头部菜单：主要放置知识库的各种分类
2. 侧边树：放置知识库分类所对应的目录树
3. 内容区：根据目录树中选择的节点，展示文档列表

• 布局如下：
  

二、整体布局实现

• 分别编写头部、侧边、内容组件
• 并通过Container 布局容器放置头部、侧边、内容组件，实现页面的基本结构。

<template>
  <div>
 	<!-- 布局 -->
    <el-container style="height: 100% !important;">
      <el-header> <Top ref="wikiTop" /></el-header>
      <el-container style="height: 100% !important;">
        <el-aside> <Sidebar ref="wikiSidebar" /></el-aside>
        <el-main> <Document :purchase="true" /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// 头部组件
import Top from './top'
// 侧边组件
import Sidebar from './sidebar'
// 内容组件
import Document from './document'
export default {
    
  components: {
     Top, Sidebar, Document },
  data() {
    
    return {
    
    }
  },
  methods: {
    
  }
}
</script>

三、头部组件

• 通过Navbar导航条实现头部组件

<template>
  <div class="fixed-header">
    <el-menu
      class="menu"
      :default-active="activeIndex"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="首页"> <Logo :collapse="false" /></el-menu-item>

      <el-submenu index="产品开发">
        <template slot="title">产品开发</template>
        <el-menu-item index="产品1">产品1 </el-menu-item>
        <el-menu-item index="产品2">产品2</el-menu-item>
      </el-submenu>

      <el-menu-item index="材料开发">材料开发</el-menu-item>
      <el-menu-item index="平台开发">平台开发</el-menu-item>
      <el-menu-item index="知识沉淀">知识沉淀</el-menu-item>
      <el-menu-item index="知识地图">知识地图</el-menu-item>

      <el-menu-item v-if="screenWidth > 1024" index="0">
        <el-input v-model="keyWord" placeholder="输入关键词搜索" class="input-with-select">
          <el-button slot="append" size="mini" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-menu-item>
      <el-menu-item v-if="screenWidth > 1024" index="1" style="float: right">
        <div>
          <el-tooltip content="消息中心" effect="dark" placement="bottom">
            <img :src="Message" class="user-avatar" />
          </el-tooltip>
          <el-tooltip content="个人中心" effect="dark" placement="bottom">
            <img :src="Avatar" class="user-avatar" />
          </el-tooltip>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import {
     mapGetters } from 'vuex'
import Logo from './Logo'
import Avatar from '@/assets/images/avatar.png'