Nzoth 一个用于快速构建自己的 vue 组件库的基础模板框架__Vue.js
发布于 20 天前 作者 banyungong 190 次浏览 来自 分享
粉丝福利 : 关注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

回到顶部