vue项目搭建并配置移动端自适应

加粗样式

1. 开发环境安装

npm install -g cnpm --registry=https://registry.npm.taobao.org  全局安装淘宝镜像

cnpm install --global vue-cli
vue init webpack my-project
cd my-project 
cnpm install 
cnpm run dev

2.使用rem 布局，安装flexible

npm i lib-flexible --save

3.在main.js引入lib-flexible

  import 'lib-flexible'

4.添加根目录index.html中添加meta标签

<meta name='viewport' content='width=device-width,initial-scale=1.0'>

5.将px转rem 安装px2rem-loader

  npm i px2rem-loade --save-dev

6.配置px2rem-loader build/utils.js

var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}
function generateLoaders(loader, loaderOptions) {
  var loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}

7.使用px2rem外部引用css时没有将px 转为rem，所以需要 在node_modules

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width /7.5;   //将10改为7.5
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

这样设置完。外部css要使用1re100px,内部直接使用px自动编译