官網(wǎng)要求：pc+移動端穆役，要求自適應(yīng)匕坯，兼容市面上絕大多數(shù)瀏覽器和移動終端常摧，要求用框架做样悟，謝絕jq郁副，可seo碾篡。
框架選型思路：
由于要用框架铡羡，還要可seo拭嫁，官網(wǎng)開發(fā)用vue開發(fā)民假，Nuxt.js正是符合需求浮入。
一、通過終端設(shè)備顯示不同路由
由于同時要做pc和移動端羊异，不想分兩套代碼事秀，經(jīng)過查詢資料彤断，發(fā)現(xiàn)Nuxt的中間件（middleware）正好符合我的需求。關(guān)于中間件可移步這里查看易迹。
根據(jù)中間件執(zhí)行流程順序：
1宰衙、nuxt.config.js
2、匹配布局
3睹欲、匹配頁面
所以可以在渲染頁面之前通過中間件判斷終端供炼，根據(jù)終端跳轉(zhuǎn)對應(yīng)路由，在此附上我的中間件代碼：
中間件寫在middleware文件夾下窘疮，然后在nuxt.config.js文件中全局添加中間件：
如此袋哼，就實現(xiàn)了在同一個框架內(nèi)根據(jù)終端匹配路由的效果，當(dāng)然闸衫，這里要做好路由規(guī)劃先嬉，才能跳轉(zhuǎn)得當(dāng)。
二楚堤、統(tǒng)一顯示效果
適配我想采用rem疫蔓，使得官網(wǎng)能在不同大小的屏幕上都能有一個統(tǒng)一的效果。這里我使用postcss-px2rem+flexible.js身冬。
npm install postcss-px2rem –save
flexible.js可以點此下載
flexiblle.js放在/static/js文件夾下衅胀，然后在nux.config.js中配置：
由于rem是同時適配移動和pc的，但是由于pc瀏覽器不像移動端那樣區(qū)分dpr酥筝，且也要有個最小寬度的問題滚躯，所以對下載后的flexible.js文件又做了一番修改，保證在pc和移動端都有一個合理的適配效果：
在上面代碼中我增加了終端判定掸掏，分別對不同端的rem做不同的運算處理。由于我們設(shè)計稿pc寬度為1920宙帝，移動端寬度為750丧凤，所以在使得100px=1rem的基準(zhǔn)下，分別使得當(dāng)前width/19.2和width/7.5步脓。
三愿待、多語言
多語言請看這篇文章
對于文章最后提到的三個需求，這里根據(jù)需求靴患，我實現(xiàn)了前兩個：
1仍侥、切換語言，不刷新頁面鸳君∨┰ǎ【只需要在切換的時候，設(shè)置store中的locale值為對應(yīng)的language值或颊，不做其他操作】
2砸紊、刷新頁面之后传于，還是當(dāng)前語言∨悖【這個需要將設(shè)置好的語言保存起來格了，放到本地緩存中，是個不錯的選擇】
代碼如下：
mounted:?function()?{
??????let?language?=?localStorage.getItem('language')?||?this.$i18n.locale;
??????this.convertLang(language);
????},
????methods:?{
??????convertLang(lang)?{
????????localStorage.setItem('language',?lang);
????????this.$i18n.locale?=?localStorage.getItem('language');
????????switch(lang){
??????????case?'en':
????????????this.curLang?=?'English';
????????????break;
??????????case?'zh':
????????????this.curLang?=?'中文';
????????????break;
????????}
??????}
}
