highlight: a11y-dark theme: cyanosis
项目简介
使用vue3.2最新的setup语法搭建,并且封装了部分钩子函数,是用来学习vue3的一个良好选择,并且,项目集成了实际开发中常用的功能,例如:权限管理、懒加载、虚拟滚动、复杂业务表格、markdown、富文本、excel等第三方插件,可以作为一个参考项目继续开发
项目地址 :github
预览地址:点击预览
技术栈
vue3 + antd-design-vue
项目目录
├── public # 静态资源
│ │── favicon.ico # favicon图标
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directives # 全局指令
│ ├── i18n # 国际化 language
│ ├── layout # 布局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ └── main.js # 入口文件 加载组件 初始化等
├── vite.config.js # vite 项目配置
│── index.html # html项目模板
│── server.js # websocket服务端文件
└── package.json # package.json
主要功能
- 权限管理
- 国际化
- 嵌套菜单
- 面包屑导航
- 打印文件
- 导出excel
- 导出zip
- 文件下载
- markdown
- 富文本编辑器
- 复杂表格
- axios取消请求
- 懒加载
- 虚拟列表
- websocket
功能的详细实现
页面路由权限管理
前端定义路由表,通过后端返回的身份标识提取用户所拥有的路由
export default [
{
path: '/plugin',
name: 'Plugin',
component: () => import('@/layout/defaultRouter.vue'),
meta: {
title: 'plugin',
auth: ['admin', 'user'],
icon: 'BulbOutlined',
},
redirect: {
path: '/excel',
},
children: [
{
path: '/excel',
name: 'Excel',
component: () => import('@/views/plugins-demo/excel.vue'),
meta: {
title: 'excel',
auth: ['admin', 'user'],
},
},
],
},
]
匹配路由成功之后通过router.addRoute
追加到路由对象中
按钮指令权限
vue3对钩子的命名做了一些调整
- inserted → mounted
- componentUpdated → updated
function has(el, binding) {
// ....
}
export default {
mounted: (el, binding) => has(el, binding),
updated: (el, binding) => has(el, binding),
}
菜单嵌套
参考antd-vue-design
提供的单文件递归菜单的案例,在添加路由权限时筛选出需要展示的菜单项
function traversalRoutes(routes, auth) {
const result = []
routes.forEach((r) => {
let { meta, children } = r
if (meta.auth.includes(auth)) {
if (children && children.length) {
r.children = traversalRoutes(children, auth)
}
result.push(r)
}
})
return result
}
国际化
国际化使用createI18n
方法创建i18n
对象
import { createI18n } from 'vue-i18n'
const i18n =createI18n({
locale:'zh_CN',
messages:{
zh_CN:{
// ...
}
}
})
app.use(i18n)
图表
- 引入了高德地图和百度地图
- 引入了echarts,封装成
useEcharts
钩子函数,暴露给外界创建echarts图标实例,echarts5在使用时可以按需引入
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表,图表后缀都为 Chart
import { BarChart, LineChart, ScatterChart } from 'echarts/charts'
// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
VisualMapComponent,
} from 'echarts/components'
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { SVGRenderer } from 'echarts/renderers'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart, EffectScatterChart } from 'echarts/charts'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
LineChart,
ScatterChart,
CanvasRenderer,
])
export default echarts
导出excel
下载 file-saver
和XLSX
,使用Export2Excel.js
提供的导出文件接口
import('@/plugins/Export2Excel').then(({ arrayToExcel }) => {
arrayToExcel({ header, data, fileName }) // 导出文件
})
导出zip
下载JSZip
和 file-saver
,使用Export2Zip.js
import('@/plugins/Export2Zip').then(({ txtToZip }) => {
txtToZip(header, data, fileName, fileName)
})
markdown编辑器
下载vditor
<div id="vditor"></div>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
const contentEditor = ref('')
onMounted(() => {
contentEditor.value = markRaw(
new Vditor('vditor', {
// height: 360,
minHeight: 360,
toolbarConfig: {
pin: true,
},
cache: {
enable: false,
},
after: () => {
// 异步渲染完成后的回调方法
setTimeout(() => {
contentEditor.value.setValue('hello,Vditor+Vue!')
}, 2000)
},
})
)
})
富文本编辑器
下载quill
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// ....
onMounted(() => {
quill = new Quill('.editor-text', {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'], // 链接、图片、视频
],
},
})
})
print-js打印
print-js
可以打印图片、html、json、pdf文件,这里举个例子
import print from 'print-js'
print({
printable: 'print-html-content',
type: 'html',
header: '打印的标题',
targetStyles: ['*'], // 处理的样式 ,* 代表所有样式
})
常见的开发需求
axios取消请求
- 可控请求,防止重复请求数据
复杂业务表格
- 表格的增删改查、筛选、排序等功能
文件下载
- 下载不同格式的文件
图片懒加载
虚拟列表
开发技巧
开发环境配置
配置.env.development
和.env.production
文件区分不同环境
文件批量导出
vite不支持require.context
,替代方案使用import.meta.glob
导出文件
写在最后
整个开发流程与vue2相比没有太大差异,只是更换一些api的写法,唯一的痛点是之前常用的第三方插件目前来说可能并不支持vue3,但是花些时间也都能寻找到替代品。vue3.2更新了好多语法糖,可以减少不少代码量
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 白房子 原文链接:https://juejin.im/post/7026213106581766174