main.ts / main.js中挂载全局的函数名字前面加$

用于区分组件内的函数

时间转换

2个插件：dayjs、momentJS, dayjs更为轻量

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
// dayjs默认不支持utc,使用下面的方法将utc加入dayjs
dayjs.extend(utc)
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'

export function formatUtcString(utcString: string, format: string = DATE_TIME_FORMAT) {
  return dayjs.utc(utcString).format(format)
}

配置文件中的数据

固定的数据存放在配置文件中，动态内容不写在配置文件中

组件上复杂数据的双向绑定

插槽两种书写

来源

跨组件插槽

三层结构中，实现跨组件插槽

将echarts的引用部分放置在hooks内的原因

用于解耦，但项目中使用较多，后期echarts被摒弃或使用其他插件，方便修改调整

import * as echarts from 'echarts'
export function useEchart(el: HTMLElement) {
  const echartInstance = echarts.init(el)
  const setOptions = (options: echarts.EChartsOption) => {
    echartInstance.setOption(options)
  }
  return {
    echartInstance,
    setOptions
  }
}

文件树结构展示 tree

下载

详情请看(网友)