搭建元件庫最小原型（支線）

寫作背景：

     上一篇最終因為版本依賴的不一緻導緻元件文檔站點沒能編譯通過，當時選擇了 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​

  ​；

寫在最後：