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

長期更新前端自學筆記，歡迎關注

前端自學筆記 - 第一篇(nginx/flutter/後臺系統/vuepress博客）

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

自動化部署項目demo連接

blog.flutterweb.cn

jenkins自動部署的好處

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

tip:

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

教程推薦

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

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

部署過程當中的坑

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/
複製代碼

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

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

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

項目地址：

Vue + Element UI 實現權限管理系統

收穫：

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

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

項目地址：

手摸手，帶你用vue後臺

第一個項目教程很是詳細，簡單快速的對於後臺項目框架有了總體的思惟。

而這第二個項目，將會是第一個的深刻。固然若是可以搞定，收穫也將會很大。