国内镜像官网：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('内容')
