Vue3+Vite+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages（vitepress文档渲染.vue组件-推荐使用第二种）_element-plus目录结构

最终效果

一、创建Vue3+Vite项目

可以参考我之前发布的vite快速搭建vue3项目文章来创建；也可以直接使用我开源Vue3.2+Ts+Vite3+Pinia+Element-Plus模板wocwin-admin

以下我以 wocwin-admin 项目为例

当前目录结构如下

二、组件开发

1、首先需要创建一个 packages 目录，用来存放组件

2、该目录下存放每个组件单独的开发目录，和一个 index.ts 整合所有组件，并对外导出

3、每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.ts 便于外部引用

4、这里以组件 TTable 为例，完整的 packages 目录结构如下：

5、需要注意的是，组件必须声明 name，这个 name 就是组件的标签

6、整合并导出组件

1、编辑 packages/table/index.ts，实现组件的导出

import Table from './src/index.vue'
import { withInstall } from '../withInstall'

const TTable = withInstall(Table)
export default TTable

1
2
3
4
5
6

2、编辑 packages/index.ts 文件，实现组件的全局注册

...
import TTable from './table'
// 存储组件列表
const components = [
  TTable,
 ....
]
// 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
const installComponents = (app: any) => {
  components.forEach((comp: any) => {
    app.component(comp.name as string, comp)
  })
}
const install = (app: any, router?: any) => {
  installComponents(app)
}
export default {
  ...components, // 按需引入
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、集成vitepress及完善其配置

一、集成viitepress

1、安装vitepress(也看用yarn、npm)

pnpm add vitepress -D
1

2、根目录下创建目录 docs并在 其目录中创建 index.md 文件其内容如下：

# Hello Vitepress
1

3、在docs下新建public文件夹，并追加图片及.ico和静态资源文件（css）

4、添加 scripts

"scripts": {
  "docs:dev": "vitepress dev docs",
  "docs:build": "vitepress build docs"
},
1
2
3
4

5、至此文档目录结构如下

6、启动vitepress文档，页面如下

二、配置 vitepress

1、首页配置（即：docs/index.md文件）如下修改：

---
layout: home

title: T-ui-plus
# titleTemplate: 选项卡描述
editLink: true
lastUpdated: true
hero:
  name: T-ui-plus
  text: vue3基础组件
  tagline: Vue3 中基于Element-plus二次封装基础组件文档
  image:
    src: /img/wocwin.jpg
    alt: t-ui-plus
  actions:
    - theme: brand
      text: 安装指南
      link: /components/
    - theme: brand
      text: 组件预览
      link: /components/TSelect/base.md
features:
  - icon: 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/69167