共计 4167 个字符,预计需要花费 11 分钟才能阅读完成。
应用 vite 构建 Vue3 组件库,公布 npm 包
在国内用 vue 框架开发的是十分之多的,应用 vue 开发组件封装是一个很普片的事件了,封装好一个组件能够在我的项目的任意中央去应用,咱们还能够从 npm 仓库下载他人封装的组件进行应用,比方 element-ui,vant 等组件库,然而因为不同的公司,不同的网站格调,是咱们在开发中还是得本人封装本人的组件,要想在不同我的项目上应用本人封装的组件,不可能去旧我的项目复制组件代码到新的我的项目外面去。所以咱们能够将组件上传到 npm 仓库,应用的时候间接从 npm 装置应用。
1. 创立根底的 vite 脚手架
npm create vite vite-demo(项目名称) --template vue
而后如下图所示,我的项目名为 vite-demo 而后抉择 vue 框架,抉择 vue
2. 革新 vite-dome
创立好根本我的项目后,用本人相熟的编程软件关上艳羡,在控制台输出 npm i
装置相干的包并对文件进行革新
如下图:
3. 组件封装
3.1 创立组件文件
在 src\components
文件加下新建一个 muk-ui
用于寄存所有的组件文件,在 muk-ui
文件夹中创立一个 button 组件如图所示
3.2 编写组件
留神这里我是用了
less
布局,所以要下载less
包,npm i less
装置 less 包。要想前面导出的时候应用 name 属性,必须定义 name 属性,因为 setup 语法糖不反对定义 name 属性,所以咱们能够定义两个script
标签,也能够不必 setup 语法糖,还能够应用插件解决,这里就不说是什么插件了,放个连贯本人去看
<script setup>
/**
* 接管传过来的值
*
* @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'
* @param type 定义按钮的类型 默认不填
*/
defineProps({
size: {
type: String,
default: "middle",
},
type: {
type: String,
default: "default",
},
});
</script>
<script>
export default {name: "MukButton",};
</script>
<template>
<button class="muk-btn" :class="[size, type]">
<!-- 定义插槽用于让用户自定义按钮你们的内容 -->
<slot></slot>
</button>
</template>
<style scoped lang="less">
.muk-btn {
appearance: none;
border: none;
outline: none;
background: #fff;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.large {
width: 240px;
height: 50px;
font-size: 16px;
}
.moddle {
width: 180px;
height: 50px;
font-size: 16px;
}
.small {
width: 100px;
height: 32px;
}
.mini {
width: 60px;
height: 32px;
}
.default {
border-color: #e4e4e4;
color: #666;
}
.primary {
border-color: skyblue;
background: skyblue;
color: #fff;
}
.plain {
border-color: skyblue;
color: skyblue;
background: lighten(skyblue, 50%);
}
.gray {
border-color: #ccc;
background: #ccc;
color: #fff;
}
</style>
3.3 导出组件
在 src\components\muk-ui
文件夹下新建 index.js
用于导出组件
import Button from "./button/index.vue";
// 按需引入
export {Button};
const component = [Button];
const MukUI = {install(App) {component.forEach((item) => {App.component(item.name, Button);
});
},
};
export default MukUI;
3.4 本地验证组件是否用
在 sec\main.js
注册组件
import {createApp} from "vue";
import "./style.css";
import App from "./App.vue";
import MukUI from "./components/muk-ui"; // 导入
const app = createApp(App);
app.use(MukUI); // 注册
app.mount("#app");
在 src\App.vue
外面去应用按钮
<script setup></script>
<template>
<MukButton size="large" type="primary"> 我是测试组件 </MukButton>
</template>
<style scoped></style>
而后在终端输出 npm run dev
运行 如图所示就胜利了
3.5 配置 vite.config.js 文件
在我的项目的根目录的 vite.config.js
批改相干配置,批改成组件库打包模式,
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
build: {
outDir: "muk-ui", // 输入文件名称
lib: {entry: path.resolve(__dirname, "./src/components/muk-ui/index.js"), // 指定组件编译入口文件
name: "muk-ui",
fileName: "muk-ui",
}, // 库编译模式配置
rollupOptions: {
// 确保内部化解决那些你不想打包进库的依赖
external: ["vue"],
output: {
// 在 UMD 构建模式下为这些内部化的依赖提供一个全局变量
globals: {vue: "Vue",},
},
}, // rollup 打包配置
},
});
3.6 运行打包命令
在终端应用npm run build
如下图所示呈现以下文件就打包胜利了
4. 上传到 npm 官网
4.1 打包上传前的筹备
上传之前咱们要做一些配置筹备的
4.1.1 配置 package.json
首先咱们在打包好的 muk-ui 目录下,关上终端,而后执行 npm init -y
命令初始化 package.json
package.json
是用来配置咱们上传到 npm 仓库的的版本号等配的
初始化后咱们能够看到到该目录下的一些根本配置
而后咱们批改配置如下:
{
"name": "muk-ui", // 包名字
"private": false,
"version": "0.0.1", // 版本号
"description": "一个简略的组件库",
"main": "muk-ui.js",
"scripts": {"test": "echo \"Error: no test specified\"&& exit 1"},
"keywords": ["muk","muk-ui","MukUI","MUKUI","vue3-muk-ui"],// 在 npm 上可被搜寻的关键字
"author": "","license":"ISC"
}
4.2 上传到 npm
4.2.1 注册 npm 账号
想要公布到 npm 仓库,就必须要有一个账号,先去 npm 官网注册一个账号,留神记住用户名、明码和邮箱,公布的时候可能会用到。
4.2.2 设置 npm 源
在国内很多小伙伴喜爱把本地的 npm 镜像源采纳的是淘宝镜像源或者其它的,如果想要公布 npm 包,咱们得吧咱们得 npm 源切换为官网得源,命令如下:
npm config set registry=https://registry.npmjs.org
4.2.3 登录到 npm
在打包后的文件根目录关上终端,输出 npm login
登录到官网
实现如下图步骤就胜利登陆了
4.2.4 推送到 npm 仓库
输出 npm publish
就能够正式公布到 npm 仓库了
留神:公布前要保障没有雷同的包名,否则无奈公布,每次公布的版本号必须不同
输出长期验证码后回车看到如下图所示就证实胜利了
留神:公布前要保障没有雷同的包名,否则无奈公布,每次公布的版本号必须不同
4.2.5 查看 npm 包
上传胜利后能够在 npm 官网上通过本人设置的 keywords
关键字查到本人上传的组件
4.3 下载与应用
4.3.1 下载
通过 npm i muk-ui
下载咱们 npm 仓库的包如图所示就下载胜利了
就能够在 node_modules
文件夹下找到咱们的组件包
4.3.2 应用组件
-
在
src\main.js
中引入下载的包,并引入其款式import "../node_modules/muk-ui/style.css";
import {createApp} from "vue"; import "./style.css"; import App from "./App.vue"; import "../node_modules/muk-ui/style.css"; // 引入组件款式 import MukUI from "muk-ui"; // 引入下载后的组件 const app = createApp(App); app.use(MukUI); // 注册 app.mount("#app");
-
在
src\App.vue
上来应用<script setup></script> <template> <MukButton size="large" type="primary"> 我是测试组件 </MukButton> </template> <style scoped></style>
- 应用
npm run dev
启动我的项目查看成果,如下图所示就证实胜利了