因为我们项目就是在
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样式表参考链接:
修改vant的主题色
vant样式表
panda-vue-template
手把手搭建vue小商城2.0