如何用 GitHub 展現本身的產品

前言

再過幾天一大批大學生就要投入到找工做的隊伍當中，今年畢業生又是創歷史新高--820 萬。如何讓本身在這麼多人中脫穎而出？除了長期的基礎積累外，額外的營銷手法仍是能給本身加加分的。

作軟件開發的，或者說對作軟件開發有興趣的同窗都會學習或者動手練習過項目，要麼是跟着網站學、要麼是對着書本網上看到的東西練習一遍，可是這些個作出來的東西咱們應該如何展現出來，或者是讓面試官看到？一定簡歷也就只是簡單介紹本身，面試也只是個把時間，很難把本身會的東西都展現出來。

再者是瀏覽簡歷的時候要是看到你作過的做品和源碼，其實對於面試官來講仍是能加很多分的，一定看了你作過的東西基本上能看出不少表面上看不到的東西。

這個就是我接下來要講的東西，利用 GitHub 來託管本身的源碼和展現本身的產品，若是你正在找工做，那麼也許對你可能有點幫助。。。

下面是利用 vue 實現頁面滿屏切換

主要功能點：

1. 實現全屏定時輪播，輪播時間可設置
2. 每屏頁面內容可定製
3. 每一個屏都有對應的 key 可手動點擊切換，並支持鍵盤切換
4. key 背景和選中樣式可定製
5. 頁面切換時動畫效果可定製
6. 封裝成組件併發布到 npm

實現

• 首先咱們用 vue 模板中的 webpack-simple來快速搭建一個 vue 項目，項目名就叫：vue-pages-toggle，具體搭建細節可看這裏傳送門
• 詳細項目內容看這個vue-pages-toggle
• 效果圖，在線demo

由於咱們今天不是談論怎麼寫這個插件的，這裏就不作詳細介紹了,迴歸到主題.

1. 建立一個 GitHub 帳號
2. 在本身的 GitHub 上建立項目
3. 提交源碼到 GitHub
4. 生成線上可預覽的項目
5. 發佈到 npm 供其餘人使用

這裏重點講講後 3 點，1 和 2 打開GitHub 地址 sign-in => new repository 便可建立一個本身的項目。

上面都準備好後：切換到你當前姓名根目錄下，接着執行一下命令，注意要先安裝 git,git 下載

提交源碼到 GitHub

• git init 【初始化】
• git add ./ 【添加，工做區到暫存區】
• git commit -m "first commit" 【提交，由暫存區到版本區】
• git remote add origin https://github.com/wqb2017/vu... 【遠程添加到 github 項目中】
• git push -u origin master 【提交到對應版本】

生成線上可預覽的項目

上面第三點【提交源碼到 GitHub】完成後，接着如下內容

• 切換到 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

• 預覽

  [github 用戶名].github.io/[項目倉庫名]

個人地址就是 :https://wqb2017.github.io/vue...

最後一步就是【發佈到 npm 供其餘人使用】

• 註冊帳號

  傳動門

• 登陸 npm 帳號

  npm login

• 發佈項目到 npm

  npm publish

注意

解決使用 Vue-cli webpack 模板生成的 vue 項目，資源路徑問題。出現上述問題應設置 config/index.js 中 build 對象下的 assetsPublicPath 字段爲 assetsPublicPath: './'。