我想大家都注意到了，前面我们在写组件的时候，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 是基于 ES2015 的 JavaScript 打包工具。它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和 Node.js 使用。 Rollup 最显著的地方就是能让打包文件体积很小。相比其他 JavaScript 打包工具，Rollup 总能打出更小，更快的包。因为 Rollup 基于 ES2015 模块，比 Webpack 和 Browserify 使用的 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 个包
sass
rollup-plugin-esbuild
rollup-plugin-vue
rollup-plugin-scss
rollup-plugin-terser