使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github
线上连接
线上组件地址 dc-pro-component
1.项目构建,创建项目dc-pro-component
pnpm init
pnpm install @vitejs/plugin-vue vite -D
pnpm-workspace.yaml 软链接
packages:
- "packages/**"
- "examples"
2.创建文件夹,examples写的组件测试
pnpm init
创建src文件夹创建对应文件
config文件内容
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
3.创建文件夹,packages
在component文件对应init
pnpm init
组件源码对应配置config
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
build: {
target: "modules",
//打包文件目录
outDir: "es",
//压缩
minify: false,
//css分离
//cssCodeSplit: true,
rollupOptions: {
//忽略打包vue文件
external: ["vue"],
input: ["src/index.js"],
output: [
{
format: "es",
//不用打包成.es.js,这里我们想把它打包成.js
entryFileNames: "[name].js",
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: "es",
preserveModulesRoot: "src",
},
{
format: "cjs",
entryFileNames: "[name].js",
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: "lib",
preserveModulesRoot: "src",
},
],
},
lib: {
entry: "./src/index.js",
formats: ["es", "cjs"],
},
},
plugins: [vue(),VueSetupExtend()],
});
4.封装组件button,src这样
components/src/button/button.vue
<template>
<Button v-bind="{ ...$attrs }" @click="onClick">Primary Button</Button>
</template>
<script setup name="Dbutton">
defineOptions({
name: "DButton",
});
import { Button } from "ant-design-vue";
const onClick = () => {};
</script>
components/src/button/index.js
//局部注册
import button from "./button.vue";
import { withInstall } from "dcqc-utils";
//app.use(注册组件)
const DButton = withInstall(button);
export default DButton;
utils也发布npm,所以也需要在utils文件pnpm init
export const withInstall = (comp) => {
comp.install = (app) => {
//注册组件
app.component(comp.name, comp);
};
return comp;
};
component.js
export { default as Button } from './button';
export { default as Space } from './space';
components/src/index.js
//全局注册
import * as components from './components';
export * from './components';
export const install = function (app) {
Object.keys(components).forEach(key => {
const component = components[key];
if (component.install) {
app.use(component);
}
});
return app;
};
export default {
install,
};
components/package.json
{
"name": "dc-pro-component",
"version": "1.0.6-beat",
"description": "",
"main":"src/index.js",
//发布的时候修改
//"main": "lib/index.js",
//"module": "es/index.js",
"files": [
"es",
"lib"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "vite build",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
"keywords": [
"dc-pro-component"
],
"author": "dcqc",
"license": "MIT",
"dependencies": {
"ant-design-vue": "4.x",
"vite-plugin-vue-setup-extend": "^0.4.0"
}
}
如果有包与包的依赖，软链接
pnpm install dc-pro-component dc-utils -D -w
5.自动发布github page
#!/usr/bin/env sh
###
# @Date: 2023-10-18 15:58:56
# @Auth: 463997479@qq.com
# @LastEditors: 463997479@qq.com
# @LastEditTime: 2023-10-18 16:06:54
# @FilePath: \dc-component\deploy.sh
###
# 忽略错误
set -e #有错误抛出错误
# 构建
pnpm run docs:build #然后执行打包命令
# 进入待发布的目录
cd docs/.vitepress/dist #进到dist目录
git init #执行这些git命令
git add -A
git commit -m 'deploy'
git push -f git@github.com:lan-an/dc-component.git master:gh-pages #提交到这个分支 这个地址是ssh地址需要秘钥
cd -
rm -rf docs/.vitepress/dist #删除dist文件夹 文档doc
项目package.json
"deploy":"bash d
直接运行
pnpm run deploy
在github上的setting=>Page生成链接地址
6.npm发布
npm login
npm publish
7.文档的集成
pnpm add vitepress -D
添加执行脚本
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs"
},
我们封装组件集成在theme
import DefaultTheme from "vitepress/theme";
import * as dc from "dc-pro-component";
//全局注册组件
export default {
...DefaultTheme,
enhanceApp: async ({ app }) => {
app.use(dc);
},
};
doc的配置config
export default {
//部署自己服务器去掉/
base: '/dc-component',
themeConfig: {
siteTitle: 'dcqcComponent',
logo: '/logo.svg',
search: {
provider: 'local'
},
nav: [
{ text: '组件', link: '/component/button' },
{ text: '指南', link: '/guide/method' },
{ text: 'hooks', link: '/hooks/method' },
{ text: 'gitHub', link: 'https://github.com/lan-an/dc-component' }
],
sidebar: {
'/component/': [
{
text: '组件',
items: [
{
text: 'button',
link: '/component/button',
activeMatch: '/component/button'
}
]
}
],
'/guide/': [
{
text: '指南',
items: [
{
text: '快速上手',
link: '/guide/method',
activeMatch: '/guide/method'
}
]
}
]
},
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023-present Evan You'
},
editLink: {
pattern: ({ filePath }) => {
return `https://github.com/lan-an/dc-component/docs/${filePath}`
}
}
},
markdown: {
lineNumbers: true
}
}
index.md主页
---
layout: home
hero:
name: DcqcComponent
text: Vite & Vue powered static site generator.
tagline: Lorem ipsum...
image:
src: /logo.svg
alt: VitePress
actions:
- theme: brand
text: Get Started
link: /guide/method
- theme: alt
text: View on GitHub
link: https://github.com/lan-an/dc-component
features:
- icon: ️
title: 开发依赖
details: 采用 Vue + antd + Vite + pnpm包管理 实现
- icon: ⚡️
title: 软依赖
details: 所有依赖均采用软链接
- icon:
title: 开箱即用
details: 常用基础 UI 组件
---
完整目录结构
