前端自學筆記-第二篇(vuePress自動部署 & 後臺項目自學)

一、jenkins自動部署vuePress博客項目

自動化部署項目demo鏈接

http://blog.flutterweb.cn

jenkins自動部署的好處

本地代碼推動到git倉庫後，jenkins能完成後續部署事項，減輕工作量，比如，項目自動打包，自動項目部署到靜態服務器，部署情況郵件通知。

tip:

今天部署好了vuepress項目，現在寫好了博客頁面，只要vscode一提交，jenkins會自動打包並且部署；如果部署失敗，還會發送郵件提醒。爽的不行！

教程推薦

1. Jenkins打造強大的前端自動化工作流:

https://juejin.im/post/5ad198...

1. jenkins配置郵件通知(上篇教程雖然有，建議用這個):

   https://www.cnblogs.com/imyal...

部署過程中的坑

1. vuepress 配置要注意，對於腳本的理解很重要，不然坑很大。

   vuepress的dist目錄比一般的項目要多兩級，因而配置稍稍不一樣。
   貼圖感受下：
   

    send build artificial over SSH， 參數說明：
    
    Name:選擇一個你配好的ssh服務器
    
    Source files ：寫你要傳輸的文件路徑
    1. 特別注意，起始目錄是根目錄 '/'
    2. 如果mobx項目下面，打包後目錄是build，則
    
        a. source files: build/build.tar.gz
    
        b. Remove prefix: build/
    3. 如果mobx項目下面，打包後目錄是build/docs/dist，則
    
        a. source files: build/docs/dist/build.tar.gz
    
        b. Remove prefix: build/docs/dist/

1. 另外，購買服務器時，大家還是買阿里雲吧，最好配置高點。
   我買的是騰訊雲服務器，價格便宜。但今天爲了自動化部署項目，jenkins掛了三四十次了，真是慘不忍睹。。。

二、後臺管理系統學習進度

兩週左右學完了簡單的後臺項目

項目地址：

Vue + Element UI 實現權限管理系統 前端篇：https://www.cnblogs.com/xifen...

收穫：

1. 瞭解了登陸流程，語言國際化，自定義皮膚
2. 動態加載菜單、權限管理是重點也是難點
3. mock使用了自己服務器搭建的yapi ,還算是穩定
4. 剛好最近公司在上一個後臺項目，自己也有參與。這套教程不但幫助自己快速入手項目，而且偶爾能幫同事答疑。
5. 對於element ui各個模塊用法及參數理解更透徹，過程中不斷才坑，不斷積累經驗

最難的後臺項目學習計劃：下兩週慢慢搞定

項目地址：

手摸手，帶你用vue後臺：
https://juejin.im/post/59097c...

第一個項目教程非常詳細，簡單快速的對於後臺項目框架有了整體的思維。

而這第二個項目，將會是第一個的深入。當然如果能夠搞定，收穫也將會很大。