BootstrapVue 组件未转换为 HTML

Posted 2023-02-23

【中文标题】BootstrapVue 组件未转换为 HTML

【英文标题】：BootstrapVue Components Not Being Converted into HTML

【发布时间】：2021-07-01 01:22:28

【问题描述】：

我的组件完全按照在 BootstrapVue 中编写的方式呈现到客户端页面，所以我看到 <b-button> 确实呈现到客户端页面：

<b-button data-v-3d7e72245 id="myBtn" variant="outline-primary">Click Me</b-button>

难道不应该在 Vue 渲染过程中将其转换为标准 html 并自动添加引导类吗？

我是 Vue 新手，所以我可能会遗漏一些明显的东西 - 但在命令行或 Web 控制台/Vue 开发工具中运行“npm run build”时我没有看到任何错误。

Header.vue:

<template>
  <header id="Header">
    <ApplyBtn btnText="Click Me" />
  </header>
</template>

<script>
  import ApplyBtn from './header/ApplyBtn.vue'

  export default 
  name: 'Header',
  components: 
  ApplyBtn
  
  
</script>

Main.js：

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer' 
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import  BootstrapVue, IconsPlugin  from 'bootstrap-vue' 
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '/scss/global/duo-theme.scss'

new Vue(
    vuetify,
  render: h => h(App)
).$mount('#App')

Vue.config.devtools = true
Vue.config.productionTip = false

// Custom widgets
Vue.component('applybtn', require('./components/global/header/ApplyBtn.vue').default);

window.Vue = Vue; 
Vue.use(BootstrapVue); 
Vue.use(IconsPlugin); 

包.json：

   
  "name": "VueBS",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "acorn": "^8.1.0",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "bootstrap-scss": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.10.0",
    "css-loader": "^5.2.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "intersection-observer": "^0.12.0",
    "jquery": "^1.12.4",
    "mini-css-extract-plugin": "^0.9.0",
    "popper.js": "^1.16.1",
    "regenerator-runtime": "^0.13.7",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "typescript": "^4.2.3",
    "vue": "^2.6.11",
    "vue-style-loader": "^4.1.3",
    "vuetify": "^2.4.9"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "html-webpack-plugin": "^5.3.1",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.3.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0",
    "webpack": "^4.46.0"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

【参考方案1】：

尝试在创建 Vue 实例之前放置 Vue.use。

改变这个

new Vue(
    vuetify,
  render: h => h(App)
).$mount('#App')

Vue.use(BootstrapVue); 
Vue.use(IconsPlugin); 

到这里

Vue.use(BootstrapVue); 
Vue.use(IconsPlugin); 

new Vue(
    vuetify,
  render: h => h(App)
).$mount('#App');

【讨论】：

谢谢！我认为在注册这些使用之前需要创建 Vue 对象，猜不...我的按钮现在按预期呈现。非常感谢您在这里的洞察力！