关于vue.js:使用vite构建Vue3组件库发布npm包

40次阅读

共计 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 应用组件
  1. 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");
    
  2. src\App.vue 上来应用

    <script setup></script>
    
    <template>
        <MukButton size="large" type="primary"> 我是测试组件 </MukButton>
    </template>
    
    <style scoped></style>
    
  3. 应用 npm run dev 启动我的项目查看成果,如下图所示就证实胜利了

正文完
 0