这是一个用于开发 Vue3 组件/组件库、以及工具类函数的仓库。
自动化的文档网站，只需专注于组件的开发，文档全自动生成。
拆分组件的意义在于，细化项目的颗粒度，避免将复杂功能耦合在项目中，更方便后续的迁移改造、重写或移除、性能调优等工作。
在此基础上，高度抽象的组件还可复用，为其它项目中快速集成功能提供了可能性。
-
运行
npm run add添加组件 -
在
packages中开发代码，在src/pages下编写测试/示例页面。（代码展示面板部分暂无热更新，可手动运行npm run vue-to-md来即时更新。） -
运行
npm run change生成组件更新日志（lerna） -
运行
npm run build:pkg编译组件 -
运行
npm run publish发布组件 -
运行
npm run build然后提交更新文档网站。（可能需要一些时间，因为会将所有组件案例打包）
独立打包只生成一个 index 包，多文件打包（即按需打包）则是否存在 src 文件夹判定，分包在 src 开发。
组件工厂：packages/
组件目录：packages/xxxx/
组件打包文件夹：dist 组件打包 d.ts 文件夹：typings
模块包管理：lerna
组件设计：按需加载
单元测试：mocha、jest
持续集成、代码规范、提交规范
- 按需打包，独立打包
- 指定打包
- 对 d.ts 声明文件进行打包
- 提交组件的测试，lerna
- 文档的自动生成
区分：Vue2 Vue3 基于 UI 框架
打包：rollup
组件库文档：自动生成
打包：rollup
文档工具：JSDoc
npm install vite-plugin-importer --save
yarn add vite-plugin-importer
// vite.config.js
import { defineConfig } from "vite";
import usePluginImport from 'vite-plugin-importer'
export default defineConfig({
plugins: [
... // other plugins
usePluginImport({
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css",
}),
usePluginImport({
libraryName: "antd",
libraryDirectory: "es",
style: "css",
}),
usePluginImport({
libraryName: 'vant',
libraryDirectory: 'es',
style: (name) => `${name}/style/less`,
}),
usePluginImport({
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
},
})
// Other configurations welcome PR
];
})
yarn add babel-plugin-import -D
# 或
npm install babel-plugin-import -D
// babel.config.js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-plus',
// 引入组件
customName: (name) => {
return `element-plus/lib/components/${name}`
},
// 引入样式
// customStyleName: (name) => {
// return `element-plus/lib/components/${name}/style/css`
// },
},
],
],
}
查看当前包源
nrm ls
切换源
nrm use npm
查看登录用户
npm whoami
没有则登录
npm login
# OR
npm addUser
项目启动时 Node 环境：14.17.0 当前使用 Node 版本：v16.18.1