根據(jù)項目的需求，會有做移動端項目的時候空免，通過vue-cli3腳手架搭建完成后空另，需要進行一些配置，例如rem布局蹋砚、第三方組件庫等等扼菠，近期做了一些移動端的配置，來分享一下坝咐。個人想法循榆，不喜勿噴，謝謝大佬們墨坚。
1秧饮、通過vue-cli先創(chuàng)建一個vue3項目
如果不知道vue或者vue-cli，可以先了解一些，https://cn.vuejs.org/v2/guide/ 和https://cli.vuejs.org/zh/guide/prototyping.html 這兩個官方網(wǎng)站進行了解盗尸。按照步驟安裝相應的包已經(jīng)創(chuàng)建屬于自己的vue項目
2柑船、rem布局 和?pxtorem
首先rem是css單位，相比于px固定像素單位泼各，rem更加靈活椎组，還有現(xiàn)在比較好的vm。rem是根據(jù)html元素的字體大小來計算單位的历恐。在需求上通常都是要適配不同的手機型號寸癌，根據(jù)不同的分辨率，元素的大小能夠有相應的變化弱贼，在視覺上能夠做到最舒服的效果蒸苇。對于移動端來說，最出名的就是阿里的lib-flexible方案吮旅，其原理就是flexible根據(jù)不同的屏幕(dpr)來計算出html的font-size大小溪烤，然后通過js來動態(tài)的修改meta標簽中各屬性的屬性值。
pxtorem是能將px自動轉(zhuǎn)化成rem庇勃，方便檬嘀，說到底還是懶惰是最大的生產(chǎn)力。责嚷。鸳兽。
安裝lib-flexible
在命令行中運行: npm i?lib-flexible --save-dev
引入：安裝完成后，在vue項目中的main.js文件中引入 => import?'lib-flexible'
對于index.html來說罕拂，最好是不需要meta標簽揍异，因為flexible會自動添加上，因此可以刪除原本的meta標簽爆班。
安裝postcss-pxtorem
在命令行中運行: npm install postcss-pxtorem -D
設置規(guī)則( 更改postcss.config.js,該文件為使用vue-cli3自動創(chuàng)建的文件? )
若以上方式配置覺得太麻煩衷掷，推薦使用?postcss-px-to-viewport? 下載方式?yarn?add?postcss-px-to-viewport?-D
配置 ：
3、vue移動端調(diào)試工具 vconsole
平時在web應用開發(fā)過程中柿菩，我們可以console.log去輸出一些信息戚嗅，但是在移動端，也就是在手機上枢舶，console.log的信息我們是看不到的懦胞。這種情況下，可以選擇使用alert彈出一些信息祟辟，但是這種方法不怎么方便医瘫，也會阻斷JS線程侣肄，導致后面的線程都不執(zhí)行旧困。也影響調(diào)試體驗。那么，如果將console.log應用到移動端呢吼具？需要借助第三方插件：vConsole
安裝：npm install vconsole
main.js引入：import Vconsole from 'vconsole';?
4僚纷、vue關于webpack配置
vue2.0的版本目錄結構已經(jīng)變化了，沒有了之前build與config文件夾拗盒，因此如果需要配置build的生成目錄等打包需求怖竭，需要vue.config.js
vue.config.js文件與src文件平級
cli配置官網(wǎng)：https://cli.vuejs.org/zh/
項目的配置主要是根據(jù)具體的需求進行配置，已達到項目的最優(yōu)化陡蝇。
5痊臭、移動端組件庫的使用
移動端目前有很多好用的組件庫，包括 ：
Vux -?https://doc.vux.li/zh-CN/? (是基于WeUI和Vue(2.x)開發(fā)的移動端UI組件庫)
Vant -?https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro?(有贊前端團隊)
Mint-ui -?http://mint-ui.github.io/#!/zh-cn?(由餓了么前端團隊)
MUI -?http://dev.dcloud.net.cn/mui/?(dcloud)
Weui -?https://weui.io/(由微信官方設計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設計)
