使用vant的時候，報錯：component has been registered but not used以及vant的使用方法總結
使用vant的時候，報錯：component has been registered but not used以及vant的使用方法總結
在使用vant的時候。 想按需引入，於是安裝了babel-plugin-import外掛。
文件：https://youzan.github.io/vant/#/zh-CN/quickstart
但是遇到了上述報錯。 不在components中註冊，或者用這種常用的方式註冊，都會報錯：
//示例
import { Button } from 'vant'//引入
components:{ Button } //註冊
注意：文件都沒有寫引入的元件的註冊部分，沒有完整的使用例項。
具體報錯如下：
解決方案1（只有少量使用vant元件的時候，可以考慮這個，因為一個個引入有些麻煩）
手動引入，需要單獨引入元件和css。 元件的路徑資料夾名稱有時候還需要自己找。
路徑是：[email protected]@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