bootstrapvue

作者：涅盘の梦发布日期:2026-04-14 浏览:26

<!-- 示例代码：使用 BootstrapVue 创建一个简单的按钮组件 -->

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 BootstrapVue 和 Vue 的 CSS 和 JS 文件 -->
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 使用 b-button 组件创建一个按钮 -->
    <b-button variant="primary">点击我</b-button>
  </div>

  <script>
    // 创建 Vue 实例并挂载到 #app 元素上
    new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

解释说明：

引入文件：首先在 <head> 中引入了 BootstrapVue 和 Vue 的相关 CSS 和 JS 文件，确保页面可以正常使用 BootstrapVue 的样式和组件。
HTML 结构：在 <body> 中定义了一个 div 容器，并给它一个 id="app"，用于挂载 Vue 实例。
BootstrapVue 组件：使用 <b-button> 组件来创建一个按钮，并通过 variant="primary" 设置按钮的样式为蓝色（主色调）。
Vue 实例：最后通过 new Vue({ el: '#app' }); 将 Vue 实例挂载到 #app 元素上，使得页面中的 BootstrapVue 组件可以正常工作。

上一篇：vue eventbus

下一篇：vue canvas