官网要求：pc+移动端，要求自适应，兼容市面上绝大多数浏览器和移动终端，要求用框架做，谢绝jq，可seo。
框架选型思路：
由于要用框架，还要可seo，官网开发用vue开发，Nuxt.js正是符合需求。
一、通过终端设备显示不同路由
由于同时要做pc和移动端，不想分两套代码，经过查询资料，发现Nuxt的中间件（middleware）正好符合我的需求。关于中间件可移步这里查看。
根据中间件执行流程顺序：
1、nuxt.config.js
2、匹配布局
3、匹配页面
所以可以在渲染页面之前通过中间件判断终端，根据终端跳转对应路由，在此附上我的中间件代码：
中间件middleware.js
中间件写在middleware文件夹下，然后在nuxt.config.js文件中全局添加中间件：
nuxt.config.js
如此，就实现了在同一个框架内根据终端匹配路由的效果，当然，这里要做好路由规划，才能跳转得当。
二、统一显示效果
适配我想采用rem，使得官网能在不同大小的屏幕上都能有一个统一的效果。这里我使用postcss-px2rem+flexible.js。
npm install postcss-px2rem –save
flexible.js可以点此下载
flexiblle.js放在/static/js文件夹下，然后在nux.config.js中配置：
nuxt.config.js中配置
由于rem是同时适配移动和pc的，但是由于pc浏览器不像移动端那样区分dpr，且也要有个最小宽度的问题，所以对下载后的flexible.js文件又做了一番修改，保证在pc和移动端都有一个合理的适配效果：
结合自身情况，修改后的flexible.js
nuxt.config.js
在上面代码中我增加了终端判定，分别对不同端的rem做不同的运算处理。由于我们设计稿pc宽度为1920，移动端宽度为750，所以在使得100px=1rem的基准下，分别使得当前width/19.2和width/7.5。
三、多语言
多语言请看这篇文章
对于文章最后提到的三个需求，这里根据需求，我实现了前两个：
1、切换语言，不刷新页面。【只需要在切换的时候，设置store中的locale值为对应的language值，不做其他操作】
2、刷新页面之后，还是当前语言。【这个需要将设置好的语言保存起来，放到本地缓存中，是个不错的选择】
代码如下：
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;
}
}
}
网友评论