vant移动端 踩过的坑

国内镜像官网：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

2种方法引入vant

一、法1：安装命令

npm i vant -S

• 按需引入组件： 在assets中新建dist-vant.js

import Vue from 'vue';
import { Button } from 'vant';
import { Cell, CellGroup } from 'vant';
Vue.use(Button)
Vue.use(Cell)
Vue.use(CellGroup)

在main.js中引入样式这个vant.js文件

import './assets/dist/vant.js'
import 'vant/lib/index.css';

• 全局引入

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

二、法2：cdn引入vant
1、index.html中

这里要注意2点；1、vant低版本的没有van-calender 2、必须先引入vue再引入vant

<!-- 引入vant样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>

2、在vue.config.js中配置externals

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
    config.externals({
      vant: 'vant'
    })
  },
  lintOnSave: true // 打开 eslint 检查
}

3、在main.js中引入vant

注意 toast需要额外引入方可使用

import vant from 'vant'
import { Toast } from 'vant'
Vue.prototype.$toast = Toast
Vue.use(vant)

引入后可以在任何地方使用this.$toast('内容')