安装和配置Vant组件库

vant官网：vant2

  1. 执行：npm i vant@latest-v2 安装组件库
  2. 在开发阶段，直接导入所有组件，不用考虑体积问题（怎么快怎么来）
import Vue from 'vue'
import Vant from 'vant' //导入所有组件
import 'vant/lib/index.css' //导入所有组件对应的样式

Vue.use(Vant);
  1. 在发布阶段，再进行项目体积的优化。

注

  • 某个属性的值如果是true，可以简写
<van-nav-bar title="黑马头条" :fixed="true" />
//以上代码可以简写成：
<van-nav-bar title="黑马头条" fixed />
  • 覆盖第三方组件样式时，如果直接覆盖不生效，可以考虑在样式前面加上/deep/

Vant定制主题

核心：less变量的覆盖
为了能够覆盖默认的less变量，一定要在main.js文件中把后缀名改成.less
import 'vant/lib/index.less'
方法1：直接覆盖样式变量（不用）

  1. 新建：vue.config.js文件
  • vue.config.js文件是vue-cli创建出来的配置文件
  • 在vue.config.js这个配置文件中，可以对整个项目的打包、构建进行全局性的配置
  1. 在文件中把官方文档中的代码复制过去

缺点：每次修改都需要重启服务器

方法2：less文件覆盖

  1. 在src目录下创建theme.less文件
    4ecff25ab3a64f7a8da784cc92617b6a.png
  2. 在theme.less文件中，覆盖Vant官方的Less变量值
    2ee311095cd34d4db82360c2de8adcc5.png
  3. 把主题文件的绝对路径填充到vue.config.js中的一个地方：在vue.config.js配置文件中，导入node.js中的核心模块path，来进行绝对路径的拼接
const path = require('path')
// __dirname表示：vue.config.js所在项目根目录
const themePath = path.join(__dirname, './src/theme.less')

1b42f6d364ad4c19a59d960f02d392af.png