基础组件库先做到这个阶段,后面我会继续新增、完善

接下来,我们对之前做的组件进行打包发布到 npm

返回阅读列表点击 这里

组件库优化

通用层叠样式表

我想大家都注意到了,前面我们在写组件的时候,scss 中类的命名都是 jeremy-x 这样的形式,这是为了用选择器来做到统一配置。

如何配置

我们在 src/lib 目录下,创建一个 jeremy.scss 的文件,编写如下代码:

[class^="jeremy-"],[class*=" jeremy-"]* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
"Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
"Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
"Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

注意

前缀改成您的项目标识就可以了,我这里是 jeremy

入口统一

我们需要告诉打包器,那些内容是需要暴露的,所以这里我们再在 src/lib 目录下创建一个 index.ts 文件,然后将需要打包的组件进行汇总导入和导出。

import JeremyButton from './Button.vue'
import JeremyCard from './Card.vue'
import JeremyDialog from './Dialog.vue'
import JeremyInput from './Input.vue'
import JeremySwitch from './Switch.vue'
import JeremyTable from './Table.vue'
import JeremyTab from './Tab.vue'
import JeremyTabs from './Tabs.vue' export { JeremyButton, JeremyCard, JeremyDialog, JeremyInput, JeremySwitch, JeremyTable, JeremyTab, JeremyTabs, }
export { createDialog as createDialog } from './createDialog' export default {
install: Vue => {
const components = [JeremyButton, JeremyCard, JeremyDialog, JeremyInput, JeremySwitch, JeremyTable, JeremyTab, JeremyTabs]
components.forEach(item => {
Vue.component(item.name, item)
})
}
}

注意

这里的 install 方法是让用户能够完整引入组件的必要方法

这里的 export 是用于按需引入的,另外,要想实现用户能够部分引入组件,还必须在每个子组件中定义 install 方法

示例

完整引入
import { createApp } from 'vue';
import App from './App.vue';
import JeremyUI from 'jeremy-ui';
import 'jeremy-ui/lib/jeremy.css'; const app = createApp(App);
app.use(JeremyUI);
app.mount('#app');
按需引入
import { createApp } from 'vue';
import App from './App.vue';
import { JeremyButton, JeremyCard } from 'jeremy-ui';
import 'jeremy-ui/lib/jeremy.css'; const app = createApp(App); app.use(JeremyButton);
app.use(JeremyCard); app.mount('#app');
子组件示例
<template>
<div>
<slot></slot>
</div>
</template>
<script lang="ts">
declare const props: {
title: string;
}; export default {
install: function (Vue) {
Vue.component(this.name, this);
},
name: "JeremyTab",
props: {
title: {
type: String,
default: "标签页",
},
},
};
</script>

注册 NPM 账户

既然要发布到 npm ,那么首先我们要有一个 npm 账户,如果没有可以点击 官网 进行注册。

注意

一定要记好,用户名、密码和邮箱!

注册完成后,一定要完成邮箱认证!

邮箱认证后,登录显示如下,这里的 2FA 暂时可以忽略,不过后面尽量完成认证。

配置打包

首先,要清楚我们的项目是基于 Vite 的,也就是说,是一个由原生 ESM 驱动的 Web 开发构建工具构建的。在选择构建工具的时候也最好可以选择基于 ESM 的工具。

所以,我们选择 Rollup 进行打包,是因为 Rollup 是基于 ES2015JavaScript 打包工具。它将小文件打包成一个大文件或者更复杂的库和应用,打包既可用于浏览器和 Node.js 使用。 Rollup 最显著的地方就是能让打包文件体积很小。相比其他 JavaScript 打包工具,Rollup 总能打出更小,更快的包。因为 Rollup 基于 ES2015 模块,比 WebpackBrowserify 使用的 CommonJS 模块机制更高效。

配置 Rollup

我们在项目的根目录下创建 rollup.config.js 文件,代码如下:

import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser" export default {
// 主入口配置
input: 'src/lib/index.ts',
output: [{
globals: {
// 全局依赖
vue: 'Vue'
},
// 项目名称
name: 'Jeremy',
// 输出文件名
file: 'lib/jeremy.js',
// 输出文件格式,使用 es module
format: 'es',
// 压缩文件大小
plugins: [terser()]
}, {
globals: {
vue: 'Vue'
},
name: 'Jeremy',
// 输出文件格式,使用 umd
file: 'lib/jeremy.umd.js',
format: 'umd',
plugins: [terser()]
},],
plugins: [
vue({
include: /\.vue$/,
}),
scss({ include: /\.scss$/, sass: dartSass }),
esbuild({
include: /\.[jt]s$/,
minify: process.env.NODE_ENV === 'production',
// 降为 es6 语法
target: 'es2015'
}),
],
}

通过配置我们指导 rollup 依赖如下 5 个包

  1. sass
  2. rollup-plugin-esbuild
  3. rollup-plugin-vue
  4. rollup-plugin-scss
  5. rollup-plugin-terser

我们通过 npm 进行安装,在项目根目录下执行 bash ,并运行如下命令:

