1.进入项目目录安装lib-flexible
npm install lib-flexible --save-dev
npm install amfe-flexible --save-dev
2.在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
import 'amfe-flexible/index.js'
3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// lib-flexible中删除
<meta name="viewport" content="width=device-width,initial-scale=1.0">
//amfe-flexible中不删除
<meta name="viewport" content="width=device-width,initial-scale=1.0">
4.安装px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
修改build/utils.js, 在cssLoader变量中
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
6.在vue的项目的根目录中打开 /src/HelloWorld.vue 文件，把template里面的东西全干掉，写上以下这些代码
<template>
<div class="hello">适配移动端</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 200px;
height: 200px;
font-size: 36px;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid green;
}
</style>
