1. 创建文件夹【huanyou-element-components-doc】并打开终端初始化,默认生成【package.json】文件
npm init -y
2. 安装vitepress
安装在开发环境,并指定版本,避免语法不一致导致效果不出现
cnpm i -D vitepress@0.20.1
3. 在 【package.json
】修改 script
{
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"serve": "vitepress serve docs"
}
}
4. 根目录下创建【docs】 → 【index.md】
---
home: true,
heroText: 基于element-plus二次封装组件
tagline: 高扩展性的组件库
actionText: 快速开始
actionLink: / /
features:
- title: 简介至上
details: 所有组件支持全量引入和按需引入,并且用法简单
- title: 高扩展性
details: 全新的组件API设计,支持高度自定义
- title: 全面覆盖
details: 涵盖基础组件、通用组件和业务组件
---
5. 运行项目
npm run dev
效果如图所示
6. 创建配置文件【docs → .vitepress → config.js】
module.exports = {
// 网站标题
title: "基于element-plus二次封装组件库",
// 部署的基础路径
base: "/",
// 配置网站html的head标签 网站图标
head: [],
themeConfig: {
// 头部导航
nav: [
{
// 导航名称
text: "首页",
// 跳转项目链接(路由)
link: "/",
},
{
text: "gitee站点",
link: "xxx",
target: "_blank",
},
],
// 侧边导航栏
sidebar: [
{
text: "快速上手",
link: "/quickStart/",
},
{
text: "图标选择器",
link: "/chooseIcon/",
},
{
text: "省市区选择",
link: "/chooseArea/",
},
{
text: "趋势选择",
link: "/trend/",
},
{
text: "时间选择",
link: "/chooseTime/",
},
{
text: "通知菜单",
link: "/notification/",
},
{
text: "导航菜单",
link: "/menu/",
},
{
text: "城市选择",
link: "/chooseCity/",
},
{
text: "进度条",
link: "/progress/",
},
{
text: "日历",
link: "/calendar/",
},
{
text: "表单",
link: "/form/",
},
{
text: "弹出框表单",
link: "/modalForm/",
},
{
text: "表格",
link: "/table/",
},
],
},
};
7. 侧边栏link导航由文件名决定【docs → xxx文件夹 →index.md】
8. 安装插件并导入组件库【docs → .vitepress →theme → index.js】基础配置
// 当前组件库依赖element-plus,因此必须同时安装
cnpm i -S element-plus @element-plus/icons-vue huanyou-element-components
// theme > index.js
import DefaultTheme from "vitepress/theme";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import mUI from "huanyou-element-components";
import "huanyou-element-components/style.css";
export default {
...DefaultTheme,
enhanceApp({ app }) {
app.use(ElementPlus);
app.use(mUI);
},
};
9. 使用组件库
选择图标:【chooseIcon → index.md】
## 图标选择器
用户点击按钮,弹出框显示所有图标,点击图标可以复制图标代码
### 基本用法
<br>
<div>
<m-choose-icon title='选择图标' v-model:visible="visible">选择图标</m-choose-icon>
</div>
<br>
### 代码示例
<script setup>
import {ref} from 'vue'
let visible = ref(false)
</script>
``` js
<m-choose-icon title='选择图标' v-model:visible="visible"></m-choose-icon>
<script setup lang="ts">
import {ref} from 'vue'
let visible = ref<boolean>(false)
</script>
```
图示