【九月打卡】第5天 组件库集成及编写

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节：第8章 使用vuepress 编写组件文档
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
8-10 集成组件库并添加显示和交互——在vite配置项中引用我们项目使用到的依赖项。
8-11 编写组件库文档的快速上手——初步体验vitepress组件交互效果。

课程收获：

集成组件库并添加显示和交互

1、新建theme文件夹，引入ElementPlus和我们开发的组件库。

import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import mUI from 'c3-element-components'
import 'c3-element-components/style.css'


export default {
  ...DefaultTheme,
  enhanceApp({app}) {
    app.use(ElementPlus)
    app.use(mUI)
  }
}

2、配置完成后需要重启才能生效。

编写组件库文档的快速上手

1、编写快速开始界面。
2、使用md语法编写组件库文档。
3、需要了解相关md语法以及vitepress扩展语法：点击跳转。

异常处理

1、无法显示图标问题。
因为我用的是@element-plus/icons-vue，所以跟着老师视频出现了错误，改正后依然不显示，最后发现在我们的packages包中后来拿出的图标封装写法不正确，正确写法如下：

 app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])

今天的学习了组件库集成及编写，以前总以为组件库文档只是文字，虽然看到element等官方有交互效果，从未想过自己可以实现，今天我跟着课程就实现了，简单易懂，非常有成就感。

下一步就是 开始 完善组件库文档了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​

​