How to introduce bootstrap into vue.js

How to introduce bootstrap into vue.js: First use the [npm install bootstrap --save-dev] command to install it; then use the [import 'bootstrap related file path'] syntax in [main.js] to introduce it That’s it.

The operating environment of this tutorial: windows7 system, Vue2.9.6&&bootstrap3 version, Dell G3 computer.

【Recommended related articles: vue.js】

How to introduce bootstrap in vue.js:

1. Use the command:

npm install bootstrap --save-dev

2. After successful installation, you can see the bootstrap module in the package.json folder. At this time, you need to add the following content to main.js:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

At this point, the introduction of bootstrap is completed. Next, our focus comes, because BootStrap and VUE have a special design called bootstrap-vue.js, so After we introduce it, we can directly use the proprietary styles they provide, which is much better than the native bootstrap.

3. Use the command:

npm i vue bootstrap-vue bootstrap

4. Add: to the main.js file:

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)

Related free learning recommendations: javascript (video)

The above is the detailed content of How to introduce bootstrap into vue.js. For more information, please follow other related articles on the PHP Chinese website!