Импорт компонентов и CSS отдельно в vue.js

Question

Я только начал работать с vue.js, и есть одна концепция, которая все еще сбивает с толку.

В чем разница между импортом компонента vue.js и файла css?

Например, bootstrap и vue-bootstrap. Нужны ли мне оба? Только один? Что?

Мне кажется, что если я хочу иметь возможность использовать начальную загрузку в качестве компонента vue, например <b-link>, мне нужно импортировать vue-bootstrap. Если я хочу использовать его в обычном HTML-теге, мне также нужно импортировать .css?

Answer 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. Они поставляются со свойствами и определенными опциями, которые позволяют вам стилизовать их так, как вам хочется.

Здесь - пример использования регулярных классов в компоненте.

Вместо того, чтобы делать что-то вроде <button class="btn btn-success">Button</button>, вы должны сделать: <b-button variant="success">Button</b-button>

Вы можете узнать больше о том, как bootstrap-vue обрабатывает варианты цветов и т. Д. здесь - в общем, я бы прочел их документацию, чтобы лучше понять их.