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

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

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

应用vite构建Vue3组件库，公布npm包

1.创立根底的vite 脚手架

2.革新vite-dome

3.组件封装

3.1创立组件文件

3.2编写组件

3.3导出组件

3.4本地验证组件是否用

3.5 配置vite.config.js文件

3.6运行打包命令

4.上传到npm官网

4.1打包上传前的筹备

4.1.1配置package.json

4.2上传到npm

4.2.1 注册npm账号

4.2.2设置npm源

4.2.3登录到npm

4.2.4推送到npm仓库

4.2.5查看npm包

4.3下载与应用

4.3.1下载

4.3.2应用组件

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

应用vite构建Vue3组件库，公布npm包

1.创立根底的vite 脚手架

2.革新vite-dome

3.组件封装

3.1创立组件文件

3.2编写组件

3.3导出组件

3.4本地验证组件是否用

3.5 配置vite.config.js文件

3.6运行打包命令

4.上传到npm官网

4.1打包上传前的筹备

4.1.1配置package.json

4.2上传到npm

4.2.1 注册npm账号

4.2.2设置npm源

4.2.3登录到npm

4.2.4推送到npm仓库

4.2.5查看npm包

4.3下载与应用

4.3.1下载

4.3.2应用组件

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复