2024-07-11 从零搭建一个基于vue3+ts的ui组件库，npm上传以及如何使用

前言：最近搞了个ui组件库，顺便写一下搭建过程。示例地址：https://iuniko.github.io/#/

其实吧，ui组件库就是一个插件的集合，只要搞懂了基本的demo，其他都是照猫画虎，顺水推舟即可。

基本的ui demo如何搭建？其实，这里面主要包括搭建组件的运行环境，然后把该组件给导出，最终通过打包形式上传到npm上，我们就可以引用该组件了。主要是三个步骤：

一：创建ui组件运行环境

我这里使用vite新建vue项目 npm init vite@latest

初始化后新建packages文件夹，在里面新建button文件夹和index.js，button文件夹里新建button.vue和index.js

// packages/index.ts
import "./index.less";
import tButton from "./button/index";
const install = app => {
    app.use(tButton);
};

const TUI = {
    install
};

export default TUI;

// packages/button/button.vue
<template>
  <div>
    <button><slot></slot></button>
  </div>
</template>

<script>
export default {
  name: "tButton",
};
</script>

// packages/button/index.ts
import tButton from "./index.vue";

tButton.install = app => {
    app.component(tButton.name, tButton);
};

export default tButton;

目录如下：

写完button组件后要在main.js引入

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

import App from "./App.vue";
import TUI from "../packages";

const app = createApp(App);
app.use(TUI);
app.mount('#app');

在App.vue引用一下

<template>
    <div>
        <t-button>按钮</t-button>
    </div>
</template>

如下图，表示ui组件可成功被引用，到这儿第一步算是完成

二：打包ui组件并上传到npm

打包这是个🔺重点。但是！如果你的电脑无法访问npm镜像源（https://registry.npmjs.org/） ，那么你将无法把ui组件上传到npm！你会问：用淘宝镜像之类的代替可以吗？（哒咩!）不行，因为npm不信任其他镜像源。

好了，我们先配置package.json文件

项目初始化的package.json文件是这样的

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.31"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.4"
  }
}

加入下面配置：

    "name": "这里输入你的自定义ui组件库名称，注意不要和npm上的重复",

    "private": false,
    "main": "./dist/baseUi.umd.ts",
    "module": "./dist/baseUi.es.ts",
    "exports": {
        ".": {
            "import": "./dist/baseUi.es.ts",
            "require": "./dist/baseUi.umd.ts"
        }
    },
    "files": [
        "dist/*"
    ],

这些配置主要是说明打的这个包是公开的，非私有的（private），如果你设置了private为true，那到下面就无法上传到npm；还有就是定义了导出的包的文件路径等。

然后配置vue.config.js文件

build: {
        lib: {
            entry: './packages/index.js',
            name: 'baseUI',
            fileName: (format) => `baseUI.${format}.ts`, 
            formats: ['es', 'umd'], 
        },
        rollupOptions: {
            external: ['vue'], 
            output: {
                globals: {
                    vue: 'Vue', // 抛出一个全局对象
                },
            },
        },
    },

接着就是开始打包：npm run build，示例：

嗯，紧接着就要上传到npm官网了。

如果！你没有npm账号，好说，先创建一个账号，下面的操作其实很简单，就只需执行2行命令即可。

首次上传需要登录npm，执行命令 npm login

ps：它会让你输入你的用户名、登录密码以及邮箱，还有邮箱验证码；登录成功，下次再publish就不需要再登录了。

登录成功了，就开始publish吧，执行命令npm publish

上传完了，可以到npm官网（https://www.npmjs.com/） 查看一下是否有你的包在，示例：

到这儿，算是完成了90%，剩下这一步就是引用

三：引用上传的组件

这里以我的ui库为例npm i iuniko-ui，然后在main.js(ts)里引用

import { createApp } from 'vue';
import App from "./App.vue";
import '/node_modules/iuniko-ui/dist/style.css'
import Iuniko from 'iuniko-ui';

const app = createApp(App);
app.use(Iuniko);
app.mount('#app');

效果如下：

至此，一个简单ui组件库demo算是完成了。

注意：我虽然用的是vue3，但是创建ui库的逻辑都是一样的，ui库一般由ui插件和ui文档组成，插件谁都会写，关键就是你把这个有多个插件组成的集合导出成一个库，就成了最基础的ui库，至于ui文档，它就是个网站，所以懂了这点你想写vue亦或是react的库就有思路了。