在 vue.js 中分别导入组件和 css答案

【问题标题】：Importing components and css separately in vue.js在 vue.js 中分别导入组件和 css
【发布时间】：2019-09-09 08:31:36
【问题描述】：

我刚开始使用 vue.js，但仍有一个概念相当混乱。

导入一个 vue.js 的“组件”和一个 css 文件有什么区别？

以bootstrap 和vue-bootstrap 为例。我需要两者吗？只有一个？哪个？

对我来说，如果我希望能够将 bootstrap 用作像 <b-link> 这样的 vue 组件，我需要导入 vue-bootstrap。如果我想在常规的 html 标签中使用它，那么我还需要导入 .css?

【问题讨论】：

标签： vue.js import components

【解决方案1】：

您可以将bootstrap-vue 看作是某人编写的一组功能组件，用于包装bootstrap 样式（根据我的理解）。您只需导入bootstrap-vue npm 包，然后告诉Vue 使用它（Vue 将通过Vue.use() 将bootstrap-vue 包用作插件）

这使您可以访问<b-link> 等内容。但您仍然需要导入.css 文件。

这是您需要原始 bootstrap.css 文件以及 bootstrap-vue.css 文件的地方，以便在导入的 <b-*> 组件上获得适当的样式..（您在上面导入的）。

因此，您的入口点在一天结束时应该如下所示：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

您仍然可以使用常规类来设置自定义组件的样式，但重要的是要注意这些<b-*> 组件与常规 HTML 元素不同。它们带有属性和某些选项，可让您按照自己的喜好设置样式。

Here 是在组件上使用常规类的示例..

您可以这样做：<b-button variant="success">Button</b-button>

而不是像 <button class="btn btn-success">Button</button> 这样的事情

您可以阅读更多关于bootstrap-vue 如何处理颜色变体等here - 总而言之，我会阅读他们的文档以更好地掌握它。

【讨论】：