{"id":15880012,"url":"https://github.com/pdsuwwz/nzoth","last_synced_at":"2025-03-17T12:31:07.709Z","repository":{"id":45193415,"uuid":"319174835","full_name":"pdsuwwz/nzoth","owner":"pdsuwwz","description":"🦑  Fast building Vue 3.x UI library. Build with Webpack 5 and Pnpm","archived":false,"fork":false,"pushed_at":"2025-02-26T21:57:11.000Z","size":456,"stargazers_count":11,"open_issues_count":11,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T06:55:25.220Z","etag":null,"topics":["babel","component","example","framework","library","nzoth-vue","pnpm","project","sass","scss","template","ui-components","vue","vue2","vue3","webpack","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pdsuwwz.png","metadata":{"files":{"readme":"README.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":"2020-12-07T01:49:36.000Z","updated_at":"2024-03-27T15:51:15.000Z","dependencies_parsed_at":"2024-04-11T19:25:06.027Z","dependency_job_id":"0c4631fe-e7ab-4914-808e-5636303bbddd","html_url":"https://github.com/pdsuwwz/nzoth","commit_stats":{"total_commits":37,"total_committers":3,"mean_commits":"12.333333333333334","dds":0.1351351351351351,"last_synced_commit":"2c402d8d9b10e1f809cbbf4276ea697ee513999f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdsuwwz%2Fnzoth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdsuwwz%2Fnzoth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdsuwwz%2Fnzoth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdsuwwz%2Fnzoth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pdsuwwz","download_url":"https://codeload.github.com/pdsuwwz/nzoth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243864609,"owners_count":20360355,"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":["babel","component","example","framework","library","nzoth-vue","pnpm","project","sass","scss","template","ui-components","vue","vue2","vue3","webpack","webpack5"],"created_at":"2024-10-06T03:07:06.957Z","updated_at":"2025-03-17T12:31:07.321Z","avatar_url":"https://github.com/pdsuwwz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nzoth\n\n🦑 Nzoth 是一个用于快速构建自己的 Vue 组件库的基础模板框架\n\n## 版本\n\n* Vue 3.x 版本 ｜ [Vue 2.x 版本](https://github.com/pdsuwwz/nzoth/tree/vue2.0)\n\n## 依赖支持\n\n* Vue 3.x\n\n## 安装\n\n* 首先需要通过 git 将 Nzoth 仓库 clone 下来 :\n\n```bash\n$ git clone https://github.com/pdsuwwz/nzoth.git\n```\n\n* 运行以下命令并等待所有的依赖包安装完毕\n\n```bash\n$ pnpm i\n```\n\n## 本地调试\n\n使用以下命令来启动测试用例：\n\n```bash\n$ pnpm dev:example\n\n# 或\n\n$ npm run dev:example\n```\n\n执行完毕后，不出意外的话会自动拉取浏览器并打开下方链接: \n\nhttp://localhost:8080/\n\n\n接下来进一步了解下组件 src、example 示例 这两者是怎么通过示例页面呈现出来的。\n\n我们看下目录结构：\n\n```bash\n.\n├── babel.config.js # babel 配置\n├── build # 构建打包配置\n│   ├── utils.js\n│   ├── webpack.config.js\n│   └── webpack.example.js\n├── example # 编写测试用例的目录，方便实时预览当前开发的组件库\n│   ├── App.vue\n│   ├── index.html\n│   ├── favicon.svg\n│   ├── main.js\n│   ├── router.js\n│   └── src\n│       ├── components\n│       └── views\n├── lib # 打包完成后的输出目录（打包构建后才会生成）\n│   ├── lib-index.js\n│   └── lib-index.js.map\n└── src # 编写组件库的目录\n    ├── components\n    │   └── CustomButton\n    ├── main.js\n    └── utils\n        └── type.js\n```\n\n由此我们知道，开发和测试是分开的：\n\n即我们会在 `src` 中开发组件库，在 `example` 中测试组件库\n\n## 开发组件库\n\n默认组件库代码位于 `/src/*` 目录下\n\n在 components 目录中已内置好了一个 `CustomButton.vue` 测试组件，后续可以根据需求自由修改。\n\n本地调试时可以随时查看当前开发的组件库组件\n\n\n__只需要做的就是进入 `/example/main.js` 目录，将做好的 `CustomButton.vue` 注册为全局组件即可:__\n\n```js\nimport { createApp } from 'vue'\nimport CustomPackage from '@/main'\nimport App from './App.vue'\n\ncreateApp(App)\n  .use(CustomPackage)\n  .mount('#app')\n\n```\n\n具体可查看该文件：[/example/main.js](https://github.com/pdsuwwz/nzoth/blob/vue3.0/example/main.js)\n\n\n__使用：__\n\n```html\n\u003ctemplate\u003e\n  \u003cCustomButton\n    @click=\"handleClick('Button 1')\"\n  \u003e\n    Button 1\n  \u003c/CustomButton\u003e\n\u003c/template\u003e\n```\n\n\u003e 💡 __上述测试代码都已经写好，无需再次编写，只需要根据需求自行修改即可。__\n\n\n## 构建组件库\n\n组件库编写完后就可以开始构建了，使用以下命令打包构建已经开发好的组件库：\n\n```bash\n$ pnpm build\n```\n\n构建完毕后会看到根目录生成了一个 `lib` 文件夹:\n\n```bash\n├── lib\n│   ├── lib-index.js\n│   └── lib-index.js.map\n```\n\n这也就是将要发布到 Npm 上的核心文件。\n\n## 注册并登录 Npm 账号\n\n首先需要提前注册下 Npm 账号 https://docs.npmjs.com/creating-a-new-npm-user-account\n\n注册完后在终端登录 Npm 账号：\n\n会提示输入 Username, Password, Email...，按照提示走就可以：\n\n```bash\n$ npm login\n```\n\n## 🚀 发布\n最后一步，执行以下命令进行发布\n\n```bash\n$ npm publish\n```\n\n## 💡 注意事项\n\n\u003e 引入组件的方式默认为全局注册，也可以更改为局部注册，只需要通过解构的方式引入 @/main 即可，请根据需要自由搭配 ~\n\u003e\n\u003e 引入的路径中使用了 Webpack 的 alias，包括 root, @, example 等, 若有需要可在 `/build` 中自行修改配置文件\n\u003e\n\u003e 每次发布新版本都需要更改 package.json 中的 version 版本号，不然会发布不了的哦\n\u003e\n\u003e package.json 中的 main 入口路径与 Webpack 中的 output 配置是一一对应的，若需要修改，记得保持一致 ~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdsuwwz%2Fnzoth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpdsuwwz%2Fnzoth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdsuwwz%2Fnzoth/lists"}