创建属于自己的UI组件库（vite+vue3）

经过多天的资料查阅与测试，终于是把我想要的组件库目录弄明白啦

1.创建vite项目

npm create vite vite-demo(项目名称) --template vue

2.初始化项目，并测试项目能否运行成功

这里就不多赘述了

3.创建组件

在src目录下创建你的ui文件夹（比如下图的kkkang-ui）,并且创建相应的组件文件

src/kkkang-ui/button/index.js

<template>
    <div>{{ a }}</div>
    <div class="ak">kkkang</div>
  <button @click="h">add</button>
  <el-button type="primary">Primary</el-button>
</template>

<script setup>
 import {ref} from 'vue'
 const a =ref(666)

 const h=()=>{
    a.value=888
 }
</script>

<style>
.ak{
    background-color: brown;
}
</style>

4.导出注册组件(分别是按需导入和全局注册)

在你的ui目录里创建index.js文件，参见上图。

src/kkkang-ui/index.js

import k_button from "./button/index.vue"
import k_search_box from "./search-box/index.vue"
let obj = {
    k_button,
    k_search_box
}
export {
    k_button,
    k_search_box
}
export default {
    install(vue) {
        Object.keys(obj).forEach(key => {
            vue.component(key, obj[key]);
        });
    }
}

5.本地验证组件是否起效果

根目录 main.js注册组件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import kkkang_ui from './kkkang-ui'

import elementPlus from "element-plus"
import 'element-plus/dist/index.css'

createApp(App).use(elementPlus).use(kkkang_ui).mount('#app')

接着可以在app.vue测试

<script setup>
  
</script>

<template>
   <k_button></k_button>
</template>

<style scoped>
 
</style>

 6.配置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: "dist", //输出文件名称
        lib: {
            entry: path.resolve(__dirname, "./src/kkkang-ui/index.js"), //指定组件编译入口文件
            name: "kkkang-ui",
        }, //库编译模式配置
        rollupOptions: {
            // 外部化处理那些你不想打包进库的依赖
            external: ["vue", "element-plus"],
            output: {
                // 为外部化的依赖提供全局变量,这个我也不太懂，抄别人的
                globals: {
                    vue: "Vue",
                },
            },
        }, // rollup打包配置
    },


})

7.执行打包

npm run build

接着在打包出来的dist文件夹创建package.json

npm init -y

在package.json填写相关信息

{
    "name": "kkkang-ui",
    "private": false,
    "version": "2.0.1",
    "description": "kkkang组件库2.0版本来啦",
    "main": "kkkang-plus.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": ["kkkang", "kkkang-ui", "Kkkang-UI", "KKKANGUI", "vue3-kkkang-ui"],
    "author": "wei",
    "license": "ISC"
}

8.发布npm包

登录npm

npm login

根据提示填写信息填写账号密码邮箱即可，注意，这里要注意把npm的源切回官方源，不然会报错

接着就发布npm包

npm publish

到此便大功告成

本文主要以学习记录为主，想试着写写东西，第一次写博客，主要是参考了这里--》使用vite构建Vue3组件库，发布npm包 - 掘金 (juejin.cn)。。我贴链接了，别告我侵权了噢【doge】【doge】