利用vue-cli打造簡單計算機並發布github page! (30Days challenge-4)

前言

計算機!!又是計算機，我記得我第一次寫計算機的時候還在AC讀學期二呢~時間過得真快真快!
這次的目標是利用vue打造一個類似的成品，當然在styling上要稍微下一點功夫讓它好看一些，順便還複習了一下要怎麼發布vue專案~!整體來說算是個不錯的練習!

使用技術

• CSS grid (坦白說我覺得用table做應該會更輕鬆一點..不過我認為我很需要多練習grid:D)
• vue-cli
• animate.css (我只是想要那個0去閃爍)

發布vue-cli專案並產生靜態頁面

這部分我倒是挺久沒碰了，這邊順便紀錄一下大致的流程。假設你也是用vue-cli做專案，你可以考慮用同樣的流程發布，當然也可以利用手動的方式~!

Step1.在github建立遠端repo，以這次的專案為例 vue-calculator

Step2.在專案目錄下新增vue.config.js檔案，並寫入以下內容

//vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-calculator/'
    : '/'
}

Step3.將本地專案與遠端專案連結並推上遠端

git init
git remote add origin https://github.com/windate3411/vue-calculator.git
git add .
git commit -m "first commit"
git push -u origin master

Step4.在根目錄下新增deploy.sh檔案，這是一個shell指令檔 執行後會運行裡面你所寫的指令

//deploy.sh
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
git push -f https://github.com/windate3411/vue-calculator.git master:gh-pages

cd -

設定完成之後請在你的終端機上輸入 ./deploy.sh 指令，順利的話就會將你的專案推上遠端的分支gh-pages。

Step5 回到github上利用setting設定靜態頁面

點選專案右上方的setting，往下拉設定靜態頁面的來源，我們這邊要選擇gh-pages，然後就結束了!

專案預覽

專案連結

github:https://github.com/windate3411/vue-calculator
githubPage:https://windate3411.github.io/vue-calculator/

參考文章

將Vue專案部屬到github Page
Vue-cli 部屬