- 🎉 Admin3 2.0.0 更新!!
- 更新支持 primevue
- 利用 primevue 实现自定义动态主题、自定义主题色、自定义背景色
- 添加 primevue 示例页面
- 修复侧边栏动画不同步
- 将文档摘除,删除
@nuxt/content
模块,单独建立 admin3-docs 文档项目,让本项目更“干净” - 优化图标组件,组件名
<AdminIcon>
改为<Icon>
,本地 svg 文件引入作为 plugins 只引入一次 - 更新所有依赖:nuxt->3.13.2, element-plus->2.8.4, primevue->4.1.0
- 更新 layout 配置功能
- 更新 colorTheme 配置功能
- 优化后台首页
- 优化富文本编辑器演示页面
- 更新至 [email protected]
- 调整项目文件夹结构,源码放入
/src
文件夹,模拟后端从/server
移至/server-mock
文件夹。 - 优化请求的封装,见
/src/utils/request.ts
。 - 去除 content 模块,将文档内容移除本项目,本项目仅作为前端模板使用,使项目初始化更加干净。
- 更新至 [email protected]
- 修复一些 pdf 在线预览、表格拖拽的 bug
- 新增 tinymce 富文本编辑器的 demo,像之前说的,决定项目中不做无新功能性的组件封装,这里直接引用了 tinymce 官方的组件,需要封装的话建议开发者自行封装。富文本编辑器我也是在网上找了好些,主要想实现从 word 中粘贴文本过来时保留样式,像 quill 、 wangeditor 等好些都不行。最后还是选取了最火的 tinymce 作为示例。
- 新增可拖拽表格的 demo
- 封装了省市区选择器,并新增了各种场景 demo。
- 新增了一些 demo 注解。
- 还是想把项目文档结构层次清晰标准一些,把 layout 中的一次性组件移至 layout 文件夹下,并对 component 文件夹下的组件进行了统一命名。
- 新增省市区选择器 demo
- 删除了针对 el-pagination 的封装。决定该项目中不做无新功能性的组件封装,这样会产生新的 api 而影响二次开发。尽量以 demo 的形式丰富组件。
- 做了些文档的更新,搬运了 Nuxt3 的项目结构文档、Vue3 代码风格文档、更新了路由文档、配置文档。
- 新增数字动画 demo(直接使用了
vueuse
的useTransition()
函数。
nuxt
使用的nitro
服务器自带storage layer
(unstorage),可以先不纠结使用轻量级数据库了,可以直接使用unstorage
的fs driver
就实现了我梦寐以求的利用文本建立可增删改查的轻量数据库存储功能。:grinning:- 可惜 netlify 不支持 fs 文件写入功能,不过利用
unstorage
默认的in memory driver
可以在 netlify 上使用。:thumbsup:
- 完成页面的
transition
动画,本来想用nuxt
自带的 transition 功能,但感觉还是 keepalive 的 bug 导致实现不了,所以直接用的 Vue 的<transition />
组件,通过给页面主内容加了一个v-show
判断,然后包裹在<transition />
组件中顺利实现。并添加了不同的动画选项放在布局设置中自定义切换。 - 下步该做后端
mock
和轻量级数据库的集成了,还在纠结要不要用mongodb
。
- 完成 tagsView 功能,开启了全局 keepalive,等 nuxt3 修复了 keepalive 的 bug 后再加入路由的选择性缓存功能。
- 修复了前面的一些 bug:
configStore
中要优先读取 localstorage 中的数据时要用??
而不是||
,否则不能正确获得false
值。
- 今天本来想把 tagsView 功能做了的,结果捣鼓了一天的 keep-alive, 最后发现是 nuxt3 的一个 bug:https://github.com/nuxt/framework/issues/8367,希望赶紧能修复。
- 🎉 将 App.config 写进 Localstorage,实现边栏颜色、主体深色、边栏宽度的页面布局自定义并缓存。黑边栏配白主体还是挺好看的。
- 发现
useToggle()
返回的是一个function
,使用call()
才能执行,也不知道用的对不对,不过总算实现流畅的切换了。 - 更新
pinia
使用方法,用storeToRefs()
方法来获得 State 的 ref ,比$subscribe
方法更简洁。 - 实现侧边菜单折叠。
- 实现顶栏面包屑导航显示/隐藏。
Icon
演示页面中新增根据图表名称搜索功能。
- 使用 NavigateTo() 并设置
{ replace,true }
可以实现重定向(不记录 router 历史) - 新增 Element-Plus 的演示页
- 新增布局组件
<AdminContainer />
,实现固定header
,footer
, 内容填满主区域,页面有较多内容时会在侧面产生滚动条。
- 实现图标演示页面,新增了
IconifyOnline
组件,实现在线图标引入。搞了好久图标引入,离线的只能按需引入,否则打包过大会出问题。 - 新增
AdminContainer
组件,实现主体内容的 flex 布局,使header
和footer
插槽能够固定,中间使用 element-plus 的scroll
组件。
- 将
SvgIcon
组件改写成通用的Icon
组件,即可以使用i-
引入iconify
图标,又可以使用svg-
引入svg
图标 - 实现了后端接口传路由:
@/server/api/routers.get.ts
- 添加路由守卫:
@/middleware/auth.global.ts
- 实现边栏菜单、顶栏导航面包屑
- 感觉每天都在学习
css
,更新了后台管理导航的layout
,把使用指南的所有样式变量加上了doc
前缀予以区分,并markdown
渲染的样式单独组件中。 - 准备开始撸后台管理的路由
- 今天遇到一个大坑:
localStorage
只存在于客户端中,基于ssr
的nuxt
要使用的话,要注意两点:- 页面中要使用
<ClientOnly>
pinia
中要用到skipHydrate()
的辅助函数
- 页面中要使用
- 放弃
gh-pages
了,改用netlify
零配置成功!!而且开启了ssr
。 - 添加
Dockerfile
- 调研了
token
无感刷新,参照别人代码把login
,logout
功能实现了,在pinia
中使用useCookie
和useSessionStorage
,感觉还是一知半解,后面发现问题再改吧。 - 试了好久使用
github actions
来将代码演示跑在gh-pages
分支,甚至改了项目的baseurl
和ssr
,想让项目生成纯静态页面,感觉还是baseurl
的问题,最后没成功。
- 一直在排查
npm
包管理问题,安装pinia
之后各种报错,按照网上的npm i pinia -f
也不管用。最后放弃npm
,使用yarn
后流畅无比,我以后是yarn
粉了。
- 实现文档的
toc
和navigation
功能。
- 进一步优化
content
中markdown
的css
渲染。参考@nuxt-themes/docus
,结合vuepress
漂亮了不少,新增组件:Alert.vue
(对应vuepress
中的'tip', 'warning', 'danger', 'details'
),Badge.vue
,List.vue
。 - 自己搞了个
logo
,好丑,以后再改吧。
- 完成
content
中markdown
的css
渲染。参考@nuxt-themes/typography
,它用了一个pinceau
的插件,可以在<style>
中使用ts
,为了不让项目引入更多复杂的功能,我把它所有的components/content/Prose组件
全部改写了一遍。
- 删除所有
commitlint
相关内容,仅留下czg
交互式提交,以最简单的方式实现项目提交规范化即可。
- 在
doc Layout
中使用vitepress
的css
样式。 - 完善
guide Layout
- 使用
VueUse
激活Element-Plus
自带的Dark Mode
- 规范化
conventional-changelog
规范化commit
- 集成
content
模块。
前些天找了好多目前开源的 vue 3
admin 框架,发现了几个特别好的,比如:
- vue-pure-admin: 文档特别详细,组件特别丰富。
- vue-next-admin: 组件比较丰富,界面非常干净。
最后还是决定通过造轮子来学习新技术,原因是Nuxt 3.0
刚刚发布,想学习和实现更自由的定制化,就从这里开始吧。
- 使用
Nuxt 3
初始化项目 - 集成
Element UI
- 比较
tailwindCSS
和UnoCSS
,决定尝试使用后者 - 通过
UnoCSS
集成iconify
图标