如何基于vue-cli3.0构建功能完善的移动端架子

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

项目地址: vue-cli3-H5

demo地址: https://zhouyupeng.github.io/vuecli3H5/#/

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: true,    // 开启 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  }}@media screen and (min-width: 769px) {  html {    font-size: 102.4PX;    font-size: 13.33333vw  }}@media screen and (min-width: 769px) {  html {    font-size: 102.4PX;    #app {      margin: 0 auto    }  }