我刚开始使用vue.js,但有一个概念令人困惑。
导入vue.js“组件”和css文件之间有什么区别?
以bootstrap
和vue-bootstrap
为例。我需要两个吗?只有一个?哪一个?
对我来说,似乎我想能够使用bootstrap作为像<b-link>
这样的vue组件我需要导入vue-bootstrap
。如果我想在常规的html标签中使用它,那么我还需要导入.css
?
你可以把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 - 总而言之,我会阅读他们的文档以更好地掌握它。