前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-cli3.0与vant的引入

vue-cli3.0与vant的引入

作者头像
Ewall
发布2020-04-01 21:20:54
1.6K0
发布2020-04-01 21:20:54
举报
文章被收录于专栏:vue学习

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充,新的脚手架生成的项目如何引入vant,简单的说一下。 项目相关: panda-vue-template 手把手搭建vue小商城2.0

1、安装

  • 如果你是老的脚手架搭建的vue项目,如何引入使用vant可以看看这个-->有赞vant组件库的引入
  • 新的@vue/cli3.x脚手架引入vant也很简单,我们先安装一下:
代码语言:javascript
复制
$ npm install vant --save
  • 因为我们的项目中本来是使用sass来作为css的一个预编译器的,但是vant是用的less语法,所以我们还需要安装下less,不然会报错。
代码语言:javascript
复制
$ npm isntall less less-loader --save-dev

2、配置

代码语言:javascript
复制
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // vant引入:
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

4、使用

  • 按照官网的说明,按需引入一下即可,比如我们在main.js中引入一下:
代码语言:javascript
复制
// main.js
import { Button } from 'vant'
Vue.use(Button)
  • 如果你使用postcss-px-to-viewport配置vw解决移动端适配解决方案,将viewportWidth设置为了750,那么你还需要在postcss.config.js文件中将其selectorBlackList名单中把vant加进去,因为vant的样式是按325px来设计的,不然vant的组件都会缩小一半。
代码语言:javascript
复制
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的默认样式:
代码语言:javascript
复制
module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'font-size-sm': '100px',
          'font-size-md': '200px',
          'font-size-lg': '300px',
        }
      }
    }
  }
};

6、小结

  • 大概就是这么多,具体可以去看看项目中的使用。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、安装
  • 2、配置
  • 4、使用
  • 5、其它
  • 6、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档