Vue+Quill 在项目中集成导航栏及富文本编辑器

大家好，我是小张~

之前不是说要做一个项目么，上篇文章实现了一个单网页应用，集成了图片OCR文本识别 功能模块：PaddleOCR + Django 实现一个OCR在线识别网站，一起来玩呀，

本篇将沿着之前的工作继续完善项目，由于之前单页面体验很不好，只有一个页面需要用户自己在浏览器里面输入url 地址才能展现，

如果项目中有一个导航栏的话那用户体验就非常棒了，每个导航菜单栏绑定一个路由，连接一个单页，用户点击菜单栏的方式来实现页面跳转

因此，本篇文章主要开发的功能有两点：

• 1，页面导航栏开发，以及路由绑定；
• 2，在之前项目页面中再添加一个菜单：富文本编辑器菜单

本次项目完善因为主要是页面视觉方面的一些完善，主要改动的是前端 Vue 页面，后端 模块暂时没有改动。

最终效果如下：

此时 Vue脚手架的路径树如下；

│  .gitignore
│  babel.config.js
│  jsconfig.json
│  list.txt
│  package-lock.json
│  package.json
│  README.md
│  tsconfig.json
│  vue.config.js
│              
├─public
│      favicon.ico
│      index.html     
└─src
    │  App.vue
    │  main.ts
    │  router.ts
    │  shims-vue.d.ts
    │  
    ├─assets
    │      logo.png
    │      
    ├─components
    │      HelloWorld.vue
    │      
    ├─layout
    │      MainContent.vue
    │      SideBar.vue
    │      
    └─page
        ├─editor
        │      htmlEditor.vue
        │      
        └─paddle
                textOcrPage.vue
                

加入导航栏

导航栏用到了 Element-Plus 中的 Menu组件，因为目前项目中所有的导航栏信息比较少，不是通过后端接口获取，因此这里导航栏相关信息都是写死的，但每个meau-item关联一个路由路径，使得用户通过点击方式来进行跳转。

SideBar.vue

<template>
    <aside class="site-sidebar">
        <div class="site-sidebar__inner">
            <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="1"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="1"   @click="$router.push({ path: '/' })">
                    <el-icon><location /></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                <template #title>
                    <el-icon><icon-menu /></el-icon>
                    <span>DL模型</span>
                </template>
                    <el-menu-item index="2-1" @click="$router.push({ path: '/paddle-ocr' })">
                        <span>OCR 识别</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3" >
                    <template #title>
                    <el-icon><document /></el-icon>
                    <span>工具Utils</span>
                    </template>
                    <el-menu-item index="3-1" @click="$router.push({ path: '/html-editor' })">
                        <span> 富文本</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="4">
                    <el-icon><setting /></el-icon>
                    <span>待开发</span>
                </el-menu-item>
            </el-menu>
        </div>
    </aside>
</template>
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}
</script>

<style  scoped>
.site-sidebar{
     position: fixed;
    top: 0px;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width: 230px;
  overflow: hidden;
  background-color: #545c64;
}
.site-sidebar__inner{
    height: 100%;
    padding-bottom: 15px;
    overflow-y: scroll;

}
</style>

布局组件

导航栏组件定义好之后，需要定义下整体内容布局：一般导航栏放置在左侧，右边放置内容区，因此可以定义一个主组件，左侧为导航栏组件，右边通过 vue-router 的<router-view> 插槽机制根据路由切换来控制右侧内容区内容的变换,

布局组件 MainContent.vue 如下：

<template>
  <div>
    <side-bar>
    </side-bar>
     <div class="site-content__wrapper">
        <router-view></router-view>
  </div>
  </div>
</template>
<script>
import SideBar from './SideBar.vue'
import {ref}  from 'vue'


export default{
    setup() {        
    },
    components: {
        SideBar
    }
}
</script>
<style scoped>
.site-content__wrapper{
   margin-left: 230px;
}
</style>

定义嵌套路由

嵌套路由的 router-view 的使用规则，需要在父组件路由中配置 children项，而children是一个数组路由，如下方代码块router.ts所示，定义了三个路由路径分别对应三个子组件（由于vue3版本建议开发者使用typescript 作为主要开发语言，因此这里大部分脚本用 ts代替 js 集成）：

/' ------------------->HelloWorld.vue

/paddle-ocr ------------------->textOcrPage.vue

/html-editor ------------------->htmlEditor.vue

import {createRouter,createWebHashHistory} from 'vue-router'
const routes = [
    {
        path: '/',
        component: ()=>import('@/layout/MainContent.vue'),
        children: [
            {
                path: '/',
                component:()=> import('@/components/HelloWorld.vue')
            },
            {
                path: '/paddle-ocr',
                component:()=> import('@/page/paddle/textOcrPage.vue')
            },
            {
                path: '/html-editor',
                name:'HTML-EDITOR',
                component:()=> import('@/page/editor/htmlEditor.vue')
            },
        ]
    },   
]
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

export default router;

然后再在 main.ts脚本中 引入router，挂载到主组件中

import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

小结

好了，以上就是本篇文章的全部内容了，主要分为两方面内容：1，将 Quill 富文本组件集成在 Vue脚手架中，2，对项目进行完善，加入导航侧边栏来实现路由跳转。

项目全部代码获取方式，关注微信公号：小张Python，后台回复关键字：dl_interated 即可