2018年1月23日 18:27:19
移動(dòng)端自適應(yīng)
來(lái)自手淘的 flexible

cnpm i lib-flexible -S
cnpm install px2rem-loader -S-d

在項(xiàng)目入口文件 main.js 里 引入 lib-flexible

// main.js
import 'lib-flexible'

mian.png

搞定后到開(kāi)發(fā)者工具查看根節(jié)點(diǎn)有沒(méi)有添加data-dpr="1"來(lái)判斷是否引入成功

lib-flexible引入完成,下面引入方便一個(gè)插件px2rem-loader
接下來(lái)引入開(kāi)發(fā)用的 px轉(zhuǎn)rem插件

// 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: 75
}
}
// ...

放進(jìn) loaders 數(shù)組中

// utils.js
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
// ...

utils.png

修改配置后需要重啟，然后我們?cè)诮M件中寫(xiě)單位直接寫(xiě) px , 設(shè)計(jì)稿多少就寫(xiě)多少 , 自動(dòng)轉(zhuǎn)rpx，美滋滋哈哈
搞定后到開(kāi)發(fā)者工具查看css中的px是否轉(zhuǎn)換為rem來(lái)判斷是否引入成功

vue.png

Vue引入餓了么ElementUI
Element-ui 中文文檔
下面教程 快速上手

npm i element-ui -S

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)

//.Vue中直接使用
<el-button>默認(rèn)按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>

<el-button type="text">文字按鈕</el-button>

element.png

npm run dev 后顯示空白修改config/index.js 中 build對(duì)象中的assetsPublicPath: '/', 為 './

index.png

加油寶寶們~