Blog

一句话：组件库 = packages 放组件 + examples 本地调试 + lib 打包发 npm。

项目定位

dee-ui 是基于 vue-cli + Element UI 的业务组件库，支持按 Excel 字段生成 JSON，再套模板渲染大型问卷表单。

目录结构

dee-ui/
├── packages/     # 各组件源码，单组件 export install
├── examples/     # 开发调试，直接 import packages
└── lib/          # npm run lib 产出

单组件安装写法：

import LongText from './src/main';
LongText.install = function (Vue) {
  Vue.component(LongText.name, LongText);
};
export default LongText;

发布流程

npm run lib          # 打包
npm login            # 首次
npm version patch    # minor / major
npm publish

消费方

import Vue from 'vue';
import DeeUI from 'dee-ui';
import 'dee-ui/lib/dee-ui.css';
Vue.use(DeeUI);

小结

  • 私有组件库标准范式，与 Element Plus / Vant 源码结构类似
  • Vue 3 新项目建议改用 Vite library mode + defineOptions

延伸阅读