vue-cli3.0与vant的引入

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充，新的脚手架生成的项目如何引入vant，简单的说一下。 项目相关： panda-vue-template 手把手搭建vue小商城2.0 1、安装 如果你是老的脚手架搭建的vue项目，如何引入使用vant可以看看这个-->有赞vant组件库的引入； 新的@vue/cli3.x脚手架引入vant也很简单，我们先安装一下： $ npm install vant --save 因为我们的项目中本来是使用sass来作为css的一个预编译器的，但是vant是用的less语法，所以我们还需要安装下less，不然会报错。 $ npm isntall less less-loader --save-dev 2、配置 配置安装参考官网的引入组件教程就可以了。 我们就按照教程的来，在我们的babel.config.js中配置一下： module.exports = { presets: ['@vue/cli-plugin-babel/preset'], // vant引入： plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: name => `${name}/style/less` }, 'vant' ] ] } 4、使用 按照官网的说明，按需引入一下即可，比如我们在main.js中引入一下： // 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 } } } 5、其它 如何修改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样式表 6、小结 大概就是这么多，具体可以去看看项目中的使用。 参考链接： 修改vant的主题色 vant样式表 panda-vue-template 手把手搭建vue小商城2.0

本文章由javascript技术分享原创和收集