Vue3-tiger-admin：基于vite3, vue3, pinia开源免费的管理后台模板

今天简单总结一下Vue3-tiger-admin开发的心得，回忆过去是为了看清未来。先来看一下整体的效果:

预览地址： http://jsfront.gitee.io/vue3-tiger-admin/
仓库地址： https://gitee.com/jsfront/vue-admin-cn 技术栈为：Vite, Vue3, Arco, Pinia, VueUse, Axios, UnoCSS

1. Vue3-Tiger-Admin介绍

Tiger 项目定位是一款业务项目前的模板项目，就是基于Vue3技术框架下的各种组件和第三方资源整合的练习场，基于这个大前提下，在技术融合和功能的实现上更为灵活。

1.1 基本介绍

1.2 如何发布上线

打包后dist提交到git，然后在gitee仓库中，服务`gitee pages`中发布上线，需要身份证实名认证。

2. 技术介绍

2.1 基本介绍

Vite Vue3推荐与Vite进行搭配，优点热更新是相当的快，但是首次加载的编译需要等待一段时间，但也不长，可以忍受。因为太好用了，所以不得不在React项目上尝试一下，结果只能说，很香。参见这个项目 https://gitee.com/jsfront/react-tiger-admin，创建React还是基于这个命令：
```
$ pnpm create vite
```
更多了解：https://cn.vitejs.dev/
Vue3 最大的体验，更为灵活，代码实现方案更为多选。如果将来某天换为React技术栈，复用的代码可能不少，如果是jsx可能更多。但这项目选择依然用*.vue模板的初衷时如果接手维护其它项目时技术上出现陌生感，不能快速上手。保持对各种技术的博爱和激情也是一个技术人应有的素养。
Arco 这次选择Arco时，Element在2.0的时候已经用腻了，正好看看其它的框架的时候，被朋友安利了这款。初期比较下来，组件数量多，单个组件功能更为强大，所以就选择这款呀。整体用下来，用法还是与Element有不少差别，如果以前有andv的项目，部分代码到可以复用，因为都是<a-* />的标签。相比于Element在组件的细节和交互动画上还是有不少可以优化提升的地方。比如MessageBox, TreeNode。

在国产框架里边有一款新起之秀，各位可以通过这个链接了解一下：vexipui

Pinia 这款框架与React的Mobx思路极为相似，是吸引了Vuex的优点改进了之后的一个极为灵活的管理工具。
VueUse 这款已经是Vue2项目的标配了，以方便、灵活、巧妙等特点吸引了大部分开发者，而作者也是一个高产且优秀的人，还有一款UnoCSS随后介绍。
UnoCSS UnoCSS依灵活、高速的原子化方式应用在项目中，还是比较好的。

2.2 其它插件

screenfull 主要封装浏览器全屏事件
@iconify/vue 可以灵活引用多处图标，可以上这个网站进行查询 https://icones.js.org/
qrcode.vue 以多种方式生成二维码，可以带Logo
vue3-pdfjs 预览PDFJS
vue3-print-nb 打印页面

2.3 技术栈

技术	说明	官网
Vue3	JavaScript 框架	https://cn.vuejs.org/
Vite	Vite下一代的前端工具链	https://cn.vitejs.dev/
@arco-design/web-vue	前端UI组件库	https://arco.design/vue/
@vueuse/core	Vue工具库	https://vueuse.org/
@iconify/vue	图标字体库	https://www.npmjs.com/package/@iconify/vue
lodash	工具库	https://lodash.com/
Vue3-clipboard	剪贴板	https://github.com/Daizhen1995/vue3-clipboard
Qrcode	生成二维码	https://github.com/soldair/node-qrcode
Md-editor-v3	Markdown编辑器	https://github.com/imzbf/md-editor-v3
Juejin-markdown-themes	Juejin MD主题	https://github.com/xitu/juejin-markdown-themes
Sass	CSS 预编译工具	https://sass-lang.com/
Unocss	原子化CSS	https://github.com/unocss/unocss
Animate.css	CSS动画库	https://animate.style/

2.4 文件结构

├─dist // 打包资源
├─public
│  ├─pdf // pdf测试文档
│  └─tinymce4.7.5 // 富文本
└─src
    ├─api // api文档 
    ├─assets // 静态资源文档
    ├─components // 组件文档
    ├─config // 配置文档
    ├─hooks // hooks
    ├─layouts // 布局文档
    ├─router // 路由
    ├─store // Pinia
    ├─styles // css
    ├─types // ts
    ├─utils // 工具文档
    └─views // 视图层
        ├─basic // 基础
        ├─canvas // canvas
        ├─chart // 图表
        ├─form // 表单
        ├─login // 登录
        ├─map // 地图
        ├─my-component // 组件演练场
        ├─my-pages // 页面演练场
        ├─other // 其它
        ├─table // 表格
        └─video // 视频

2.5 如何在本地运行

根目录下运行 npm install，然后运行 npm dev

// 切换环境
nvm install 16.0.0
nvm use 16.0.0

// 安装依赖
npm install

// 启动项目
npm start

// 清除 node_modules
npm run clean

// 全局安装 rimraf 之后方可使用
npm i rimraf -g

// 清除 node_modules 重新安装依赖
// 等同于 npm run clean && npm install
npm run reinstall