一 首先安裝vue Cli
cnpm install -g @vue/cli
二 創(chuàng)建一個(gè)vue項(xiàng)目
vue create my-app
這個(gè)時(shí)候就已經(jīng)創(chuàng)建好了一個(gè)基礎(chǔ)的vue，創(chuàng)建完成后依次安裝我們需要的依賴
三 安裝vant
cnpm i vant -S
四 引入組件
1秉扑、可以全局導(dǎo)入所有組件，只需要在main.js里面引入即可：
? ? ? import Vant from 'vant';
? ? ?import 'vant/lib/index.css'
2嫡霞、按需引入（官方推薦）：babel-plugin-import
? ? cnpm i babel-plugin-import -D
在?babel.config.js?設(shè)置
module.exports?=?{??presets:?[????'@vue/cli-plugin-babel/preset'??],??plugins:?[????['import',?{??????libraryName:?'vant',??????libraryDirectory:?'es',??????style:?name?=>?`${name}/style/less`????},?'vant']??]}
五 less配置
? ?在vue.config.js里面為項(xiàng)目做基礎(chǔ)配置
css:?{
????loaderOptions:?{
??????less:?{
????????//?若使用?less-loader@5衙荐，請移除?lessOptions?這一級捞挥，直接配置選項(xiàng)。
????????lessOptions:?{
??????????modifyVars:?{
????????????//?或者可以通過?less?文件覆蓋（文件路徑為絕對路徑）
????????????hack:?`true;?@import?"./src/assets/css/reset.less";`,
??????????},
????????},
??????},
????},
??},
同時(shí)忧吟，vue-cli3.0的vue.config.js也是我們打包的配置文件砌函，如果有需要可以在此文件設(shè)置打包后的輸出文件以及靜態(tài)文件打包路徑
六 rem適配
vue和vant就安裝成功了，因?yàn)槭莣ebapp項(xiàng)目溜族，需要做屏幕適配讹俊，vant采用的是px，官方推薦兩個(gè)工具
postcss-pxtorem?是一款 postcss 插件煌抒，用于將單位轉(zhuǎn)化為 rem
lib-flexible?用于設(shè)置 rem 基準(zhǔn)值
安裝完成之后仍劈，配置postcss ，一般我們的設(shè)計(jì)稿是750寡壮，需要兼容vant耳奕，新建一個(gè)postcss.config.js，
module.exports?=?{??plugins:?{????'postcss-pxtorem':?{??????rootValue:?37.5,??????propList:?['*']????},??}}
