乐趣区

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

jiezi

应用 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 启动我的项目查看成果，如下图所示就证实胜利了
退出移动版