TypeScript와 Vue3의 bootstrapVue 통합 구현

Question

use(BootstrapVue as any)를 사용하면 다음 오류가 수정되지만 여전히 브라우저에서는 작동하지 않습니다.

main.ts：

'vue'에서 { createApp } 가져오기;
'./App.vue'에서 앱 가져오기;
'./router'에서 라우터 가져오기;
'./comComponents/Release.vue'에서 릴리스 가져오기; // @는 /src의 별칭입니다.
'bootstrap-vue'에서 {BootstrapVue}를 가져옵니다.
//'vuelidate'에서 Vuelidate 가져오기

// BootstrapVue CSS 파일을 Bootstrap으로 가져옵니다(순서가 중요함).
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


// 선택적으로 BootstrapVue 아이콘 구성 요소 플러그인을 설치합니다.
//use(BootstrapVue as any)를 수정할 수 있습니다.
createApp(앱).use(BootstrapVue).comComponent('릴리스', 릴리스)
.use(router).mount('#app')

运行 npm run 서브 时出现错误：

WAIT 컴파일 중... 오전 9:57:17

CopyPlugin 방출 후 98%

 WARNING 오전 9:57:18 경고 1개로 컴파일됨

 ./node_modules/bootstrap-vue/esm/vue.js의 경고

"'기본' 내보내기('Vue'로 다시 내보내기)를 'vue'에서 찾을 수 없습니다.


  앱 실행 위치:
  - 로컬: http://localhost:8080/ 

문제 확인 진행 중...
src/main.ts에 오류가 있습니다:15:20
TS2345: 'BootstrapVuePlugin' 유형의 인수는 'Plugin_2' 유형의 매개변수에 할당할 수 없습니다.
  'BootstrapVuePlugin' 유형은 '{ install: PluginInstallFunction; 유형에 할당할 수 없습니다. }'.
    'install' 속성 유형이 호환되지 않습니다.
      'PluginFunction<BvConfigOptions>'을 입력하세요. 'PluginInstallFunction' 유형에 할당할 수 없습니다.
        'Vue' 및 'app' 매개변수 유형이 호환되지 않습니다.
          '모든 앱>'을 입력하세요. 'VueConstructor<Vue>' 유형에서 확장, nextTick, 설정, 삭제 외 3개 속성이 누락되었습니다.
    13 | // 선택적으로 BootstrapVue 아이콘 구성 요소 플러그인을 설치합니다.
    14 | //Vue.use(IconsPlugin).use(BootstrapVue)
  > 15 | createApp(앱).use(BootstrapVue).comComponent('릴리스', 릴리스)
       |                    ^^^^^^^^^^^^^^
    16 | .use(router).mount('#app')

浏览器控 제어 판매:

잡히지 않은 TypeError: 정의되지 않은 'prototype' 속성을 읽을 수 없습니다.
    평가판에서(config.js?228e:6)
    Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    __webpack_require__(app.js:849)에서
    fn(app.js:151)에서
    평가 시(props.js?cf75:1)
    Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)에서
    __webpack_require__(app.js:849)에서
    fn(app.js:151)에서
    평가 시(model.js?58f2:1)
    Module../node_modules/bootstrap-vue/esm/utils/model.js(chunk-vendors.js:4116)

Answer 1

설치해야 합니다 bootstrap-vue-3

런 npm i --save bootstrap-vue-3

그런 다음 main.js 或 main.ts 안에 다음 코드를 추가하세요.

으아악