记录随笔、学习笔记，项目总结，问题以及解决方案
zero-admin 是一个后台前端解决方案，它基于 vue3 和 ant-design-vue 实现。它使用了最新的前端技术栈【vue3+vue-router+typescript+axios+ant-design-vue+pinia+mockjs+plopjs+vite+Vitest】实现了动态路由、权限验证；自定义 Vue 指令封装；规范项目代码风格；项目内置脚手架解决文件创建混乱，相似业务模块需要频繁拷贝代码或文件问题；Echarts 图形库进行封装；axios 请求拦截封装，请求 api 统一管理；通过 mockjs 模拟数据；对生产环境构建进行打包优化，实现了打包 gzip 压缩、代码混淆，去除 console 打印，打包体积分析等；提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型
<!--
id:标识元素的唯一性
width:画布的宽度
height:画布的高度
-->
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
console.log('ctx :>> ', ctx)
// 3.绘制图形
// 3.1绘制矩形 .fillRect(位置x,位置y,宽度,高度)
ctx.fillRect(100, 100, 100, 100)
</script>
项目中已经包含 ant-desing-vue 组件库和css预处理库scss配置
yarn add @fullcalendar/vue
yarn add @fullcalendar/core @fullcalendar/interaction @fullcalendar/timegrid
yarn add tippy.js
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
高德地图，微信小程序 DOM： https://lbs.amap.com/api/wx/summary 微信小程序插件: https://lbs.amap.com/api/wx/download
yarn add react-router-dom redux axios antd @ant-design/icons sass
提示
函数组件：使用 js 函数或者箭头函数创建的组件