Vant UI + Vue + Cli3.0 + Rem移動端項目搭建
1. 創(chuàng)建vue項目
- 創(chuàng)建項目
vue create vant-demo
- 引入
less(通過vue ui可視化頁面安裝依賴插件）
vue ui
2. 引入vant ui
npm i vant -S
3. 按需引入
3-1. 安裝babel 插件
npm i babel-plugin-import -D
溫馨提示：在使用自動按需引入的時候绎谦，在使用相關(guān)組件的時候娜扇，需要在maim.js中一一引入，如下：
import { Button,Cell, CellGroup } from 'vant';
Vue.use(Cell);
Vue.use(CellGroup)
Vue.use(Button);
3-2. 配置babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
4. Rem適配
4-1. 安裝postcss-pxtorem與amfe-flexible
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
4-2. 配置vue.config.js
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 37.5, // 換算的基數(shù)
propList : ['*'],
}),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 8']
})
]
}
}
},
}
4-3. 配置main.js
import 'amfe-flexible/index.js'
