目錄
對於學生黨來說,買個服務器是比較困難的事情(新手開篇不知道說啥)。
但是人家碼雲大哥和github知道廣大新手程序員的痛苦,他們自己提供了服務器給我們部署，雖然只能部署靜態資源，但是已經很仁至義盡了。人家"阿里雲爸爸"買個低配服務器都死貴的，而且部署也比較麻煩。今天簡單跟大家說下如何用碼雲上的服務器部署靜態資源如博客等。
一、碼雲及工具介紹
碼雲: 不必多說，支持git及svn的代碼托管平台。但凡愛學習的程序猿都喜歡去這個平台上發布及鑽研源碼
VsCode: 別和 Microsoft Visual Studio 搞混了,前端寫代碼的非常好用的工具。高效,友好。不過隨着該工具的發展,貌似越來越大,很耗內存(估計插件越來越多,自己刪除不必要的插件應該會好點)。 不過我認為寫輕量級的應用還是非常友好的，類似博客這種
vue-cli: 腳手架工具，快速搭建vue應用，其實ui組件類似 element-ui 也是通過vue-cli(去看看源碼就知道)創建出來的
Gitee Pages: 免費的碼雲服務器，就是通過它來部署服務器靜態資源的 詳情請參考鏈接:https://gitee.com/help/categories/56
二、操作步驟
(1) 創建vue-cli項目
執行指令: vue create 項目名(自定義), 然后稍等提示
選擇手動選擇功能（Manually select features）
我選擇了Router 和 Css預處理器
路由模式選擇了history(歷史)模式
css預處理器選擇兼容node環境下的scss
配置放在了package.json下
過程中的其他選擇項我忽略帶過了 自己感覺對所要講的不是特別重要
稍等片刻，項目初始生成
(2) 碼雲創建倉庫
點擊導航欄的加號 選擇創建倉庫
設置倉庫的名稱，記住倉庫的地址 然后點擊創建就行
創建后跳轉的頁面如下圖,記住我提示的2行git指令接下來要用
(3) 修改並提交項目到碼雲倉庫
這一點很重要：項目新建 vue.config.js 內容如下:
module.exports = {
publicPath:"/deploy" // 剛才生成的倉庫的英文路徑名稱 （因為碼雲用戶名和這個名稱不同，碼雲部署時會生成二級路由/deploy為項目部署目錄,不加的話待會打包生成dist時里面的js css 圖片路徑都會因為是根目錄下而無效)
} 然后運行指令 npm run build 生成dist目錄
因為git默認會忽略不提交dist文件，所以在.gitignore中把 /dist 注釋了 最好刪掉
然后執行git命令
git add . （注意add后面空格后有個小點）
git commit -m '提交代碼'
git remote add origin 剛才創建的倉庫的ssh
git push -u origin master
碼雲打開那個倉庫，此時我們發現項目已成功保存到了指定的倉庫中
(4) 運行項目
如圖操作，點擊服務 再點擊 Gitee Pages
由於我們的項目打包到了 dist目錄 中 所以部署目錄寫dist 點擊啟動
注意上面的網址 生成好的網址點進去就是碼雲為我們部署好的項目了 點擊進去就可以看到部署的項目了 非常方便！
(5) 注意點
每次代碼更新都需要重新打包提交到碼雲 Gitee Pages重新啟動
三、尾聲
第一次博客園寫文章，寫得我差點放棄，不過堅持下來了，感覺挺好。最近想仿寫一下element-ui組件，心得與過程會持續在博客園上跟新，拭目以待
2020-04-02