[指南] 替 Vue-SFC-Rollup 開發的 Vue 套件做個於 Github Pages 的 Demo 頁面

章節連結

使用 Vue-SFC-Rollup 進行開發 npm 套件時,當你完成後正心想要來有個 Demo 頁面給使用者在安裝前瀏覽一下,會發現 vue-sfc-rollup 並沒有提供 build 出 Vue.js 的編譯檔相關設定。若為此加裝一個 vue-cli 又顯得麻煩也不好管理。這邊筆記下發佈到 github-apges 的方式和製作流程。
npm logo


原理

1. 利用 Vue 本身得以用 cdn 的方式引入的方式,引入 vue3 和 vue3-sfc-loader 兩個套件
2. 額外撰寫 script ,並在 createApp 中加入 template
3. github Pages 本身可支援存取 root 或是 docs 資料夾上的 *.html 當作內容


優點

1. 不需要額外設定 rollup.config.js
2. 與原先 rollup 相關設定分離,方便日後進行額外操作和管理

缺點

  1. 1. 需要額外複製套件的 *.vue 內容,造成重複的 Code
    2. vue3-sfc-loader 不支援 typescript 和過於複雜的引入, style 方面僅支援 css

程式碼


參考資料

1. Vue.js 编译
2. vue3-sfc-loader

按讚加入粉絲團

延伸閱讀