vue-cli 3.0 引入mint-ui報錯問題及解決
更新時間：2022年05月31日 10:32:56 作者：珍妮的小罐君
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli 3.0 引入mint-ui報錯
場景
官網(wǎng)：http://mint-ui.github.io/docs/#/zh-cn2/quickstart
npm i mint-ui -S
main.ts 文件中引入并使用
import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' ? Vue.use(MintUI)
然后報錯提示：
Could not find a declaration file for module 'mint-ui'. 'E:/example/vueProjects/vmarry/node_modules/mint-ui/lib/mint-ui.common.js' implicitly has an 'any' type.
Try `npm install @types/mint-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'mint-ui';`
解決
在項目src目錄下新建一個.d.ts的文件，如：shim-mint.d.ts,內(nèi)容如下：
declare module "mint-ui" {
? const Mint: any;
? export const Toast: any;
? export const MessageBox: any;
? export default Mint;
}這樣就能正常使用啦~
mintUi在vue-cli3部分使用的問題
mint-ui在文檔上寫的部分引入組件須在.babelrc文件里改寫配置，然后vue-cli3里并沒有這個配置文件
以下是mint-ui文檔上需要增加的配置
{
? "presets": [
? ? ["es2015", { "modules": false }]
? ],
? "plugins": [["component", [
? ? {
? ? ? "libraryName": "mint-ui",
? ? ? "style": true
? ? }
? ]]]
}要想達(dá)到同樣的效果需在vue-cli3里的babel.config.js里做一個類似的配置
module.exports = {
? presets: [
? ? '@vue/app'
? ],
? plugins: [
? ? [
? ? ? "component",
? ? ? {
? ? ? ? "libraryName": "mint-ui",
? ? ? ? "style": true
? ? ? }
? ? ]
? ]
}當(dāng)然需先安裝babel-plugin-component
命令
npm install babel-plugin-component -D
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue 項目中實現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了前端自動化測試Vue中TDD和單元測試示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue自動化路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼
這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01