基于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    }  }