{"id":14985767,"url":"https://github.com/trydofor/professional-razor","last_synced_at":"2025-04-11T22:11:46.050Z","repository":{"id":230357510,"uuid":"778138308","full_name":"trydofor/professional-razor","owner":"trydofor","description":"Use front-end tech (Vue/Css/Ts) to build multi-platform from one codebase, suitable for small team and app to write logic once, run anywhere.","archived":false,"fork":false,"pushed_at":"2025-04-11T14:54:34.000Z","size":2756,"stargazers_count":1,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T22:11:40.491Z","etag":null,"topics":["cross-platform","hybrid-app","ionic","primevue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trydofor.png","metadata":{"files":{"readme":"readme-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-03-27T06:36:14.000Z","updated_at":"2025-04-11T14:48:30.000Z","dependencies_parsed_at":"2024-04-07T03:34:47.848Z","dependency_job_id":"d603ae99-9ed2-4c35-b502-d93291475931","html_url":"https://github.com/trydofor/professional-razor","commit_stats":{"total_commits":60,"total_committers":2,"mean_commits":30.0,"dds":"0.33333333333333337","last_synced_commit":"4b0290b31da3536dc66dc0b2f7400d8cb6ab4965"},"previous_names":["trydofor/professional-razor"],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trydofor%2Fprofessional-razor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trydofor%2Fprofessional-razor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trydofor%2Fprofessional-razor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trydofor%2Fprofessional-razor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trydofor","download_url":"https://codeload.github.com/trydofor/professional-razor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487691,"owners_count":21112190,"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":["cross-platform","hybrid-app","ionic","primevue","vue3"],"created_at":"2024-09-24T14:11:36.856Z","updated_at":"2025-04-11T22:11:46.042Z","avatar_url":"https://github.com/trydofor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 剃刀 - Nuxt的跨平台的混合层\n\n\u003e 掌控着致命的闪电风暴，雷泽在战场上横冲直撞。\n\u003e\n\u003e 中文 🇨🇳 | [English 🇺🇸](readme.md)\n\n![razor](./razor.png)\n\n使用前端技术（Nuxt/Ts）实现一套代码的多端构建，\n\n* 移动端 (H5/App) - Web, Android, iOS\n* 桌面端 (PC/Exe) - Web, MacOS, Linux, Window\n\n适合以下特征的技术团队和应用场景，\n\n* 小团队，有些Web能力，但缺少移动端经验\n* 小应用，交互简单，但多平台都有且相似\n* `MC`层可能复用，但`V`层`UX`不同\n\n目标是 `Write App once, Apply almost anywhere`\n\n## 1.技术架构\n\n* 💎 [TypeScript](https://www.typescriptlang.org) 主语言 [Apache]\n* 🚀 [Nuxt](https://nuxt.com) WebApp 框架 [MIT]\n* 🧩 [Vue](https://vuejs.org) Js 框架 [MIT]\n* 💄 [UnoCss](https://unocss.dev) - 原子化 CSS [MIT]\n* 📱 [Ionic](https://ionicframework.com) - 移动端组件库 [MIT]\n* 📱 [Capacitor](https://capacitorjs.com) - 移动端原生库 [MIT]\n* 🖥️ [PrimeVue](https://primevue.org) 桌面端组件库 [MIT]\n* 🖥️ [Electron](https://capacitor-community.github.io/electron) - 桌面端原生库 [MIT]\n\n[MIT]: https://opensource.org/licenses/MIT\n[Apache]: https://www.apache.org/licenses/LICENSE-2.0.html\n\n## 2.编码规范\n\n在 [Vue风格](https://vuejs.org/style-guide/) 和[Nuxt 规范](https://nuxt.com/docs/guide/concepts/code-style)的基础上，\n根据强类型，可读性，一致性的原则，增加以下约定，\n\n### Rule1 - js中驼峰，html中烤串\n\n首先，`html`和`http`不区分大小写，`mac`和`win`系统默认不区分大小写。\n\n* 大驼峰 - `PascalCase`，除每个单词首字母大写外，字母全小写\n* 小驼峰 - `camelCase`，除第一个单词外的大驼峰\n* 烤串 - `kebab-case`，全小写，`-` 连接单词\n\n文件夹及文件命名\n\n* `*.vue`及相关 - 必须大驼峰，与Vue一致。\n  * `components/` 至少两个单词\n  * `composables/` 以`Use`为前缀\n  * `stores/` 以 `Store`为后缀\n* `class`文件 - 必须大驼峰，应该以`Class`为前缀\n* 目录及非vue文件 - 必须烤串，与`index.js`一致，如 `assets/`, `pages/`\n\n源码及内容，\n\n* ts代码 - 类及类型必须大驼峰，方法及实例必须小驼峰\n* vue中 - js必须驼峰，html属性和css必须烤串\n* 组件标签 - 应该大驼峰，以区别于原生html标签\n* 组件属性 - js必须小驼峰，html必须烤串\n* emit事件 - 必须烤串，因其仅做字符串，无自动转换\n* i18n - 应该以js取代json，key应该驼峰\n* http 协议头 - `Pascal-Case` 或 `kebab-case`\n\n### Rule2 - js中单引号，html中双引号\n\n鉴于html中通常使用双引号，且在里面会有简单的js代码，\n\n* js内容 - 必须单引号\n* html内容 - 必须双引号\n\n### Rule3 - 分号和逗号，同主语言一致\n\n分号，与主语言一致，否则随缘，\n\n* java - 结尾保留分号\n* kotlin，scala等 - 结尾不带分号\n\n逗号，尽量添加，方便增减和调整顺序，\n\n* 数组，对象，ts等支持逗号结尾\n\n### Rule4 - 组件名不可`Index.*`\n\n名叫Index的组件，在调试和开发中可读性很差，\n\n* 优先使用全名（通过index.ts进行`import`和`export`）\n* 或手工指定`name`属性（建议自动推导）\n\n### Rule5 - 整体的用单数，碎片的用复数\n\n根据vue官方模板中命名规则，大部分会是复数，\n\n* 使用时视为单一的完整的，使用单数，如 store, route\n* 使用时仍是多个的碎片的，使用复数，如 views, components\n\n### Rule6 - ts编码约定\n\n* 定义函数时，`function`优先于箭头函数\n* 尽量注明类型，以`unknown`代替`any`\n* 定义时用`undefined`，使用时用`null`\n* 实体代码在`*.ts`，仅类型的在`*.d.ts`\n* 在无类型推导时，以`TypeX[]`代替`Array\u003cTypeX\u003e`\n* 流程控制用`if`，表达式用`||`或`??`\n* 尽量使用绝对路径（`@`,`~`），相对路径仅限于`./`和`../`\n* 使用 `\u0026` 作为 layer的路径别名\n\n### Rule7 - vue编码约定\n\n* emits，采用ts规范，事件名不必使用`on`前缀\n* props，传递Function时，使用`do`前缀，表示`handle`\n* SFC中的interface或type，可放到同名`.d.ts`，enum放在`.ts`\n* Form组件，采用以下命名组，如 email 输入框，\n  * emailModel = ref('');\n  * emailError = ref('bad zipcode');\n  * emailRefer = useTemplateRef('emailRefer');\n  * emailCheck = useXxxChecker();\n\n## 3.自己动手\n\n```bash\n## 💚 asdf 管理 node 版本\ngit clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.15.0\n## 配置 zsh\ncat \u003e\u003e ~/.zshrc \u003c\u003c 'EOF'\nexport ASDF_NODEJS_AUTO_ENABLE_COREPACK=true\nexport ASDF_NODEJS_LEGACY_FILE_DYNAMIC_STRATEGY=latest_installed\nsource \"$HOME/.asdf/asdf.sh\"\nEOF\n## 支持 .nvmrc 或 .node-version\ncat \u003e\u003e ~/.asdfrc \u003c\u003c 'EOF'\nlegacy_version_file=yes\nEOF\n\n## 安装 nodejs 插件\nasdf plugin add nodejs\n## 安装 nodejs 并 corepack enable\nasdf install nodejs\n## 通过 package.json 和 corepack\npnpm -v\n## Corepack is about to download\npnpm dev:init\n\n## ✅ for CI\n## 安装 pnpm-hoist-layer 到 devDeps\npnpm -w i --no-frozen-lockfile\n## 重置 ci 锁文件\ngit restore pnpm-lock.yaml\n## 根据锁文件，安装依赖\npnpm i --frozen-lockfile\n\n## 💚 for Dev\npnpm -w i\npnpm i\n\n## 🧪 测试\npnpm dev:test\n## 运行 web\npnpm play:web\n\n## 💎 其他\n## 通过bash重置\npnpm store prune\nfind . -name \"node_modules\" -type d -prune -exec rm -rf {} +\nfind . -name \"pnpm-lock.yaml\" -type f -exec rm -f {} +\nasdf install\npnpm -w \npnpm i\n\n## 删除 .nuxt, .output, dist\npnpm del:gen\n## 删除 node_modules\npnpm del:dep\n## 删除 node_modules, pnpm-lock.yaml\npnpm del:all\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrydofor%2Fprofessional-razor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrydofor%2Fprofessional-razor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrydofor%2Fprofessional-razor/lists"}