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

This article mainly explains "how to install and use BootstrapVue to build project interface". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to install and use BootstrapVue to build project interface".

There are many front-end frameworks based on Vue, Element is one, and BootstrapVue can also be a very good one. After all, Bootstrap is also the boss level of CSS, and its integration with Vue makes it more convenient to develop. BootstrapVue is a front-end UI framework based on Bootstrap v4 + Vue.js. It is the integration of the popular Bootstrap framework and Vue.js. This package is called BootstrapVue. It allows us to use custom components integrated with Bootstrap (v4).

With BootstrapVue, anyone can switch from Vanilla.js or jQuery to Vue.js without worrying about Bootstrap's heavy dependence on jQuery or even finding a solution. This is how BootstrapVue rescues. It helps bridge this gap and allows Vue developers to easily use Bootstrap in their projects. BootstrapVue does not depend on Jquery.

1. Installation and use of BootstrapVue

Let's assume that you already have a Vue project environment, so it's easy to install and use BootstrapVue, just install it using npm.

Npm install bootstra-vue bootstrap

The above command will install the BootstrapVue and Bootstrap packages. The BoostrapVue package contains all the BootstrapVue components, and the regular Bootstrap contains the CSS file.

Next, let's set up the BootstrapVue package that we just installed. Go to your main.js file and add this line of code to the appropriate location, and you need to import the Bootstrap CSS file into the project.

Import BootstrapVue from 'bootstrap-vue'Vue.use (BootstrapVue) import' bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'

Then the contents of the general simple main.js file are as follows.

/ / src/main.jsimport 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 = falsenew Vue ({render: h = > h (App),}). $mount (' # app')

If we used other component modules in our project, these might be different.

2. The components of BootstrapVue are used

To learn a new thing, we usually look at the relevant documents first.

Address of the GitHub library: https://github.com/topics/bootstrapvue

BootstrapVue's official website address (may be restricted and cannot be accessed): https://bootstrap-vue.js.org/

The Chinese website address of BootstrapVue is as follows: https://code.z01.com/bootstrap-vue/

By introducing the corresponding BootstrapVue into the Vue project, the use of its related components can be understood by referring to the introduction of the official website. BootstrapVue has many of the same components as Bootstrap, but the tag prefix needs to be added with b-

For example, for the commonly used button interface code processing, as shown below.

Button

The interface is shown below, very Bootstrap style! We can see that the button of html on Bootstrap has been changed to b-button by adding a prefix "bMel".

The code for the card Card control is as follows

Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere

Mb-2 in class class is the definition of margin, as shown in the following reference.

In addition, it is possible to come into contact with similar definitions such as pmai 2, ptmae, 2, and so on, which will be explained in the following section.

In addition, the layout of Flex also needs to be understood.

Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3

The interface effect is as follows.

Let's show an example of a grid, showing pictures, text and other information in the card.

{{`${data.strCategoryDescription.slice (0100)}...`} View food No meals available yet Thank you for your reading. This is the content of "how to install and use BootstrapVue to build a project interface". After studying this article I believe that you have a deeper understanding of how to install and use BootstrapVue to build the project interface, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.