## 頁面自適應 選用淘寶 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;
width: 100%;
border-top: 1px solid #ccc;
content: ' ';
}
}
```