npm install sass -D
npm install rollup-plugin-esbuild -D
npm install rollup-plugin-vue -D
npm install rollup-plugin-scss -D
npm install rollup-plugin-terser -D

注意

-D 标识安装为开发依赖,不能省略

开始打包

在项目根目录下执行 bash ,并运行如下命令:

rollup -c

执行后,我们会在根目录下的 lib 文件夹下看到如下三个文件:

发布到 NPM

开始之前,我们需要在 package.json 中添加一些内容,用户配置组件库的位置和默认文件,代码如下:

{
"name": "jeremy-ui",
"version": "0.0.3",
"files": [
"lib/*"
],
"main": "lib/jeremy.js",
}

注意

发布到 npm 时,发布的项目名取决于配置中的 name 字段,发布的版本号取决于该配置中的 version 字段

每次发布时,发布的新版本号不得低于该项目以前发布过的任意版本号

然后,在项目根目录下运行 bash 并执行如下命令:

npm login

然后登录(输入用户名、密码和邮箱),登录成功后,再执行如下命令:

npm publish

注意

如果包名已经被别人发布过,那么这一步会失败,修改的包名重新打包、发布吧

如果发布错了,可以删除这个包,但是要求是 72 小时内,这里就不再展开了

发布成功后,我们可以登录 npm 查看一下:

使用 NPM 包

我们将项目切换到 website 分支,可以看到这个分支的组件都是通过 npm 进行安装的,不再是通过本地安装的了。当然,您也可以通过 bash 执行如下命令进行安装:

npm install jeremy-ui

项目地址

GitHub: https://github.com/JeremyWu917/jeremy-ui

官网地址

JeremyUI: https://ui.jeremywu.top

感谢阅读

12 - Vue3 UI Framework - 打包发布的更多相关文章

  1. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  2. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  3. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  4. 13 - Vue3 UI Framework - 完善官网

    为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown ...

  5. 15 - Vue3 UI Framework - 完工部署

    项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages 上 返回阅读列表点击 这里 项目配置 常见的模式有三种,即 History 模式 Hash 模式 Memory ...

  6. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  7. 06 - Vue3 UI Framework - Dialog 组件

    做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...

  8. 08 - Vue3 UI Framework - Input 组件

    接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...

  9. 09 - Vue3 UI Framework - Table 组件

    接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...

随机推荐

  1. 力扣 - 剑指 Offer 27. 二叉树的镜像

    题目 剑指 Offer 27. 二叉树的镜像 思路1(递归) 我们可以使用深度优先搜索,先递归到链表的末尾,然后从末尾开始两两交换.就相当于后续遍历而已 记得要先保存下来node.right节点,因为 ...

  2. 互联网java面试宝典

    1.为什么使用消息队列啊? 答题: 消息队列的核心功能就是:解耦合,异步,流量削峰解耦:接口调用发送,那如果E系统也要这个数据呢?那如果C系统现在不需要了呢?现在A系统又要发送第二种数据了呢?A系统负 ...

  3. 整理记录一些好用的随机图API

    最近自己博客使用的随机图API有些不稳定,自己又去搜集了一些有意思的随机图API,这里做一个整理记录 注意!!!本文链接最后测试时间----2021年11月21日 主题作者Tagaki的API(有时候 ...

  4. AtCoder Regular Contest 127 题解

    sb atcoder 提前比赛时间/fn/fn/fn--sb atcoder 还我 rating/zk/zk/zk A 签到题,枚举位数 \(+\) 前导 \(1\) 个数然后随便算算贡献即可,时间复 ...

  5. 洛谷 P6031 - CF1278F Cards 加强版(推式子+递推)

    洛谷题面传送门 u1s1 这个推式子其实挺套路的吧,可惜有一步没推出来看了题解 \[\begin{aligned} res&=\sum\limits_{i=0}^ni^k\dbinom{n}{ ...

  6. HDU 6755 - Fibonacci Sum(二项式定理+推式子)

    题面传送门 其实是一道还好的题罢,虽然做了我 2147483647(bushi,其实是 1.5h),估计也只是因为 HDU 不支持数据下载所以错误总 debug 出来 首先看到 \(10^9+9\) ...

  7. springboot与数据访问之jdbc

    官网的starthttps://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#using-boot-starter 添加依 ...

  8. annovar 注释除人类以外的SNP

    1. 准备文件: ref.fa ref.gtf或者gff3,最好是gtf3,可将gff3转化为gtf sample.vcf 2. 用gff3ToGenePred与gtfToGenePred工具将gtf ...

  9. ping 的原理

    ping 的原理ping 程序是用来探测主机到主机之间是否可通信,如果不能ping到某台主机,表明不能和这台主机建立连接.ping 使用的是ICMP协议,它发送icmp回送请求消息给目的主机.ICMP ...

  10. rkhunter使用

    1.下载地址:http://jaist.dl.sourceforge.net/project/rkhunter/rkhunter/1.4.6/ 2.上传至Linux后解压 3.编译安装 [root@t ...