使用vant的時候，報錯：component has been registered but not used以及vant的使用方法總結
在使用vant的時候。 想按需引入，於是安裝了babel-plugin-import插件。
但是遇到了上述報錯。 不在components中注冊，或者用這種常用的方式注冊，都會報錯：
//示例
import { Button } from 'vant'//引入
components:{ Button } //注冊
注意：文檔都沒有寫引入的組件的注冊部分，沒有完整的使用實例。
具體報錯如下：
解決方案1（只有少量使用vant組件的時候，可以考慮這個，因為一個個引入有些麻煩）
手動引入，需要單獨引入組件和css。 組件的路徑文件夾名稱有時候還需要自己找。
路徑是：node_modules_vant@2.6.0@vant\lib
還要單獨的引入對應的css樣式。
[組件名.name]:組件名
<template>
<div>
this is for test words!
<van-swipe-cell>
<template #left>
<van-button square type="primary" text="選擇" />
</template>
<van-cell :border="true" title="單元格" value="內容" />
<template #right>
<van-button square type="danger" text="刪除" />
<van-button square type="primary" text="收藏" />
</template>
</van-swipe-cell>
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
</div>
</template>
<script>
import Button from 'vant/lib/button';
import SwipeCell from 'vant/lib/swipe-cell';
import Cell from 'vant/lib/cell';
import 'vant/lib/swipe-cell/style';
import 'vant/lib/cell/style';
import 'vant/lib/button/style';
export default {
name: "Login",
components: {
[Button.name]:Button,
[SwipeCell.name]:SwipeCell,
[Cell.name]:Cell
}
};
</script>
需要引入暴露的組件名。但是測試發現可以是任意的，
因為swipe-cell中沒有搜索到找到SwipeCell。
但是在button中有export“Button”
例如：
import XButton from 'vant/lib/button';//引入
[XButton.name]:XButton//注冊
所以只需要保持一致就行。
該解決方案參考了：
在官方在github中提供的demo中，發現局部注冊有像這樣寫的。
https://github.com/youzan/vant-demo/blob/master/vant/base/src/view/cart/index.vue
解決方案2 （這會讓打包后的文件體積大一點，但是確實是最方便的方式。如果不考慮模塊化，工程化開發而不介意把它掛載到vue原型的話）
main.js
import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
demo.vue
<template>
<div>
this is for test words!
<van-swipe-cell>
<template #left>
<van-button square type="primary" text="選擇" />
</template>
<van-cell :border="true" title="單元格" value="內容" />
<template #right>
<van-button square type="danger" text="刪除" />
<van-button square type="primary" text="收藏" />
</template>
</van-swipe-cell>
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
</div>
</template>
<script>
export default {
name: "Login",
components: {
}
};
</script>
解決方案3（推薦）也是開篇使用babel-plugin-import插件遇到的問題的解決方法
其實這不算解決方案。只是以前用vue的時候，組件注冊這里有個小細節一直沒有注意導致的。
快速查看示例代碼：
<template>
<div>
this is for test words!
<van-swipe-cell>
<template #left>
<van-button square type="primary" text="選擇" />
</template>
<van-cell :border="true" title="單元格" value="內容" />
<template #right>
<van-button square type="danger" text="刪除" />
<van-button square type="primary" text="收藏" />
</template>
</van-swipe-cell>
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
</div>
</template>
<script>
import { Button,SwipeCell,Cell } from 'vant'
export default {
name: "Login",
components: {
'van-button':Button,//對應<van-button>標簽
'van-swipe-cell':SwipeCell,//對應<van-swipe-cell>標簽
'van-cell':Cell//對應<van-cell>標簽
//也可以像這樣寫
// vanButton:Button,
// vanSwipeCell:SwipeCell,
// vanCell:Cell
}
};
</script>
之所以，出現“component has been registered but not used”這個報錯，就是因為使用了components:{ Button }進行注冊。
這種注冊方式注冊的是Button這個元素，但是在dom上確實沒有這個元素。 因為是van-button這個元素。 而這個元素又沒有被正確注冊 。
也就是說<van-button>標簽、<van-swipe-cell>標簽、<van-cell>標簽都沒有被正確的注冊導致的。
你可以像這樣來注冊組件：
'van-button':Button,//對應<van-button>標簽
'van-swipe-cell':SwipeCell,//對應<van-swipe-cell>標簽
'van-cell':Cell//對應<van-cell>標簽
還可以用駝峰命令法，首字母大小寫都可以，省略" - " 來進行注冊。如：
vanButton:Button,
vanSwipeCell:SwipeCell,
vanCell:Cell
或者
VanButton:Button,
VanSwipeCell:SwipeCell,
VanCell:Cell
該解決方案參考：
https://cn.vuejs.org/v2/guide/components-registration.html (#組件名大小寫)
總結：
在vue中，帶短橫線的標簽元素的注冊。必須是駝峰命令法，或者用引號括起來。
如<van-button>的注冊必須是
vanButton:Button
或者VanButton:Button
再或者'van-button':Button