Vue Cli Flexble是一個(gè)Vue Cli 4插件，用于支持移動(dòng)端Web應(yīng)用的自適應(yīng)布局。它采用rem作為單位，配合flexible.js自動(dòng)計(jì)算根字體大小，實(shí)現(xiàn)頁(yè)面元素的自適應(yīng)大小。Vue Cli Flexble還集成了postcss-pxtorem插件，可以將樣式文件中的px單位自動(dòng)轉(zhuǎn)為rem單位，進(jìn)一步簡(jiǎn)化自適應(yīng)布局的實(shí)現(xiàn)。

//安裝
npm install vue-cli-plugin-flexible -D
//使用
vue create my-project //創(chuàng)建新項(xiàng)目
cd my-project
vue add flexible //添加插件

安裝完成后，Vue Cli Flexble會(huì)自動(dòng)創(chuàng)建一個(gè)postcss.config.js配置文件，在其中配置了postcss-pxtorem插件的參數(shù)，并引入了flexible.js腳本文件。我們只需要編寫(xiě)樣式文件時(shí)使用標(biāo)準(zhǔn)的px單位，然后在瀏覽器中就可以實(shí)現(xiàn)自適應(yīng)布局了。

不過(guò)需要注意的是，對(duì)于一些絕對(duì)定位、寬度、高度等不適合使用rem作為單位的元素，我們?nèi)匀恍枰謩?dòng)重寫(xiě)樣式。

借助于Vue Cli的開(kāi)發(fā)環(huán)境，我們可以快速地開(kāi)發(fā)出適用于移動(dòng)端設(shè)備的Web應(yīng)用，并利用Vue Cli Flexble自動(dòng)處理自適應(yīng)布局的細(xì)節(jié)。這樣我們就能專注于業(yè)務(wù)開(kāi)發(fā)，同時(shí)又能較少地關(guān)注移動(dòng)端設(shè)備的兼容性問(wèn)題了。