【vue3+antd-design-vue项目】-- 快速上手vue3__前端__Vue.js
发布于 9 个月前 作者 banyungong 1113 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

highlight: a11y-dark theme: cyanosis

项目简介

使用vue3.2最新的setup语法搭建,并且封装了部分钩子函数,是用来学习vue3的一个良好选择,并且,项目集成了实际开发中常用的功能,例如:权限管理、懒加载、虚拟滚动、复杂业务表格、markdown、富文本、excel等第三方插件,可以作为一个参考项目继续开发

项目地址 :github

预览地址:点击预览

image-20211103092008743

技术栈

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-saverXLSX,使用Export2Excel.js提供的导出文件接口

import('@/plugins/Export2Excel').then(({ arrayToExcel }) => {
    arrayToExcel({ header, data, fileName }) // 导出文件
})

导出zip

下载JSZipfile-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

回到顶部