Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "can bootstrap and vue be used together?". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Bootstrap and vue can be used together, vue templates can be written with bootstrap to improve development efficiency; and vue specifically provides a ui component library BootstrapVue, which is used to use Vue.js+Bootstrap4 to build responsive, mobile-priority websites on web.

Operating environment of this tutorial: Windows7 system, vue2.9.6&&bootsrap4 version, DELL G3 computer

Bootstrap and vue can be used together, the two are compatible, will not conflict, vue writing template with bootstrap can improve the efficiency of development.

The method of using Bootstrap in Vue

1. Install the bootstrap library:

In the root directory of the project, enter the command:

Npm install bootstrap3-S

Here I choose the bootstrap3 version

2. Then introduce bootstrap into the main.js file

3. Write the html component structure provided by Bootstrap in template.

You can also use the BootstrapVue framework

Vue has a dedicated ui component library, BootstrapVue, which is based on Bootstrap v4, the most popular framework in the world, and is used to use Vue.js to build responsive, mobile-first sites on web.

BootstrapVue is a front-end UI framework based on Bootstrap v4 + Vue.js. BootstrapVue as an introductory framework for learning the Vue.js framework itself, I think it is very good. The Bootstrap framework itself is lightweight, easy to learn, very popular around the world, and has many third-party plug-ins and theme styles. Vue.js as a progressive framework, the core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party frameworks or existing projects.

1. Install BootstrapVue

Npm install bootstra-vue bootstrap axios

Introduction of BootstrapVue and Bootstrap CSS

2. Modify src/main.js

Import Vue from 'vue'import App from'. / App.vue'import BootstrapVue from 'bootstrap-vue'import' bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use (BootstrapVue) Vue.config.productionTip = true new Vue ({render: h = > h (App),}). $mount (' # app')

3. Modify src/components/HelloWorld.vue:

Import axios from "axios" export default {name: 'HelloWorld', data () {return {mainProps: {class:' mb-2'}, list: []}} Mounted () {axios .get ("https://www.themealdb.com/api/json/v1/1/categories.php") .then (response = > {this.list = response.data.categories}) .catch (catch = > {console.log (err)})}}" can bootstrap and vue be used together? "this ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.