] },
{
title: '设计',
collapsable: true,
children: [
'views/design/color/',
] },
{
title: '组件',
collapsable: true,
children: [
'views/components/basic/',
'views/components/form/',
'views/components/navigation/',
'views/components/notice/',
'views/components/other/'
] },
] }
}
3、使用vue组件
官网中提到，所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，可以在markdown中引用, vue文件中的代码高亮我用的是vue-highlightjs 查看这里
4、编写文档
由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，对于SSR 不怎么友好的组件（比如包含了自定义指令），你可以将它们包裹在内置的 ClientOnly 组件中，而且注意因为是ssr,组件内部beforeCreate, created生命周期钩子函数访问不到浏览器 / DOM 的 API，只能在beforeMount和mounted中调用。
---
title: 'Basic 基础'
sidebarDepth: 2
---
## Icon 图标
<ClientOnly>
<sakura-icon/>
<font size=5>Attributes</font>
| 参数| 说明 | 类型 | 可选值 | 默认值 |
| :------ | ------ | ------ | ------ | ------ |
| name | 图标名称 | string |- | - |
| color | 图标颜色, 支持常见颜色和十六进制颜色 | string |- | - |</ClientOnly>
5、覆盖默认主题样式
在.vuepress下新增style.styl进行覆盖。
6、部署到github
官网上介绍的很清楚，点这里。
在项目根目录下新增deploy.sh,windows下直接命令行运行./deploy.sh即可发布到github pages上。
结语
如果你能看到这里，非常感谢，第一次写文章，希望大家多多提出意见。组件库还有很多细节需要完善，比如里面css的类名命名我没做的很规范，大部分组件都是自己测试没有测到复杂或特殊场景，还有很多功能还没支持。通过这段时间制作组件库，自己的技术有了一定提升，官网的展示融入了自己的一点想法和设计，希望大家喜欢~~ 谢谢！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。
