vuejs第二篇 vue-cli配置移動端自適配(引入flexible)
原文網址
http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/
1.安裝lib-flexible
npm i lib-flexible --save2.在專案入口檔案main.js中引入lib-flexible import 'lib-flexible/flexible.js'3.在專案根目錄的index.html 頭部加入手機端適配的meta的程式碼
|
5.配置px2rem-loader
在vue-cli生成的webpack 配置中,vue-loader 的options和其他樣式檔案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
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders =
[cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
6.然後重啟後 在元件中寫單位直接寫px 然後在瀏覽器中的檢查就可以看到 單位是rem