使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github

故梦梦

已于 2023-10-20 22:14:34 修改

阅读量432

点赞数

于 2023-10-20 22:13:50 首次发布

本文链接：https://blog.csdn.net/qq_42704945/article/details/133954399

版权

线上连接
线上组件地址 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 组件
---

在这里插入图片描述
完整目录结构

故梦梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github

使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github
复制链接

扫一扫