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

This article mainly shows you "how Bootstrap-Vue", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how about Bootstrap-Vue" this article.

Vue-strap is based on Bootstrap components built by vue.js, and the repository contains a series of native vue.js components based on Bootstrap tags and css. So you don't need JavaScript files for jQuery and Bootstrap, the only thing you need to rely on is vue.js (version ^ 0.12, testing based on version 0.12.10) Bootstrapcss (version 3.3.5 based on 3.x.x). VueStrap does not rely on a very precise version of Bootstrap.

How's Bootstrap-Vue?

Use Vue.js and the world's most popular front-end CSS library, BootstrapV4, to build responsive, mobile priority projects on Web.

Bootstrap-Vue provides Vue.js2.4+ with the implementation of BootstrapV4 components and the most comprehensive grid system, with a wide range of automated WAI-ARIA accessibility tags.

Vue references BootStrap and references bootStrap-vue.js

1. Introduce jquery first

1. Use the instruction first:

Npminstalljquery--save-dev

two。 Add the following to webpack.base.conf.js (if you are in the development [dev] environment, both files in webpack.dev.conf.js; are in the bulid directory; please note that I found the wrong file and didn't get it right for a long time.):

Constwebpack=require ('webpack')

Plugins: [

Newwebpack.ProvidePlugin ({

$: "jquery"

JQuery: "jquery"

})

]

3. Register with main.js

Import$from'jquery'

At this point, the introduction of jquery is over, and then let's see how to introduce traditional bootStrap.

two。 Introduction of BootStrap

1. Use instructions:

Npminstallbootstrap--save-dev

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

Import'bootstrap/dist/css/bootstrap.min.css'

Import'bootstrap/dist/js/bootstrap.min'

At this point, the introduction of bootStrap is over, and then 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 are much better than the native bootStrap.

1. Use instructions:

Npmivuebootstrap-vuebootstrap

two。 Add to the main.js file:

ImportVuefrom'vue'

ImportBootstrapVuefrom'bootstrap-vue'

Import'bootstrap/dist/css/bootstrap.css'

Import'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use (BootstrapVue)

At this point, all the references are over.

The above is all the content of this article "how about Bootstrap-Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.