## 页面自适应 选用淘宝 lib-flexible
> 安装lib-flexible
```
npm install lib-flexible --save
在main.js页面引入import ‘lib-flexible‘;
```
> 安装 px2rem-loader
```
npm install px2rem-loader
```
> 配置px2rem-loader
```
在build/untils.js文件里配置如下：
我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader] 这里加入px2remLoader
```
## 环境基础配置
> build文件夹 ~ webpack.base.conf.js 文件配置文件引用别名
```
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components'),
'common': resolve('src/common'),
}
}
```
> 打包后图片 字体 引入路径问题 引用相对路径 在config文件夹 修改index.js代码 如下：修改 assetsPublicPath: '/',
```
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
```
> 打包后图片 字体 引入路径问题 引用相对路径 在build文件夹 修改utils.js代码 如下：增加 publicPath: '../../' 这一行
```
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
```
> .Vue 文件模板
```
<template>
<div class="">
</div>
</template>
<script>
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>
```
## 移动端部分手机浏览器（如UC浏览器） 边框不兼容 使用伪类仿造
```
.border-1px { //下边框
position: relative
&::after {
display: block;
position: absolute;
left: 0;
bottom: 0;
100%;
border-top: 1px solid #ccc;
content: ' ';
}
}
```