ve3不能使用引导组件

Question

我正在学习Vuejs，我试图使用bootstrap/vue- bootstrap组件，如Card或b-table，但当我使用它们

[Vue warn]: Failed to resolve component: b-table .日志含义如果这是一个本地自定义元素，请确保通过compilerOptions.isCustomElement将其从组件解析中排除。在

然后我尝试在javascript中导入组件，这是我得到的:

[plugin:vite:import-analysis]由于内容包含无效的JS语法，无法解析源以进行导入分析。安装@vitejs/plugin-vue来处理.vue文件。

所以，我导入@vitejs/plugin-vue根据上面，但它仍然得到相同的。App.vue

<header>toDoList</header>
<b-table striped hover :items="list"></b-table>
<input v-model="newTask">
<input v-model="newTaskDate">
<button @click="addnewTask()">add new Task</button>
</template>
<script>
import { BTable } from bootstrap-vue;
export default {
data() {
return {
list: [{name:"Doing somwthing",date:"1"}],
newTask: '',
newTaskDate: ''
}
},
methods: {
addnewTask() {
this.list.push({name:this.newTask, date:this.newTaskDate})
}
}
}
</script>

main.js

import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/main.css'
createApp(App).mount('#app')

Answer 1

BootstrapVue当时不兼容Vue 3。
您只能使用BootstrapVue与Vue 3迁移构建。

检查Vue.jsX初始支持，并确保相应地配置您的安装。

Answer 2

也许这是你这边的打字错误，但是这个呢?注意import语句中的引号。

import { BTable } from 'bootstrap-vue';