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

admin
0 评论
/ /
1526 阅读
/
5498 字
13 2023-02

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

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

2.2 其它插件

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
    暂无数据