Vue.js
Nzoth 一个用于快速构建自己的 vue 组件库的基础模板框架__Vue.js
发布于 3 年前 作者 banyungong 1321 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: healer-readable highlight:

前奏

大家是否跟我一样面临着这样的问题？

用惯了流行的 UI 库，想要尝试编写一套自己的组件库，怎么做

日常有过多的重复组件需要开发，维护起来很难

跨项目组件只能 cv 大法？

…

在解决这些问题之前，我们设想下最终的目的是为了什么？

我们希望在一个大型项目里，能够以一种比较友好的方式将一个复杂的场景解耦成独立的模块，对这些独立模块再进行维护，达到快速复用和组件化的目的。

也就是说我们需要为开发组件库和组件化做一些提效的工作。

期间作者也搜了不少开发组件库的案例，但是貌似不能做到特别的通用，想想还是自己手撸一个吧，这样既能避免之后重复的 cv 造成大量的时间浪费，又能很好地专注组件化相关的工作，于是 Nzoth 诞生了。

Nzoth 是一个用于快速构建自己的 vue 组件库的基础模板框架，它可以很友好的将开发和测试区分开，为此我们可以自由地在里面编写组件代码，同时可以编写模拟测试 demo 用例来实时查看组件的可用性。

完整的代码可以看下方的仓库，欢迎 ✨ star ✨ ~~

📦 仓库地址：Nzoth

下面就简单介绍下 Nzoth 的使用方法：

依赖支持

  • Vue 2.6.0+

安装

  • 首先需要通过 git 将 Nzoth 仓库 clone 下来 :
$ git clone https://github.com/pdsuwwz/nzoth.git
  • 运行以下命令并等待所有的依赖包安装完毕
$ yarn install

# 或

$ npm install

本地调试

使用以下命令来启动测试用例：

$ yarn dev:example

# 或

$ npm run dev:example

执行完毕后，不出意外的话会自动拉取浏览器并打开下方链接:

http://localhost:8080/example-page

接下来进一步了解下组件 src、example 示例 这两者是怎么通过示例页面呈现出来的。

我们看下目录结构：

.
├── babel.config.js # babel 配置
├── build # 构建打包配置
│   ├── utils.js
│   ├── webpack.config.js
│   └── webpack.example.js
├── example # 编写测试用例的目录，方便实时预览当前开发的组件库
│   ├── App.vue
│   ├── index.html
│   ├── 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 注册为全局组件即可:

import CustomPackage from '@/main'

Vue.use(CustomPackage)

具体可查看该文件：/example/main.js

使用：

<template>
  <CustomButton
    @click="handleClick('Button 1')"
  >
    Button 1
  </CustomButton>
</template>

💡 上述测试代码都已经写好，无需再次编写，只需要根据需求自行修改即可。

构建组件库

组件库编写完后就可以开始构建了，使用以下命令打包构建已经开发好的组件库：

$ yarn build

# 或

$ npm run build

构建完毕后会看到根目录生成了一个 lib 文件夹:

├── 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…，按照提示走就可以：

$ npm login

🚀 发布

最后一步，执行以下命令进行发布，完事！

$ npm publish

💡 注意事项

  1. 引入组件的方式默认为全局注册，也可以更改为局部注册，只需要通过解构的方式引入 @/main 即可，请根据需要自由搭配 ~

  2. 引入的路径中使用了 Webpack 的 alias，包括 root, @, example 等, 若有需要可在 /build 中自行修改配置文件

  3. 每次发布新版本都需要更改 package.json 中的 version 版本号，不然会发布不了的哦

  4. package.json 中的 main 入口路径与 Webpack 中的 output 配置是一一对应的，若需要修改，记得保持一致 ~

仓库地址

完整的代码可以看下方的仓库，欢迎 ✨ star ✨ ~~

📦 仓库地址：Nzoth

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 小数没有点 原文链接：https://juejin.im/post/6926144439543037966

回到顶部