国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何在github上創建個人項目的在線演示demo

kid143 / 2807人閱讀

摘要：在上搜索相關項目時會發現，有的項目不光寫了一手好文檔并且還給出了項目的在線運行。如何在維護源代碼的同時并同時生成項目主頁以下以的單頁應用為例，給出完整的項目維護以及生成項目主頁的步驟。后期可在該基礎上進行自己項目的開發。

前言

Github作為目前優秀的同性交友平臺，其上維護了眾多優秀的開源項目。目前Github上關于前端的項目也是數不勝數，Vue、React、Angular等等。自己也是通過官方文檔+github的方式來學習一些新的技術和框架。在github上搜索相關項目時會發現，有的項目不光寫了一手好文檔并且還給出了項目的在線運行Demo。事實勝于雄辯，一個在線演示可能給項目帶來更好的印象分。如何在github上維護自己個人項目源代碼的同時并生成項目主頁呢？

Github項目主頁

Github給用戶提供了運行靜態頁面的地址，如何展示個人項目的靜態頁面？以下是創建項目主頁的關鍵：

gh-pages分支

訪問地址：[github用戶名].github.io/[項目倉庫名]，如：monster1935.github.io/vue-example

生成項目主頁首先是將欲展示的靜態頁面推送的Github個人項目倉庫的gh-pages分支下，然后通過上述的訪問形式訪問。

如何在維護源代碼的同時并同時生成項目主頁

以下以Vue的單頁應用為例，給出完整的項目維護以及生成項目主頁的步驟。

一、Github上創建遠程倉庫

在github上為個人項目創建遠程倉庫，如下所示:

二、clone遠程倉庫到本地

創建好遠程倉庫后，使用git工具將遠程倉庫clone到本地，如下所示:

三、使用vue-cli生成vue單頁應用項目

進入項目根目錄，使用vue-cli生成vue的項目的初始結構。步驟如下：

# 以webpack模板生成項目原型
vue init webpack vue-example

在使用vue-cli腳手架工具生成vue項目過程中會提示是否安裝一些輔助工具庫，可根據自己項目要求酌情安裝，或者生成項目后安裝。

項目生成完畢后，進入package.json所在目錄執行npm install命令，安裝項目運行需要的依賴。

依賴安裝完成后，即可執行npm run dev命令啟動本地的webpack-dev-server進行開發調試。
如下圖所示，出現如下畫面代表vue項目初始化完畢。后期可在該基礎上進行自己項目的開發。

四、將項目推送到遠程倉庫

項目開發過程中，可以將項目源碼推送至github遠程倉庫中管理。

git add --all

git commit -m "Initial the vue project"

git push

五、執行項目構建命令，并將構建后的靜態頁面推送至gh-pages分支

項目開發完畢可以執行 npm run build 打包文件，進行文件的打包發布流程。

切換到gh-pages分支 git checkout -b gh-pages

執行 npm run build 命令，構建代碼

將dist目錄下的所有文件夾推送至遠程倉庫的gh-pages分支，執行以下命令：

# 強制添加dist文件夾，因為.gitignore文件中定義了忽略該文件
git add -f dist

# 提交到本地暫存區
git commit -m "Initial the page of project"

# 部署dist目錄下的代碼
git subtree push --prefix dist origin gh-pages

注：使用git subtree命令可以在同一分支上維護源代碼以及構建代碼，在部署時僅僅推送dist目錄下的內容。

小結

以上所述的在github上gh-pages分支上生成項目主頁主要是利用了github提供的靜態頁解析功能，因此本文中所屬的范圍僅使用于靜態頁面的部署。在將Vue應用部署到gh-pages分支后，可能會出現部分資源無法加載的問題，原因就在于vue中的webpack配置在打包時其publicPath為根路徑，如果該靜態頁在服務器中被訪問則不會出現以上問題。在github解析時如果按照根路徑解析會出錯，因此在github上部署靜態頁時可以考慮將publicPath設置為當前目錄，即 publicPath: "./" 。

使用Vue-cli webpack模板生成的vue項目，出現上述問題應設置config/index.js中build對象下的assetsPublicPath字段為assetsPublicPath: "./",原理都是設置publicPath字段。

更新

目前發現了一種更為簡便的部署到github gh-pages的方式，gh-pages 提供了更為簡便的管理本地項目到github的提交流程。詳情見vue-ghpages-test。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81632.html

相關文章

  • iconfont實踐小結

    摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

    bitkylin 評論0 收藏0

  • 發布 react 組件到 npm 上

    摘要：我發布了我的第一個組件，一個基于的標簽云組件。然后將這個編譯命令寫到里，如下那么以后要編譯下面的代碼，只需要執行現在我們已經有編譯好的代碼了，接下來就可以發布到供其他人使用了。 我發布了我的第一個 npm 組件，一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑，花在完善整個發布流程的時間遠多于寫這個組件本身的時間，所以我記錄下我覺得一個正常的 react 組件的...

    Yi_Zhi_Yu 評論0 收藏0

  • JS 插件文檔庫邀你一起協同創作

    摘要：期待你的加入，一起維護文檔，語雀文檔協作邀請鏈接，如果鏈接過期，請加個人微信號，并備注文檔協作。文檔介紹文檔在語雀平臺上，期待你的加入進行協作編寫，不要求所有的配置項都介紹到，列舉一些最常見的即可。 項目概覽 JS 插件文檔庫地址：JS 插件文檔庫 · 語雀 在線演示代碼倉庫：JS 插件文檔庫示例代碼 · GitHub 在線預覽：JS 插件在線演示 項目介紹 如今，隨著大前端...

    鄒強 評論0 收藏0

  • 收集整理適用博客建站免費開源Wordpress主題-簡約好看的WP主題

    摘要：最重要的就是找一個適合自己的主題了。事實上，免費主題也非常多，而且很多的免費主題在功能上和界面美觀上已經大大超過了付費的主題。加上這些主題都是開源的，基本上可以在上找得到源碼，安全性是沒有問題，主題的作者也在不斷更新當中。WordPress最重要的就是找一個適合自己的主題了。好一點的WordPress主題基本上都是要收費的，而且價格還不便宜，這導致了不少的新手朋友們很為難。而有時我們僅僅根據...

    番茄西紅柿 評論0 收藏2637

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<