摘要：平臺主要功能如下支持客戶端渲染和服務端渲染微信登錄鑒權頁面組件增刪改查，復制移動等圖片上傳微信文章一鍵復制等等動態組件的配置原理之后專門用一篇文章詳細寫吧持續集成這個其實也不算是項目，算是前端的工具。

2017年算是踏入真正的前端的一年，從實習到去年，說是前端的崗位，但卻因為實習生的身份、公司技術不夠等原因，一直停留在傳統的html+css+jq，那時候感覺前端的世界在翻天覆地地變化，什么nodejs、react、vue、gulp、webpack什么的，都是聽說過沒見過的東西，感覺那些特別高大上特別遙遠。然后，我就毅然的辭職了，到了深圳工作，來到了現在這家公司。才真正的接觸到了上面那些高大上的東西。

接下來就用項目穿插著技術講解和新的來說說吧

傳統html+css+js,因為公司基本是移動端開發，所以移動端適配的方案是使用淘寶團隊的rem方案，然后因為日常活動開發的交互比較少，頁面要求不能太大（影響加載時間），所以就用了傳統的html+css+js開發，頂多引用一個Zepto，但是里面能學習到東西還是不少，從頁面布局css（rem）編寫方法，到js規范寫法（讓人一看就懂的寫法，比如實現定義好dom變量，綁定事件統一用bind()等），另外造了一個抽獎的輪子，算是增加了傳統頁面開發的經驗（之前自學過一段vue，然后就一直很鄙視傳統的開發模式哈哈哈）。后來有幾次活動真的習慣用vue，就把zepto改成了vue（開發效率大大的提高啊，后來別人也用這個方式開發，算是開創了一個比較方便的開發模式（自豪臉））。
頁面就不能貼了，貼了大概就能知道我在哪家公司了哈哈哈

var form={
        $phone:$("#phone"),
        $sendCapture: $("#verify")
    }
 var api = {
        //定義正式環境還是測試環境
        _domain:’api.exapmle.com",

        //定義ajax(POST)的方法
        _post: function (url, params, callback) {
            var request = new XMLHttpRequest();
            request.open("POST", url);
            request.onreadystatechange = function(){
                try {
                    if (!request.response) return
                    var response = JSON.parse(request.response);
                    if(request.readyState === 4 && request.status === 200){
                        callback && callback(response);
                    }
                } catch (e) {
                    console.log("throw:", e);
                }
            };
            //post send()
            request.send(JSON.stringify(params));
        },
      //公共方法定義
        login: function () {
            var url = location.href;
      
            }
            //weChat login api 微信登陸接口
            location.href = this._domain + "api/wx/login?state=" +
                btoa(unescape(encodeURIComponent(url)));//轉義url
        }
     }
     function bingEvent(){
         form.$phone.click(function(){
             ....
         })
     }
     //初始化
     init()
     function init(){
         bindEvent()
         api.login()
         ....
     }
     

首先貼出nuxt官網，有中英文翻譯，可以事先了解一下
這個項目是為了seo而重構頁面的，也是頭一次接觸到服務端渲染的概念，雖然模糊，但是這個框架帶來的思想沖擊也是不小的。科普一下，瀏覽器頁面渲染分為客戶端渲染和服務端渲染，客戶端渲染是頁面在打開加載的時候才拉去數據，然后拼湊頁面；服務端渲染就是服務端（俗稱后臺）先拉取好數據，拼湊在js或者html里面，然后頁面加載的時候直接渲染。服務端渲染的目的是便于搜索引擎爬蟲抓取頁面，增加流量，也就是服務于seo。這個項目主要的一個服務端渲染的思想就是：在前端vue組件中，加入一個asyncData的方法，可以在里面拉去數據，然后會自動在服務端調用，相當于在服務端拼湊好數據。
舉個栗子：

async asyncData({ params, error ,query}) {
    const opt = {
      "id": params.id
    }
    let { data } = await axios.post(api.url, opt)
    return { readData: data} //注入this,直接調用this.readData

再往下走就看文檔啦。

這個算是唯一一個從零探索開發到現在可以作為工具給運營人員使用的平臺項目。不得不說，egg寫的文檔超級詳細，easywebpack的配置簡單，而且還有基于vue的項目，還有例子看，簡直貼心。這個項目算是打通前后端的入門項目，完全沒有后臺支持，數據保存用mongoose，也理解了很多后臺的概念，什么controller啊，定時任務、多進程、負載均衡等。平臺主要功能如下：

支持客戶端渲染和服務端渲染

微信登錄鑒權

頁面組件增刪改查，復制、移動等

圖片上傳

微信文章一鍵復制

等等
動態組件的配置原理之后專門用一篇文章詳細寫吧

這個其實也不算是項目，算是前端的工具。也是我主管來的時候才帶來了這個。這個工具主要是用jenkins來搭建，然后用各種插件來完成提前編譯、發布、回滾代碼的功能。說說主要思路：jenkins部署在一臺發布機上，發布機先拉去git代碼，執行項目編譯命令，編譯成功后，ssh服務器，再執行服務器上的腳本命令。這當中學習到了不少服務器的知識和命令。直到最后，前端的小伙伴的都已經忘了之前是怎么發布代碼的了哈哈

總結下來，恍如隔世，自己在這半年多中，收獲了技術，肯定了自己，但自己還是有比較大的進步空間，在獨自發現問題和解決問題上，有時還是需要依靠同事解決，未來肯定還是在前端這條路走到黑，越往后走，就是性能和穩定的方面的知識了。寫這篇文章，希望與大家共勉。

在這里以我的經驗給一些建議給前端初學者

1.原聲js不能忘記，尤其是不能局限于dom操作，要對數據的操作方法也要熟練，犀牛書多去看看
2.vue和react我這里就不說孰好孰壞，每個人使用感覺不同，但如果你想往前端工程化方向走，在國內，vue會比較容易入門。
3.遇到沒做過的事，沒碰過的技術，不要害怕，多上網找資料，即使跟同事主管溝通，這個過程你會成長很多。
4.堅持做有成就感和有意義的事