白嫖部署 vercel
,具体预览:https://tsx-naive-admin.vercel.app
vercel
现在需要翻,国内网络可以访问: https://tsx-naive-admin.netlify.app/
临时起意,恰好有点时间,就瞎搞了,也遇到不少问题
-
vite + tsx
的写法 热更新会有一些问题,所以必须要包裹在defineComponent()
选项当中 -
naive-ui tsx 的写法,提示真的很爽,也因此发现了几个小问题,也蹭了几个
PR
-
这一项已经不再推荐使用,新的提交 commit close reactivityTransform 已经关闭 对于
Reactivity Ttransform
,说说看法,这个玩意不熟属实有点坑,尤其在你做封装导出的再用的时候,不能准确把握数据的类型,就特别容易出 现不在响应式的bug
,在tsx
的写法中尤其需要注意 -
关于 Suspense,代码中写到的应该正确的方式。不知道在
vue
官网还是在vue-router
官网看的的两一种写法,在tsx
中是会出现KeepAlive
重复性渲染视图的问题 -
对于 unplugin-vue-components,在
tsx
中就不要用了吧。我记得好像是能够识别,但是是没有ts
类型提示的,按需导入也挺好用的 -
还有在
views
页面这一块,细心的都可能发现了我文件夹下主文件还是用的和文件名一样的.tsx
文件,如/home/home.tsx
,这是为了vite
打包之后生成chunk
的文件名,用index.tsx
命名主文件,打包后都是index.[hash].js
-
组件二次封装,这里涉及到
props
的类型提示问题,目前想到的办法是直接使用配置项extends: NXxx
,具体可查看 DButton,感觉应该是一种比较完美的解决方式 -
css modules
,使用了less
,开启了localsConvention: 'camelCase'
,查看 config。本来准备上 unocss 的,但是吧,
Naive-UI
组件比较多,大部分布局组件都能够实现,对大量的自定义样式需求不大,而且想要适配主题色,也可能需要一些相关的预设(说实话,我只会写类名,预设不太整明白) -
关于
TS
,我是菜鸡中的菜鸡,代码里面应该写了很多让大佬一看就摇头的 类型标注。没办法,慢慢搞慢慢搞 -
还有等等,想起来再说吧
git clone git@github.com:WalkAlone0325/tsx-naive-admin.git
cd tsx-naive-admin
pnpm build
=>pnpm preview
- 或者使用
serve
等静态服务,如serve dist/
git clone git@github.com:WalkAlone0325/tsx-naive-admin.git
cd tsx-naive-admin
pnpm i
pnpm dev
后台管理系统基本架子
- Pinia + Vue-Router + Naive-UI
- 主题色
- 全局配置组件
- 多标签
- 多级菜单
- 面包屑
- 侧边折叠
- 等吧