在vue.js中单独导入组件和css

问题描述 投票:1回答:1

我刚开始使用vue.js,但有一个概念令人困惑。

导入vue.js“组件”和css文件之间有什么区别?

bootstrapvue-bootstrap为例。我需要两个吗?只有一个?哪一个?

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

vue.js import components
1个回答
1
投票

你可以把bootstrap-vue看作是一堆功能组件,有人用它来包装bootstrap造型(从我的构造)。你只需要导入bootstrap-vue npm包,然后告诉Vue使用它(Vue将使用bootstrap-vue包作为插件通过Vue.use()

这使您可以访问像<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是在组件上使用常规类的一个例子。

而不是做像<button class="btn btn-success">Button</button>这样的事情你会做:<b-button variant="success">Button</b-button>

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

© www.soinside.com 2019 - 2024. All rights reserved.