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

写作背景：

     上一篇最终因为版本依赖的不一致导致组件文档站点没能编译通过，当时选择了 vuepress@next，这次重新选择了 [email protected] 的版本，但还是存在 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"
  }
}      

1. 启动服务：​

   ​yarn docs:dev​

   ​；

增加侧边栏：

1. 包含快速启动；
2. 包含 Card 组件介绍；

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 提示​​[email protected]: Permission denied (publickey)；

• 生成秘钥：​

  ​ssh-keygen -t rsa -C [email protected]​

  ​；
• 打开公钥文件并拷贝内容弄；
• 添加公钥到 github的​

  ​SSH keys​

  ​；

写在最后：