成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何在github上創(chuàng)建個(gè)人項(xiàng)目的在線演示demo

kid143 / 2895人閱讀

摘要：在上搜索相關(guān)項(xiàng)目時(shí)會發(fā)現(xiàn)，有的項(xiàng)目不光寫了一手好文檔并且還給出了項(xiàng)目的在線運(yùn)行。如何在維護(hù)源代碼的同時(shí)并同時(shí)生成項(xiàng)目主頁以下以的單頁應(yīng)用為例，給出完整的項(xiàng)目維護(hù)以及生成項(xiàng)目主頁的步驟。后期可在該基礎(chǔ)上進(jìn)行自己項(xiàng)目的開發(fā)。

前言

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

Github項(xiàng)目主頁

Github給用戶提供了運(yùn)行靜態(tài)頁面的地址，如何展示個(gè)人項(xiàng)目的靜態(tài)頁面？以下是創(chuàng)建項(xiàng)目主頁的關(guān)鍵：

gh-pages分支

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

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

如何在維護(hù)源代碼的同時(shí)并同時(shí)生成項(xiàng)目主頁

以下以Vue的單頁應(yīng)用為例，給出完整的項(xiàng)目維護(hù)以及生成項(xiàng)目主頁的步驟。

一、Github上創(chuàng)建遠(yuǎn)程倉庫

在github上為個(gè)人項(xiàng)目創(chuàng)建遠(yuǎn)程倉庫，如下所示:

二、clone遠(yuǎn)程倉庫到本地

創(chuàng)建好遠(yuǎn)程倉庫后，使用git工具將遠(yuǎn)程倉庫clone到本地，如下所示:

三、使用vue-cli生成vue單頁應(yīng)用項(xiàng)目

進(jìn)入項(xiàng)目根目錄，使用vue-cli生成vue的項(xiàng)目的初始結(jié)構(gòu)。步驟如下：

# 以webpack模板生成項(xiàng)目原型
vue init webpack vue-example

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

項(xiàng)目生成完畢后，進(jìn)入package.json所在目錄執(zhí)行npm install命令，安裝項(xiàng)目運(yùn)行需要的依賴。

依賴安裝完成后，即可執(zhí)行npm run dev命令啟動本地的webpack-dev-server進(jìn)行開發(fā)調(diào)試。
如下圖所示，出現(xiàn)如下畫面代表vue項(xiàng)目初始化完畢。后期可在該基礎(chǔ)上進(jìn)行自己項(xiàng)目的開發(fā)。

四、將項(xiàng)目推送到遠(yuǎn)程倉庫

項(xiàng)目開發(fā)過程中，可以將項(xiàng)目源碼推送至github遠(yuǎn)程倉庫中管理。

git add --all

git commit -m "Initial the vue project"

git push

五、執(zhí)行項(xiàng)目構(gòu)建命令，并將構(gòu)建后的靜態(tài)頁面推送至gh-pages分支

項(xiàng)目開發(fā)完畢可以執(zhí)行 npm run build 打包文件，進(jìn)行文件的打包發(fā)布流程。

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

執(zhí)行 npm run build 命令，構(gòu)建代碼

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

# 強(qiáng)制添加dist文件夾，因?yàn)?gitignore文件中定義了忽略該文件
git add -f dist

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

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

注：使用git subtree命令可以在同一分支上維護(hù)源代碼以及構(gòu)建代碼，在部署時(shí)僅僅推送dist目錄下的內(nèi)容。

小結(jié)

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

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

更新

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81632.html

相關(guān)文章

  • iconfont實(shí)踐小結(jié)

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

    bitkylin 評論0 收藏0

  • 發(fā)布 react 組件到 npm 上

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

    Yi_Zhi_Yu 評論0 收藏0

  • JS 插件文檔庫邀你一起協(xié)同創(chuàng)作

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

    鄒強(qiáng) 評論0 收藏0

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

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

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

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