# mini_devui

**Repository Path**: ggbhack/mini_devui

## Basic Information

- **Project Name**: mini_devui
- **Description**: 搭建一个VUE3+vite+vitepress+ts 组件库 demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-12
- **Last Updated**: 2021-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-12 14:39:50
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-12 22:25:14
-->
# Vue 3 + Typescript + Vite  组件库工程化

## 一、工程初始化项目搭建

```
yarn create vite vite-demo --template vue-ts

or 

npm init vite@latest vite-demo -- --template vue-ts

```

#### 构建生产包

```
"build":"vue-tsc --noEmit && vite build"
```

## 二、文档库搭建

#### 安装VitePress
```
yarn add -D vitepress
```
#### 添加笔译预览脚本
```
"docs:dev":"vitepress dev docs",
"docs:build":"vitepress build docs",
"docs:serve":"vitepress serve docs"
```
#### 创建文档
在根目录 添加docs文件夹
并创建一个 index.md 文件

执行 脚本
```
npm run docs:dev
```
即可看到效果

#### 添加导航
在docs目录下创建 .vitepress/config.ts 文件

添加以下内容

```ts
/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-12 15:55:43
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-12 16:02:30
 */
const sidebar = {
    '/': [
        { text: '快速开始', link: '/' },
        {
            text: '通用',
            children: [
                {
                    text: 'Button按钮',
                    link:'/components/button/'
                }
            ]
        },
        {
            text:'导航'
        },
        {
            text:'反馈'
        },
        {
            text:'数据录入'
        },
        {
            text:'导航'
        },
    ]
}

const config = {
    themeConfig: {
        sidebar,
    }
}

export default config;

```

## 三、创建自己自定义UI 组件

在根目录下创建一个叫 devui 的文件

并在文件下创建一个一个组件 button/button.tsx

```tsx
export default ()=><button>你好</button>
```




#### 在组件中使用自定义的组件

在.vitepress 下创建 theme/index.ts
 代码如下
```ts
import Theme from "vitepress/dist/client/theme-default";
import Button from "../../../devui/button/button";
export default {
    ...Theme,
    enhanceApp({ app }) { 
        app.component('d-button', Button);
    }
}
 ```

重启后运行--报错
```
React is not defined

```
解决方案，将根目录下的vite.config.ts 复制到docs目录下并去掉
plugin总的vue() 因为vitepress已经支持 vue() 不需要重复导入
代码如下

```ts
import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vueJsx()]
})
```

## 四、实现代码收起与展开

#### 插件安装 
```
yarn add -D vitepress-theme-demoblock
or 
npm install -D vitepress-theme-demoblock
```

#### 申明插件
在.vitepress/config.ts 中引入注册
```ts
import demoBlock from 'vitepress-theme-demoblock'

const config = {
    // 其他配置
    markdown: {
        config: (md) => {
            //  这里可以使用 markdown-it 插件 
            const { demoBlockPlugin } = demoBlock
            md.use(demoBlockPlugin)
        }
    }
}

export default config;
```

#### 注册组件+引入样式
在.vitepress/theme/index.ts
```ts
import Theme from "vitepress/dist/client/theme-default";
import Button from "../../../devui/button/button";
import Demo from "vitepress-theme-demoblock/components/Demo.vue"
import DemoBlock from "vitepress-theme-demoblock/components/DemoBlock.vue"
// 导入主题样式
import 'vitepress-theme-demoblock/theme/styles/index.css'

// 导入插件的主题 如果下面这个引入的话 Demo 和DemoBlock 不需要在引入
import { registerComponents } from './register-components.js'
export default {
    ...Theme,
    enhanceApp({ app }) {
        app.component("d-button", Button);
        app.component("Demo", Demo);
        app.component("DemoBlock", DemoBlock);
        registerComponents(app)
    }
}
```

## 五、构建DevUI CLI 创建组件模板

安装依赖
```
yarn add -D commander inquirer fs-extra kolorist esbuild
```

后续文章将不再进行更新

文章参考 ![手把手带你从0到1搭建一个vue3组件库：mini-vue-devui](https://juejin.cn/post/7024443197854056456#heading-28)
合集文章参考 ![组件库从0到1](https://juejin.cn/column/6961051124031815687)