安装Vant-ui
npm i vant -S //安装vant
npm i babel-plugin-import -D //按需引入
在plugins
文件夹新增vant.js
文件
引入Button
组件为例
import Vue from "vue";
import 'vant/lib/index.css';
import {
Button
} from "vant";
Vue.use(Button);
在nuxt.config.js
文件进行配置
plugins: [
'@/plugins/vant'
],
安装px2rem
npm i lib-flexible -s
npm i postcss-px2rem-exclude -s
在plugins
文件夹新建lib-flexible.js
文件
import 'lib-flexible'
在nuxt.config.js
文件进行配置
plugins: [{
src: '@/plugins/lib-flexible',
ssr: false //不设置会报错
},
'@/plugins/vant'
],
build: {
postcss: {
plugins: {
'postcss-px2rem-exclude': {
remUnit: 75, // 设计图为750 * height
remPrecision: 2, // rem的小数点后位数
exclude: /node_modules|folder_name/i //取消vant组件css转成rem
}
}
},
}