摘要：平臺(tái)主要功能如下支持客戶端渲染和服務(wù)端渲染微信登錄鑒權(quán)頁(yè)面組件增刪改查，復(fù)制移動(dòng)等圖片上傳微信文章一鍵復(fù)制等等動(dòng)態(tài)組件的配置原理之后專門用一篇文章詳細(xì)寫吧持續(xù)集成這個(gè)其實(shí)也不算是項(xiàng)目，算是前端的工具。

2017年算是踏入真正的前端的一年，從實(shí)習(xí)到去年，說(shuō)是前端的崗位，但卻因?yàn)閷?shí)習(xí)生的身份、公司技術(shù)不夠等原因，一直停留在傳統(tǒng)的html+css+jq，那時(shí)候感覺前端的世界在翻天覆地地變化，什么nodejs、react、vue、gulp、webpack什么的，都是聽說(shuō)過(guò)沒(méi)見過(guò)的東西，感覺那些特別高大上特別遙遠(yuǎn)。然后，我就毅然的辭職了，到了深圳工作，來(lái)到了現(xiàn)在這家公司。才真正的接觸到了上面那些高大上的東西。

接下來(lái)就用項(xiàng)目穿插著技術(shù)講解和新的來(lái)說(shuō)說(shuō)吧

傳統(tǒng)html+css+js,因?yàn)楣净臼且苿?dòng)端開發(fā)，所以移動(dòng)端適配的方案是使用淘寶團(tuán)隊(duì)的rem方案，然后因?yàn)槿粘；顒?dòng)開發(fā)的交互比較少，頁(yè)面要求不能太大（影響加載時(shí)間），所以就用了傳統(tǒng)的html+css+js開發(fā)，頂多引用一個(gè)Zepto，但是里面能學(xué)習(xí)到東西還是不少，從頁(yè)面布局css（rem）編寫方法，到j(luò)s規(guī)范寫法（讓人一看就懂的寫法，比如實(shí)現(xiàn)定義好dom變量，綁定事件統(tǒng)一用bind()等），另外造了一個(gè)抽獎(jiǎng)的輪子，算是增加了傳統(tǒng)頁(yè)面開發(fā)的經(jīng)驗(yàn)（之前自學(xué)過(guò)一段vue，然后就一直很鄙視傳統(tǒng)的開發(fā)模式哈哈哈）。后來(lái)有幾次活動(dòng)真的習(xí)慣用vue，就把zepto改成了vue（開發(fā)效率大大的提高啊，后來(lái)別人也用這個(gè)方式開發(fā)，算是開創(chuàng)了一個(gè)比較方便的開發(fā)模式（自豪臉））。
頁(yè)面就不能貼了，貼了大概就能知道我在哪家公司了哈哈哈

var form={
        $phone:$("#phone"),
        $sendCapture: $("#verify")
    }
 var api = {
        //定義正式環(huán)境還是測(cè)試環(huán)境
        _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)));//轉(zhuǎn)義url
        }
     }
     function bingEvent(){
         form.$phone.click(function(){
             ....
         })
     }
     //初始化
     init()
     function init(){
         bindEvent()
         api.login()
         ....
     }
     

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

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

再往下走就看文檔啦。

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

支持客戶端渲染和服務(wù)端渲染

微信登錄鑒權(quán)

頁(yè)面組件增刪改查，復(fù)制、移動(dòng)等

圖片上傳

微信文章一鍵復(fù)制

等等
動(dòng)態(tài)組件的配置原理之后專門用一篇文章詳細(xì)寫吧

這個(gè)其實(shí)也不算是項(xiàng)目，算是前端的工具。也是我主管來(lái)的時(shí)候才帶來(lái)了這個(gè)。這個(gè)工具主要是用jenkins來(lái)搭建，然后用各種插件來(lái)完成提前編譯、發(fā)布、回滾代碼的功能。說(shuō)說(shuō)主要思路：jenkins部署在一臺(tái)發(fā)布機(jī)上，發(fā)布機(jī)先拉去git代碼，執(zhí)行項(xiàng)目編譯命令，編譯成功后，ssh服務(wù)器，再執(zhí)行服務(wù)器上的腳本命令。這當(dāng)中學(xué)習(xí)到了不少服務(wù)器的知識(shí)和命令。直到最后，前端的小伙伴的都已經(jīng)忘了之前是怎么發(fā)布代碼的了哈哈

總結(jié)下來(lái)，恍如隔世，自己在這半年多中，收獲了技術(shù)，肯定了自己，但自己還是有比較大的進(jìn)步空間，在獨(dú)自發(fā)現(xiàn)問(wèn)題和解決問(wèn)題上，有時(shí)還是需要依靠同事解決，未來(lái)肯定還是在前端這條路走到黑，越往后走，就是性能和穩(wěn)定的方面的知識(shí)了。寫這篇文章，希望與大家共勉。

在這里以我的經(jīng)驗(yàn)給一些建議給前端初學(xué)者

1.原聲js不能忘記，尤其是不能局限于dom操作，要對(duì)數(shù)據(jù)的操作方法也要熟練，犀牛書多去看看
2.vue和react我這里就不說(shuō)孰好孰壞，每個(gè)人使用感覺不同，但如果你想往前端工程化方向走，在國(guó)內(nèi)，vue會(huì)比較容易入門。
3.遇到?jīng)]做過(guò)的事，沒(méi)碰過(guò)的技術(shù)，不要害怕，多上網(wǎng)找資料，即使跟同事主管溝通，這個(gè)過(guò)程你會(huì)成長(zhǎng)很多。
4.堅(jiān)持做有成就感和有意義的事