{"id":13532841,"url":"https://github.com/WalkAlone0325/tsx-naive-admin","last_synced_at":"2025-04-01T21:31:13.003Z","repository":{"id":37807293,"uuid":"392000749","full_name":"WalkAlone0325/tsx-naive-admin","owner":"WalkAlone0325","description":"a admin with naive-ui,use vite + tsx","archived":false,"fork":false,"pushed_at":"2024-02-05T07:52:55.000Z","size":1563,"stargazers_count":101,"open_issues_count":2,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-02T20:31:55.677Z","etag":null,"topics":["naive-admin","naive-ui","tsx","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://tsx-naive-admin.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WalkAlone0325.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-02T15:27:15.000Z","updated_at":"2024-10-27T08:18:13.000Z","dependencies_parsed_at":"2024-01-14T01:54:29.501Z","dependency_job_id":"1d1acc51-d75e-4cf9-a239-4c888e7932b7","html_url":"https://github.com/WalkAlone0325/tsx-naive-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalkAlone0325%2Ftsx-naive-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalkAlone0325%2Ftsx-naive-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalkAlone0325%2Ftsx-naive-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalkAlone0325%2Ftsx-naive-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WalkAlone0325","download_url":"https://codeload.github.com/WalkAlone0325/tsx-naive-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713046,"owners_count":20821835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["naive-admin","naive-ui","tsx","typescript","vue","vue3"],"created_at":"2024-08-01T07:01:14.205Z","updated_at":"2025-04-01T21:31:11.391Z","avatar_url":"https://github.com/WalkAlone0325.png","language":"TypeScript","funding_links":[],"categories":["List"],"sub_categories":["Admin Projects Using NaiveUI"],"readme":"# tsx-naive-admin\n\n白嫖部署 `vercel`，具体预览：[https://tsx-naive-admin.vercel.app](https://tsx-naive-admin.vercel.app)\n\n`vercel` 现在需要翻，国内网络可以访问: [https://tsx-naive-admin.netlify.app/](https://tsx-naive-admin.netlify.app/)\n\n## 用了 纯粹的 TSX + Pinia + Reactivity Transform，感觉更完美了\n\n临时起意，恰好有点时间，就瞎搞了，也遇到不少问题\n\n1. `vite + tsx` 的写法 热更新会有一些问题,所以必须要包裹在 `defineComponent()` 选项当中\n\n2. [naive-ui](http://www.naiveui.com) tsx 的写法，提示真的很爽，也因此发现了几个小问题，也蹭了几个 `PR`\n\n3. **这一项已经不再推荐使用，新的提交 commit close reactivityTransform 已经关闭**  对于 `Reactivity Ttransform`，说说看法，这个玩意不熟属实有点坑，尤其在你做封装导出的再用的时候，不能准确把握数据的类型，就特别容易出 现不在响应式的 `bug`，在 `tsx` 的写法中尤其需要注意\n\n4. 关于 [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense)，代码中写到的应该正确的方式。不知道在 `vue` 官网还是在 `vue-router` 官网看的的两一种写法，在 `tsx` 中是会出现 `KeepAlive` 重复性渲染视图的问题\n\n5. 对于 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)，在 `tsx` 中就不要用了吧。我记得好像是能够识别，但是是没有 `ts` 类型提示的，按需导入也挺好用的\n\n6. 还有在 `views` 页面这一块，细心的都可能发现了我文件夹下主文件还是用的和文件名一样的 `.tsx` 文件，如 `/home/home.tsx`，这是为了   `vite` 打包之后生成 `chunk` 的文件名，用 `index.tsx` 命名主文件，打包后都是 `index.[hash].js`\n\n7. **组件二次封装**，这里涉及到 `props` 的类型提示问题，目前想到的办法是直接使用配置项 `extends: NXxx`，具体可查看 [DButton](./src/components/DButton.tsx)，感觉应该是一种比较完美的解决方式\n\n8. `css modules`，使用了 `less`，开启了 `localsConvention: 'camelCase'`，查看 [config](./vite.config.ts)。\n   \n   本来准备上 [unocss](https://github.com/unocss/unocss) 的，但是吧，`Naive-UI` 组件比较多，大部分布局组件都能够实现，对大量的自定义样式需求不大，而且想要适配主题色，也可能需要一些相关的预设（说实话，我只会写类名，预设不太整明白）\n\n9. 关于 `TS`，我是菜鸡中的菜鸡，代码里面应该写了很多让大佬一看就摇头的 类型标注。没办法，慢慢搞慢慢搞\n\n\n10. 还有等等，想起来再说吧\n\n## 临时查看：\n\n1. `git clone git@github.com:WalkAlone0325/tsx-naive-admin.git`\n2. `cd tsx-naive-admin`\n3. `pnpm build` =\u003e `pnpm preview`\n4. 或者使用 `serve` 等静态服务，如 `serve dist/`\n\n## 如何使用：\n\n1. `git clone git@github.com:WalkAlone0325/tsx-naive-admin.git`\n2. `cd tsx-naive-admin`\n3. `pnpm i`\n4. `pnpm dev`\n\n## TSX + naive-ui + Vue3 + Vite\n\n后台管理系统基本架子\n\n## 包含内容\n\n1. Pinia + Vue-Router + Naive-UI\n2. 主题色\n3. 全局配置组件\n4. 多标签\n5. 多级菜单\n6. 面包屑\n7. 侧边折叠\n8. 等吧\n\n### test mac commit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWalkAlone0325%2Ftsx-naive-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWalkAlone0325%2Ftsx-naive-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWalkAlone0325%2Ftsx-naive-admin/lists"}