搭建组件库最小原型（支线）

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

写作背景：

上一篇最终因为版本依赖的不一致导致组件文档站点没能编译通过，当时选择了 vuepress@next，这次重新选择了 vuepress@1.x 的版本，但还是存在 webpack 的版本依赖问题，所以还是写一下处理的过程和搭建组件库文档站点的过程。

解决方案：

最终的处理很简单，将对应的包指定版本安装到项目中，去覆盖掉通过依赖树导入的包，最终变更的依赖如下：

搭建组件库站点：

1. 安装 vuepress 依赖：yarn add -D vuepress；

2. 创建说明文档：mkdir docs && echo '# Hello VuePress' > docs/README.md；

3. 配置命令：

{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}

4. 启动服务：yarn docs:dev；

注：这几条都来自 vuepress 文档，因为上次启动服务正常，卡在了构建时，这次就特地验证一下，构建通过后我们可以将docs/.vuepress/dist配置到忽略的文件列表。

增加侧边栏：

1. 包含快速启动；

2. 包含 Card 组件介绍；

配置内容如下，位置在**docs/.vuepress/config.js**：

module.exports = {  themeConfig: {    sidebar: ["/", "/components/card"],  },};

• /components/card 是 card 组件的介绍页面，文件类型 md，文件位置docs/components/card.md；

在 Markdown 中使用 Card 组件：

1. 新建放置 Card 组件的目录：docs/.vuepress/components，默认解析.vue 文件自动注册为全局异步组件；

2. 将开发完成的 Card 组件连带样式放置到components目录，并将样式文件导入到组件中，组件文件名按组件 name 字段调整。

3. 组件文档最少包含三项：样式示例、代码示例、属性说明；

• 编写 markdown 需要注意制表符会导致组件渲染失效，需要用空格对代码进行缩进。

其他的配置：

1. 移植组件库的说明文档到站点中，替换一开始创建的 markdown 文件来充当快速入门；

2. 为我们的站点添加一个标题到docs/.vuepress/config.js。

发布到 Github page：

1. 调整站点配置的 base 为对应项目：base:"/it200-ui/"；

2. 新建deploy.sh发布脚本；

3. 调整 git push 的命令到 it200-ui 项目下的 gh-pages 分支；

4. 运行 sh deploy.sh开始打包发布站点；

• 推送 github 提示**git@github.com: Permission denied (publickey)；**

• 生成秘钥：ssh-keygen -t rsa -C zxin088@gmail.com；

• 打开公钥文件并拷贝内容弄；

• 添加公钥到 github 的SSH keys；

写在最后：

deploy.sh 执行完成后我们的站点就已经发布到 github page 上了，我们可以通过IT200-UI 站点来访问看一下效果，至此我们组件库开发的主线和支线任务就圆满完成了，期间有一些内容有省略，参考源码任无法完成的，欢迎留言。