因为我们项目就是在
vue-cli3.x
的基础上进行的一个能力的补充,新的脚手架生成的项目如何引入vant
,简单的说一下。 项目相关: panda-vue-template 手把手搭建vue小商城2.0
vue
项目,如何引入使用vant
可以看看这个-->有赞vant组件库的引入;@vue/cli3.x
脚手架引入vant也很简单,我们先安装一下:$ npm install vant --save
sass
来作为css的一个预编译器的,但是vant是用的less
语法,所以我们还需要安装下less
,不然会报错。$ npm isntall less less-loader --save-dev
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
// vant引入:
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: name => `${name}/style/less`
},
'vant'
]
]
}
// main.js
import { Button } from 'vant'
Vue.use(Button)
postcss-px-to-viewport
来配置vw解决移动端适配解决方案,将viewportWidth
设置为了750
,那么你还需要在postcss.config.js文件中将其selectorBlackList
名单中把vant
加进去,因为vant的样式是按325px
来设计的,不然vant的组件都会缩小一半。module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 750,
unitPrecision: 3,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
+ selectorBlackList: ['.ignore', 'van'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
}
}
vant
的主题色?在@vue/cli3.x
的项目中,修改主题色变的是件简单的事情。vue.config.js
配置文件中向向预处理器Loader传递选项,就可以替换的vant
的默认样式:module.exports = {
// ...
css: {
loaderOptions: {
less: {
modifyVars: {
'font-size-sm': '100px',
'font-size-md': '200px',
'font-size-lg': '300px',
}
}
}
}
};
vant
也给我们提供了一份它的样式表:vant样式表