Vue3+vite UI组件库搭建记录

前言

本文主要讲述如何使用vite快速搭建属于自己的UI组件库

一些准备

• 默认node版本18及以上

1.创建项目

• 创建项目文件夹demo-ui，使用npm初始化项目

  cd demo-ui
  npm init -y
  # 安装相关依赖
  
  npm i -D vite vue

• 创建相关目录以及文件夹，下面有简单说明：

demo-ui
├─ package-lock.json
├─ package.json
├─ README.md
└─ src // 源码文件夹
   ├─ components // 组件相关 
   │  ├─ button // button组件相关
   │  │  ├─ button.vue
   │  │  └─ index.js 
   │  └─ index.js // 所有组件入口
   └─ index.js // 主入口文件

1.1 编写组件

• button.vue

<template>
    <button class="dm-button">
        <slot ></slot>   
    </button>
</template>

<script>
export default {
    name: "dm-button"
}
</script>
<style>
.dm-button {
    border: 1px solid skyblue;
    background: skyblue;
    color: white;
    padding: 8px 12px;
}
</style>

• components/button/index.js

import button from "./button.vue"
export default button

• components/index.js

export { default as button } from "./button"

• src/index.js,组件编写完后，开始编写入口文件，这里为了方便，我们不写intall函数实现vue插件，而是直接导出组件。

import * as components from "./components";

export default {
  ...components,
};

最后，一个最简单的组件库就已经编写完成，尽管代码还有很多完善的地方，但这些不是目前关注的重点，可以后续慢慢完善。接下来，需要通过部署开发环境来查看组件库效果。

2. 编写开发环境

demo-ui
├─ App.vue
├─ build
│  └─ vite.config.dev.js
├─ index.html
├─ main.js
├─ package-lock.json
├─ package.json
├─ README.md
└─ src
   ├─ components
   │  ├─ button
   │  │  ├─ button.vue
   │  │  └─ index.js
   │  └─ index.js
   └─ index.js

由于篇幅关系，这里就不展示全部文件代码，其实很简单，就是编写一个index.html和main.js以及App.vue文件而已。这里创建build/vite.config.dev.js文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

最后在package.json添加运行脚本,执行npm run dev即可运行：

{
"scripts": {
    "dev": "vite --config ./build/vite.config.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},
}

效果如下：

3. 打包

我们在build文件夹下增加vite.config.prod.js文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  target: "es2015",
  build: {
    outDir: path.resolve(__dirname, "../dist"),
    lib: {
      entry: path.resolve(__dirname, "../src/index.js"),
      name: "demo-ui",
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

增加打包命令，并执行npm run build

{
 "scripts": {
    "dev": "vite --config ./build/vite.config.dev.js",
    "build": "vite build --config ./build/vite.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

可以看到打包产物

demo-ui
├─ dist
│  ├─ demo-ui.js
│  ├─ demo-ui.umd.cjs
│  └─ style.css

其他

1. install函数

1. 引入組件
2. 引入样式

https://stackoverflow.com/questions/72854489/vite-and-antd-error-vitecss-inline-javascript-is-not-enabled-is-it-set-in

3. 引入多语言

4. 引入字体文件