重点

ref 组件类型实例

import LoginAccount from './login-account.vue' // vue组件
const accountRef = ref<InstanceType<typeof LoginAccount>>()

const handleLoginClick = () => {
  accountRef.value?.loginAction()
}

• 组件——类
• 组件实例——对象

Vuex 要点

• Vuex 中保存的数据在刷新后会消失！所以在main.ts中写从localstorage中获取数据并写入Vuex！

Vuex & TS 结合

store/types.ts

import { ILoginState } from './login/types'

export interface IRootState {
  name: string
  age: number
}

export interface IRootWithModule {
  login: ILoginState
}

export type IStoreType = IRootState & IRootWithModule

store/index.ts

import { useStore as useVuexStore } from 'vuex'

export function useStore(): Store<IStoreType> {
  return useVuexStore()
}

使用

import { useStore } from '@/store'

const store = useStore()
const userMenus = computed(() => store.state.login.userMenus)

template 中别名

• @映射到src，在template中需要使用~@

  <img class="img" src="~@/assets/img/logo.svg" alt="logo" />
  

icon

el-icon 最新使用指南 SVG Icon (opens new window)

动态路由

• 前端路由（no）

• 前端配置url映射componet

  可以利用coderwhy npm包进行生成

• 后端返回url+componet

封装配置Form 🔥

• 表单
• 查询
• 重置

封装配置Table 🔥

• table
• 分页
• 单选、多选
• 序号
• 按钮插槽、右侧option插槽等
• 其他动态插槽
• 树表格

可视化 🔥

前端进行数据可视化的工具非常多，常见的框架:

• ECharts 、g2、d3、vis、hightChart等等;
• g2框架封装:bizcharts(react) viser(vue);
• 地理可视化: g2、L7、高德的 Loca、 菜鸟的 鸟图;
• 3D可视化:three.js;

echarts 封装

const chartRef = ref(); // 通过该方式可以获取dom对象

注意要在 onMounted 中 init，否则还未绑定模板，获取不到 dom

Hooks 封装！

useEchart.ts

import * as echarts from 'echarts'

import chinaMapData from '../data/china.json'

echarts.registerMap('china', chinaMapData)

export default function (el: HTMLElement) {
  const echartInstance = echarts.init(el)

  const setOptions = (options: echarts.EChartsOption) => {
    echartInstance.setOption(options)
  }

  const updateSize = () => {
    echartInstance.resize()
  }

  window.addEventListener('resize', () => {
    echartInstance.resize()
  })

  return {
    echartInstance,
    setOptions,
    updateSize
  }
}

base-echart.vue

<template>
  <div class="base-echart">
    <div ref="echartDivRef" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, withDefaults, watchEffect } from 'vue'
import { EChartsOption } from 'echarts'
import useEchart from '../hooks/useEchart'

// 定义props
const props = withDefaults(
  defineProps<{
    options: EChartsOption
    width?: string
    height?: string
  }>(),
  {
    width: '100%',
    height: '360px'
  }
)

const echartDivRef = ref<HTMLElement>()

onMounted(() => {
  const { setOptions } = useEchart(echartDivRef.value!)

  watchEffect(() => {
    setOptions(props.options)
  })
})
</script>

<style scoped></style>

SVG & Canvas

一般来说，Canvas 更适合绘制图形元素数量非常大(这一般是由数据量大导致)的图表(如热力图、地理坐标 系或平行坐标系上的大规模线图或散点图等)，也利于实现某些视觉特效;

但是，在不少场景中，SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、渲染性能略高、并 且用户使用浏览器内置的缩放功能时不会模糊;

那么到底选择哪一个渲染器呢?

• 在软硬件环境较好，数据量不大的场景下(例如 PC 端做商务报表)，两种渲染器都可以适用，并不需要太多纠结;

• 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器;

  • 比如在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力)，可以使用 SVG 渲染器来进行改善;
  • 大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图等，SVG 渲染器可能效果更好;
  • 数据量很大、较多交互时，可以选用 Canvas 渲染器

地图