Project introduction

Using vue3.2’s latest setup syntax and encapsulating some of the hook functions is a good choice for learning vuE3, and the project integrates features commonly used in real-world development, such as: Permissions management, lazy loading, virtual scrolling, complex business tables, Markdown, rich text, Excel and other third-party plug-ins can continue to be developed as a reference project

Project address: Github

Preview address: Click preview

Technology stack

vue3 + antd-design-vue

Project directory

├─ Public # Static Resources │ ├─ SRC # Source │ ├─ API # All Request │ ├─ Assets # Static Resources │ ├─ FavIcon │ ├─ I18N # International Language │ ├─ Layout # Layout │ ├─ Router # Route │ ├─ Store # global store management │ ├ ─ ─ utils # global public method │ ├ ─ ─ views # page views all │ ├ ─ ─ App. Vue # entry page │ └ ─ ─ main. Js file # entry Load module initialization ├ ─ ─ # vite vite. Config. Js project configuration │ ─ ─ index. The HTML # HTML project template │ ─ ─ for server js # websocket server file └ ─ ─ package. The json # package. JsonCopy the code

The main function

  • Rights management
  • internationalization
  • A nested menu
  • Breadcrumb navigation
  • Print documents
  • Export excel
  • Export the zip
  • File download
  • markdown
  • Rich text editor
  • The complex form
  • Axios cancels the request
  • Lazy loading
  • Virtual list
  • websocket

Detailed implementation of functionality

Page route permission management

The front-end defines the routing table and extracts the routes owned by the user through the identity identifiers returned by the back-end

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'[,},},],]Copy the code

After a route is matched, it is appended to the routing object by router.addRoute

Button command permission

Vue3 makes some changes to the naming of hooks

  • He inserted – mounted
  • ComponentUpdated – updated
function has(el, binding) {
	/ /...
}

export default {
  mounted: (el, binding) = > has(el, binding),
  updated: (el, binding) = > has(el, binding),
}

Copy the code

A nested menu

Refer to the case of single file recursive menu provided by ANTD-VUE-Design to screen out the menu items to be displayed when adding routing permissions

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
}
Copy the code

internationalization

Internationalization creates an i18N object using the createI18n method

import { createI18n } from 'vue-i18n'
const i18n =createI18n({
    locale:'zh_CN'.messages: {zh_CN: {// ...
        }
    }
})
app.use(i18n)
Copy the code

The chart

  • Autonavi map and Baidu Map were introduced
  • Echarts was introduced, encapsulated intouseEchartsThe hook function is exposed to the outside world to create instances of Echarts ICONS that echarts5 can import on demand when used
// Introduce the Echarts core module, which provides the interface required for echarts use.
import * as echarts from 'echarts/core'
// Introduce bar Chart and Chart with suffix Chart
import { BarChart, LineChart, ScatterChart } from 'echarts/charts'
// Introduce prompt box, title, cartesian Component, Component suffix is Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  VisualMapComponent,
} from 'echarts/components'
// Introduce Canvas renderer. Note that introducing CanvasRenderer or SVGRenderer is a necessary step
// import { SVGRenderer } from 'echarts/renderers'
import { CanvasRenderer } from 'echarts/renderers'

import { MapChart, EffectScatterChart } from 'echarts/charts'
// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  ScatterChart,
  CanvasRenderer,
])

export default echarts

Copy the code

Export excel

Download file-Saver and XLSX and use the interface provided by Export2Excel. Js to export files

import('@/plugins/Export2Excel').then(({ arrayToExcel }) = > {
    arrayToExcel({ header, data, fileName }) // Export the file
})
Copy the code

Export the zip

Download JSZip and file-Saver and use export2zip.js

import('@/plugins/Export2Zip').then(({ txtToZip }) = > {
    txtToZip(header, data, fileName, fileName)
})
Copy the code

Markdown editor

Download vditor

<div id="vditor"></div>
Copy the code
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: () = > {
        // Callback method after asynchronous rendering is complete
        setTimeout(() = > {
          contentEditor.value.setValue('hello,Vditor+Vue! ')},2000)},}))})Copy the code

Rich text editor

Download the 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'].// Bold italic underscore strikeout line
        ['blockquote'.'code-block'].// Reference code blocks
        [{ list: 'ordered' }, { list: 'bullet'}].// Ordered, unordered list
        [{ indent: '1' }, { indent: '+ 1'}]./ / the indentation
        [{ size: ['small'.false.'large'.'huge']}],// Font size
        [{ header: [1.2.3.4.5.6.false]}],/ / title
        [{ color: []}, {background: []}],// Font color, font background color
        [{ align: []}],// Alignment
        ['clean'].// Clear the text format
        ['link'.'image'.'video'].// Link, image, video,}})})Copy the code

Print – js to print

Print-js can print images, HTML, JSON, and PDF files, as an example

import print from 'print-js'
print({
    printable: 'print-html-content'.type: 'html'.header: 'Printed title'.targetStyles: [The '*'].// The style to process, * represents all styles
})
Copy the code

Common development requirements

Axios cancels the request

  • Controllable requests to prevent repeated requests for data

Complex business form

  • Table add delete change check, screening, sorting and other functions

File download

  • Download files in different formats

Lazy loading of images

Virtual list

Development skills

Development Environment Configuration

Configure the. Env. development and. Env. production files to distinguish between different environments

Exporting files in batches

Vite does not support require.context. The alternative uses import.meta.glob to export files

Write in the last

The whole development process is not much different from VUe2, just change some API writing, the only pain point is that the third party plugins used before may not support vue3 at present, but it takes some time to find a replacement. Vue3.2 has updated a lot of syntax sugar and can reduce a lot of code