likes
comments
collection
share

vite+vue3搭建UI组件库，超级简单

作者站长头像
站长
· 阅读数 15

背景

公司想制作一个富文本的UI库.，然后叫我来负责开发搭建工作，没有做过UI库的我还是比较感兴趣的，所以就好好的研究了哈，发现UI库也就这样，没有什么太难的地方，说的直白一点，就是将你本地封装的组件打包发布到npm上面去，就行啦！

技术

这次搭建的UI组件库所用到的技术主要是以下几种：

  • vite + vue3 + TS
  • @vitejs/plugin-vue-jsx

搭建

我们通过vite正常去搭建一个项目即可，这点就不用多说了；直接根据官网进行搭建即可！

创建组件文件

package（根目录下创建）

创建以下文件

// package/editor 
// package/editor/quillEditor.vue 
// package/editor/index.ts 
// package/index.ts

package/editor/quillEditor.vue

<template>
  <div class="quill-editor">
    <div id="vite-quill-editor">测试</div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped>
#vite-quill-editor {
    color:red;
}
</style>

package/editor/index.ts

import type { App } from 'vue';
// 引入quill样式
import 'quill/dist/quill.snow.css';
import quillEditor from './quillEditor.vue';
 
// 使用install方法，在app.use挂载
quillEditor.install = (app: App) => {
  app.component(quillEditor.__name as string, quillEditor)
}
 
export default quillEditor;

package/index.ts

// package/index.ts
import type { App } from 'vue';
import QuillEditor from './editor';

// 所有组件列表
const components = [ QuillEditor ];

// 定义 install 方法
const install = (app: App): void => {
  // 遍历注册所有组件
  /*
    component.__name ts报错
    Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
    Type 'undefined' is not assignable to type 'string'.ts(2345)
    解决方式一：使用// @ts-ignore
    解决方式二：使用类型断言 尖括号语法(<string>component.__name) 或 as语法(component.__name as string)
  */
  components.forEach(component => app.component(component.__name as string, component))
}

export {
  QuillEditor
}

const viteQuillEditor = {
  install
}

export default viteQuillEditor;

以及的三个文件就将组件弄完成了，下面将配置文件，主要是针对打包发布等操作。

package.js

主要的文件都做了如下文字描述:

{
  "name": "vite-quill-editor", // 组件名称
  "private": false, // 必须为false
  "version": "0.1.0", // 版本
  "type": "module",
  "main": "./dist/vite-quill-editor.umd.cjs", // 入口文件
  "module": "./dist/vite-quill-editor.js", // 文件
  "exports": { // 导入导出文件以及引入样式
    "./dist/index.css": "./dist/style.css",
    "./index.css": "./dist/style.css",
    ".": {
      "import": "./dist/vite-quill-editor.js",
      "require": "./dist/vite-quill-editor.cjs"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "author": "", // 作者
  "license": "MIT", // 公开方式
  "dependencies": {
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "quill": "^1.3.6",
    "vue": "^3.4.15"
  },
  "devDependencies": {
    "@types/node": "^20.11.17",
    "@vitejs/plugin-vue": "^5.0.4",
    "terser": "^5.27.0",
    "typescript": "^5.2.2",
    "vite": "^5.1.0",
    "vue-tsc": "^1.8.27"
  }
}

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx({})],
  build: {
    outDir:'dist',
    assetsDir:'assets',
    sourcemap:false,
    lib:{
      name:'vite-quill-editor',
      entry: resolve(__dirname, 'package/index.ts'),
      fileName:'vite-quill-editor'
    },
    rollupOptions:{
      // 确保外部化处理那些你不想打包进库的依赖
      external:['vue'],
      output:{
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        exports: 'named',
        externalLiveBindings:false,
        globals:{
          vue:'Vue'
        }
      }
    },
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
      format: {
        comments: false
      }
    },
    // cssCodeSplit:true
  }
})

当你配置到此操作以后，你就可以直接打包了。等打包完成以后你会发现多了一个dist文件，在里面会有三个文件，一个是css的还有两个是js的文件，那么你就成功了。

如果你想在本地运行的话，只需要在该项目运行：

npm link

然后在该项目中运行:

// 根据你自己创建的名称运行安装即可
npm link vite-quill-editor

最后在该项目中引入及可:

import { QuillEditor } from 'vite-quill-editor'; 
import "vite-quill-editor/index.css";

如果你做到这儿的时候有疑问说：我看到别人的项目（npm包）都是lib然后没有源码的那种是怎么回事啊？别问我怎么知道，因为我也有这个疑问，所以花了点时间去弄了下，这次就顺便给大家都说说吧！

第一步

创建文件

// dist 
// dist/lib 
// 然后在dist创建终端git init, 初始化信息。

比如：

{
  "name": "vite-quill-editor",
  "version": "1.0.2",
  "description": "富文本编辑器",
  "main": "./lib/vite-quill-editor.umd.cjs",
  "module": "./lib/vite-quill-editor.js",
  "exports": {
    "./index.css": "./lib/style.css",
    ".": {
      "import": "./lib/vite-quill-editor.js",
      "require": "./lib/vite-quill-editor.umd.cjs"
    }
  },
  "keywords": [
    "vite-quill-editor",
    "quill-editor",
    "quill",
    "富文本编辑器",
    "富文本"
  ],
  "repository": "https://github.com/zh317626/vite-quill-editor",// git地址
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

第二步

修改vite.config.ts中的:

outDir:'dist/lib',

然后你在打包， 打包成功以后，你在发布到npm即可，哪他就只有打包编辑以后的代码了。第一步的配置你需要根据自己的需要修改哈。在发布以前可以在本地测试测试然后在发布都是可以的。

总结

总体来说搭建基本的UI组件库也就这些东西，看一遍然后自己再研究研究基本上都能学个大概。我搭建这个组件库主要是因为自己想搭建一个富文本编辑器，主要是我发现用quill搭建的富文本编辑器都有很多问题，比如：主题气泡和工具类不能同时显示等问题，所以我想自己搭建一个来解决这些问题的东西。比较quill还是比较不错的轻量级富文本框架。

如果有跟我想法差不多的，我们可以一起来。逐步去完善优化他。

好啦今天就到这儿了，祝各位小伙伴，新年快乐！初四快乐！

转载自:https://juejin.cn/post/7333631025758076947
评论
请登录