https://github.com/pdsuwwz/nzoth
🦑 Fast building Vue 3.x UI library. Build with Webpack 5 and Pnpm
https://github.com/pdsuwwz/nzoth
babel component example framework library nzoth-vue pnpm project sass scss template ui-components vue vue2 vue3 webpack webpack5
Last synced: 7 months ago
JSON representation
🦑 Fast building Vue 3.x UI library. Build with Webpack 5 and Pnpm
- Host: GitHub
- URL: https://github.com/pdsuwwz/nzoth
- Owner: pdsuwwz
- License: mit
- Created: 2020-12-07T01:49:36.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-26T21:57:11.000Z (8 months ago)
- Last Synced: 2025-02-27T06:55:25.220Z (8 months ago)
- Topics: babel, component, example, framework, library, nzoth-vue, pnpm, project, sass, scss, template, ui-components, vue, vue2, vue3, webpack, webpack5
- Language: JavaScript
- Homepage:
- Size: 445 KB
- Stars: 11
- Watchers: 3
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nzoth
🦑 Nzoth 是一个用于快速构建自己的 Vue 组件库的基础模板框架
## 版本
* Vue 3.x 版本 ｜ [Vue 2.x 版本](https://github.com/pdsuwwz/nzoth/tree/vue2.0)
## 依赖支持
* Vue 3.x
## 安装
* 首先需要通过 git 将 Nzoth 仓库 clone 下来 :
```bash
$ git clone https://github.com/pdsuwwz/nzoth.git
```
* 运行以下命令并等待所有的依赖包安装完毕
```bash
$ pnpm i
```
## 本地调试
使用以下命令来启动测试用例：
```bash
$ pnpm dev:example
# 或
$ npm run dev:example
```
执行完毕后，不出意外的话会自动拉取浏览器并打开下方链接:
http://localhost:8080/
接下来进一步了解下组件 src、example 示例 这两者是怎么通过示例页面呈现出来的。
我们看下目录结构：
```bash
.
├── babel.config.js # babel 配置
├── build # 构建打包配置
│ ├── utils.js
│ ├── webpack.config.js
│ └── webpack.example.js
├── example # 编写测试用例的目录，方便实时预览当前开发的组件库
│ ├── App.vue
│ ├── index.html
│ ├── favicon.svg
│ ├── main.js
│ ├── router.js
│ └── src
│ ├── components
│ └── views
├── lib # 打包完成后的输出目录（打包构建后才会生成）
│ ├── lib-index.js
│ └── lib-index.js.map
└── src # 编写组件库的目录
├── components
│ └── CustomButton
├── main.js
└── utils
└── type.js
```
由此我们知道，开发和测试是分开的：
即我们会在 `src` 中开发组件库，在 `example` 中测试组件库
## 开发组件库
默认组件库代码位于 `/src/*` 目录下
在 components 目录中已内置好了一个 `CustomButton.vue` 测试组件，后续可以根据需求自由修改。
本地调试时可以随时查看当前开发的组件库组件
__只需要做的就是进入 `/example/main.js` 目录，将做好的 `CustomButton.vue` 注册为全局组件即可:__
```js
import { createApp } from 'vue'
import CustomPackage from '@/main'
import App from './App.vue'
createApp(App)
.use(CustomPackage)
.mount('#app')
```
具体可查看该文件：[/example/main.js](https://github.com/pdsuwwz/nzoth/blob/vue3.0/example/main.js)
__使用：__
```html
Button 1
```
> 💡 __上述测试代码都已经写好，无需再次编写，只需要根据需求自行修改即可。__
## 构建组件库
组件库编写完后就可以开始构建了，使用以下命令打包构建已经开发好的组件库：
```bash
$ pnpm build
```
构建完毕后会看到根目录生成了一个 `lib` 文件夹:
```bash
├── lib
│ ├── lib-index.js
│ └── lib-index.js.map
```
这也就是将要发布到 Npm 上的核心文件。
## 注册并登录 Npm 账号
首先需要提前注册下 Npm 账号 https://docs.npmjs.com/creating-a-new-npm-user-account
注册完后在终端登录 Npm 账号：
会提示输入 Username, Password, Email...，按照提示走就可以：
```bash
$ npm login
```
## 🚀 发布
最后一步，执行以下命令进行发布
```bash
$ npm publish
```
## 💡 注意事项
> 引入组件的方式默认为全局注册，也可以更改为局部注册，只需要通过解构的方式引入 @/main 即可，请根据需要自由搭配 ~
>
> 引入的路径中使用了 Webpack 的 alias，包括 root, @, example 等, 若有需要可在 `/build` 中自行修改配置文件
>
> 每次发布新版本都需要更改 package.json 中的 version 版本号，不然会发布不了的哦
>
> package.json 中的 main 入口路径与 Webpack 中的 output 配置是一一对应的，若需要修改，记得保持一致 ~