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

接下来,我们对之前做的组件进行打包发布到 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. SpringCloud升级之路2020.0.x版-40. spock 单元测试封装的 WebClient(下)

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们继续上一节,继续使用 spock 测试我们自己封装的 WebClient 测试针对 r ...

  2. lilypond进阶——用scheme修改乐谱细节

    lilypond对乐谱内容的修改非常自由,用户可以自由根据需要做调整 调整一般都是用\override的命令,但是会比较冗长,码代码的时候比较麻烦 重新设置一个函数来概括命令,调用的时候使用的代码更短 ...

  3. AotucCrawler 快速爬取图片

    AotucCrawler 快速爬取图片 今天介绍一款自动化爬取图片项目. GitHub: https://github.com/YoongiKim/AutoCrawler Google, Naver ...

  4. Insights直播回顾,对话专家,HMS Core 6创新能力解读

    HMS Core Insights第八期直播–对话专家,HMS Core 6创新能力解读,已于11月25日圆满结束,本期直播与小伙伴们一同了解了HMS Core 6在图形.媒体以及连接与通信领域推出的 ...

  5. Codeforces 1303G - Sum of Prefix Sums(李超线段树+点分治)

    Codeforces 题面传送门 & 洛谷题面传送门 个人感觉这题称不上毒瘤. 首先看到选一条路径之类的字眼可以轻松想到点分治,也就是我们每次取原树的重心 \(r\) 并将路径分为经过重心和不 ...

  6. SAM 做题笔记(各种技巧,持续更新,SA)

    SAM 感性瞎扯. 这里是 SAM 做题笔记. 本来是在一篇随笔里面,然后 Latex 太多加载不过来就分成了两篇. 标 * 的是推荐一做的题目. trick 是我总结的技巧. I. P3804 [模 ...

  7. jumpserver——脚本安装

    CentOS Linux release 7.7.1908 (Core) 3.10.0-1062.4.1.el7.x86_64 Initialize(){ yum update -y systemct ...

  8. MySQL 的查询优化

    说起 MySQL 的查询优化,相信大家收藏了一堆奇技淫巧:不能使用 SELECT *.不使用 NULL 字段.合理创建索引.为字段选择合适的数据类型..... 你是否真的理解这些优化技巧?是否理解它背 ...

  9. .NET SAAS 架构与设计 -SqlSugar ORM

    1.数据库设计 常用的Saas分库分为2种类型的库 1.1 基础信息库 主要存组织架构 .权限.字典.用户等 公共信息 性能优化:因为基础信息库是共享的,所以我们可以使用 读写分离,或者二级缓存来进行 ...

  10. javaSE中级篇2 — 工具类篇 — 更新完毕

    1.工具类(也叫常用类)-- 指的是别人已经写好了的,我们只需要拿来用就行了 官网网址:Overview (Java Platform SE 8 ) (oracle.com) ---- 但是这个是英文 ...