vue菜鳥關于vantUI組件引入的問題。

加一個vue.use(Button)

官方文檔有點坑，可以看官方的DEMO，還需要注冊組件

components:{
    [Button.name]: Button,
    ...
},

沒那么復雜，在入口文件main.js里面加上

import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);

頁面上直接使用組件就行了。

第一張圖，加上一句

export default{
    components:{
        Button,
    },
    // ...
}

見官方文檔https://youzan.github.io/vant... “快速上手--方式三”，另外github的基于step的說明的確很坑爹，已提交commit了
方式三. 導入所有組件
配置 babel-plugin-import 插件后將不允許導入所有組件的方式

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

Vue.use(Vant);

問題解決了，因為頁面上我只使用的button組件，所以使用那個引用那個就可以了，在main.js中加上

import { Button } from 'vant';

Vue.use(Button);

之前有朋友提到過直接

import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);

我測試過也是不行的，因為vant會報一個 Vant is not defined 的錯誤。如果想要引用其他的組件，直接在花括號里加上就可以了。前提是安裝使用 babel-plugin-import