Home

Awesome

tsx-naive-admin

白嫖部署 vercel,具体预览:https://tsx-naive-admin.vercel.app

vercel 现在需要翻,国内网络可以访问: https://tsx-naive-admin.netlify.app/

用了 纯粹的 TSX + Pinia + Reactivity Transform,感觉更完美了

临时起意,恰好有点时间,就瞎搞了,也遇到不少问题

  1. vite + tsx 的写法 热更新会有一些问题,所以必须要包裹在 defineComponent() 选项当中

  2. naive-ui tsx 的写法,提示真的很爽,也因此发现了几个小问题,也蹭了几个 PR

  3. 这一项已经不再推荐使用,新的提交 commit close reactivityTransform 已经关闭 对于 Reactivity Ttransform,说说看法,这个玩意不熟属实有点坑,尤其在你做封装导出的再用的时候,不能准确把握数据的类型,就特别容易出 现不在响应式的 bug,在 tsx 的写法中尤其需要注意

  4. 关于 Suspense,代码中写到的应该正确的方式。不知道在 vue 官网还是在 vue-router 官网看的的两一种写法,在 tsx 中是会出现 KeepAlive 重复性渲染视图的问题

  5. 对于 unplugin-vue-components,在 tsx 中就不要用了吧。我记得好像是能够识别,但是是没有 ts 类型提示的,按需导入也挺好用的

  6. 还有在 views 页面这一块,细心的都可能发现了我文件夹下主文件还是用的和文件名一样的 .tsx 文件,如 /home/home.tsx,这是为了 vite 打包之后生成 chunk 的文件名,用 index.tsx 命名主文件,打包后都是 index.[hash].js

  7. 组件二次封装,这里涉及到 props 的类型提示问题,目前想到的办法是直接使用配置项 extends: NXxx,具体可查看 DButton,感觉应该是一种比较完美的解决方式

  8. css modules,使用了 less,开启了 localsConvention: 'camelCase',查看 config

    本来准备上 unocss 的,但是吧,Naive-UI 组件比较多,大部分布局组件都能够实现,对大量的自定义样式需求不大,而且想要适配主题色,也可能需要一些相关的预设(说实话,我只会写类名,预设不太整明白)

  9. 关于 TS,我是菜鸡中的菜鸡,代码里面应该写了很多让大佬一看就摇头的 类型标注。没办法,慢慢搞慢慢搞

  10. 还有等等,想起来再说吧

临时查看:

  1. git clone git@github.com:WalkAlone0325/tsx-naive-admin.git
  2. cd tsx-naive-admin
  3. pnpm build => pnpm preview
  4. 或者使用 serve 等静态服务,如 serve dist/

如何使用:

  1. git clone git@github.com:WalkAlone0325/tsx-naive-admin.git
  2. cd tsx-naive-admin
  3. pnpm i
  4. pnpm dev

TSX + naive-ui + Vue3 + Vite

后台管理系统基本架子

包含内容

  1. Pinia + Vue-Router + Naive-UI
  2. 主题色
  3. 全局配置组件
  4. 多标签
  5. 多级菜单
  6. 面包屑
  7. 侧边折叠
  8. 等吧

test mac commit