html全局布局 vue_基于vue-cli3.0构建功能完善的移动端架子

基于vue-cli3.0构建功能完善的移动端架子，主要功能包括

webpack 打包扩展

css：sass支持、normalize.css、_mixin.scss、_variables.scss

vw、rem布局

跨域设置

eslint设置

cdn引入

路由设计、登录拦截

axios、api 设计

vuex状态管理

webpack 打包扩展

vue-cli3.*后目录结构大改，去除了以往的build,config文件夹，要实现配置的改动在根目录下增加vue.config.js进行配置

css：sass支持、normalize.css、_mixin.scss、_variables.scss

使用的css预处理器是sass，对于css mixin，变量这里做了全局引入，并且引入normalize.css 使HTML元素样式在跨浏览器上表现得的高度一致性

vue.config.js配置

css: {

// 是否使用css分离插件 ExtractTextPlugin

extract:isProduction ? true:false,

// 开启 CSS source maps?

sourceMap: false,

// css预设器配置项

// 启用 CSS modules for all css / pre-processor files.

modules: false,

sass: {

data: '@import "style/_mixin.scss";@import "style/_variables.scss";' // 全局引入

}

}

}

vw、rem布局

对于移动端适配方案使用的是网易新闻的方法,

使用vw + rem布局

/**

750px设计稿

取1rem=100px为参照，那么html元素的宽度就可以设置为width: 7.5rem，于是html的font-size=deviceWidth / 7.5

**/

html {

font-size: 13.33333vw

}

@media screen and (max-width: 320px) {

html {

font-size: 42.667PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 321px) and (max-width:360px) {

html {

font-size: 48PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 361px) and (max-width:375px) {

html {

font-size: 50PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 376px) and (max-width:393px) {

html {

font-size: 52.4PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 394px) and (max-width:412px) {

html {

font-size: 54.93PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 413px) and (max-width:414px) {

html {

font-size: 55.2PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 415px) and (max-width:480px) {

html {

font-size: 64PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 481px) and (max-width:540px) {

html {

font-size: 72PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 541px) and (max-width:640px) {

html {

font-size: 85.33PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 641px) and (max-width:720px) {

html {

font-size: 96PX;

font-size: 13.33333vw

}

}

@media screen and (min-width: 721px) and (max-width:768px) {

html {

font-size: 102.4PX;

font-size: 13.33333vw

}

}

&