Vuejs CLI 提供了很多功能,从安装包到配置我们的 Vuejs 应用程序。在本文中,我们将看到一些将 Bootstrap 4 添加到我们的 Vuejs 应用程序中的方法。基本上了解更多关于 Vue Bootstrap 的信息。

先决条件

• 熟悉 HTML、CSS 和 JavaScript (ES6+)。

• Vs 代码或安装在您的开发机器上的任何代码编辑器。

• Vue基础知识

在开始文章之前,想特别提一下 WrapPixel](https://www.wrappixel.com/templates/category/vuejs-templates/)中的[个最佳 Vue 模板。它将帮助您更快地创建基于 vue 的应用程序,它们可以使用随时可用的页面、仪表板、图表、表格、表单等等。请检查一下,因为也有一些免费的 vuejs 模板可供下载。

设置我们的 Vuejs 应用程序

我们将首先使用 Vuejs CLI 设置一个新的 Vuejs 应用程序。通过在终端上运行以下命令,确保在本地计算机上安装了 Vuejs CLI:

vue --version

如果你获得了 Vuejs 的版本,那么你已经安装了 Vuejs,但是如果你没有在终端上运行它以在本地机器上全局安装它:

npm install -g @vue/cli

我们将使用vue create命令后跟项目名称来设置一个新的 Vue 项目:

vue create bootstrap4

这将提示使用默认预设或手动配置我们的预设。选择默认预设以继续。选择此项将创建一个新的 Vuejs 应用程序。安装完成后,输入cd bootstrap4进入项目工作目录。

使用 jQuery 设置引导程序

Bootstrap 由 bootstrap 的核心脚本、Popper js 和 jQuery 组成。我们将使用 npm 来安装和设置这个包。为此,请打开您的终端并运行此命令(确保您位于项目工作目录中):

npm install bootstrap jquery popper.js

如果您只关心引导样式,则可以只运行npm install bootstrap并忽略jquery和popperjs。

安装后,我们必须将此文件导入到我们的main.js文件中:

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

另请记住,如果您只对样式感兴趣,则可以通过忽略import "bootstrap";来导入引导程序的 css 文件

完成后,我们现在可以通过编辑component/HelloWorld.vue组件来测试我们的代码:

<template>
  <div>
    <h2>Testing Bootstrap buttons</h2>
    <button class="btn btn-primary">Test</button>
    <button class="btn btn-info">Test</button>
    <button class="btn btn-danger">Test</button>
    <button class="btn btn-secondary">Test</button>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Hi!</strong> I'm Sunil
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</template>

我们可以通过运行来运行我们的应用程序:

npm run serve

这将在端口 8080 上打开我们的应用程序。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Ldra_TDY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.wrappixel. com/demos/images/use-bootstrap-with-vue.jpg)

使用 Bootstrap Vue 设置 Bootstrap

Bootstrap Vue 提供了 Bootstrap 4 组件最全面的实现之一。要安装它,请在您的终端上运行:

npm i bootstrap-vue

要使用 bootstrap Vue,您必须通过运行以下命令安装 bootstrap 才能正常工作:

npm install boostrap

安装后,我们必须在 main.js 文件中导入并注册它才能工作:

import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

Bootstrap Vue 带有它的图标插件,您可以将其添加到您的项目中。

我们现在可以通过在我们的component/HelloWorld.vue文件中添加它来测试我们的一些 Bootstrap 组件:

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ovXDL5vV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.wrappixel .com/demos/images/use-bootstrap-with-vue1.jpg)

设置好之后,您可以继续探索应用程序中的所有 Bootstrap 4 组件。