bootstrap项⽬更改为vue_取代Jquery，⽤Vue构建Bootstrap4
应⽤
尽管前端程序现在发展迅速，各种框架层出不穷，但是对⼴⼤⾮前端码农来说构建Web界⾯的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。
Vue项⽬以其轻巧、⾼性能，易上⼿，双向数据绑定，组件化的特点，快速流⾏并⼴为使⽤，那么有没
有可能将Bootstrap的依赖改为Vue 呢？答案是肯定的。
本⽂我们就介绍这样⼀个解决⽅案，Bootstrap-Vue项⽬。
安装和设置
Bootstrap-Vue项⽬提供了Bootstrap项⽬中jQuery组件依赖了Vue替换⽅案，可以实现绝⼤多数案例和组件的替代。我们建议以Vue Cli 插件⽅式使⽤，这样可以实现项⽬⾃动创建和配置，依赖项添加。⾸先我们安装Vue Cli
安装Vue Cli
由于npm安装较慢，甚⾄会失败，需要，先安装国内镜像，可以使⽤cnpm或者npm别称：
然后⽤cnpm安装vue.js
cnpm install -g @vue.js
创建项⽬
vue create hello-chongchong
这样Vue CLI会⾃动创建⼀个Vue项⽬，提⽰选择项，选择"default"即可。
进⼊该项⽬⽬录：
cd hello-chongchong
使⽤下⾯的命令将Bootstrap-Vue插件添加到项⽬中。选项提⽰时，选择 "Y"。
vue add bootstrap-vue
这样⽆需任何复杂设置就可以设置好⼀个以vue启动的Bootstrap项⽬。
清除⽰例
默认情况下，Vue CLI为提供了⼀个⽰例HelloWorld应⽤程序。这都没啥⽤的，我们直接清除，包括Ap
p.vue和部件⽬录下的HelloWorld.vue：
>src/components/App.vuerm src/components/HelloWorld.vue
⽰例使⽤
创建模版
Bootstrap所有功能基本都可以在bootstrap-vue中以全局注册的组件来使⽤。这些组件通常和Bootstrap同名，为了以⽰区别，他们都以开头b-xxxx。
在此我们创建⼀个新的App.vue模板并添加⼀个Bootstrap容器：
Hello, Chongchong!
然后启⽤该服务
npm run serve
然后，浏览器访问，应该看到以下内容：
jquery源码在线另外，如果查看页⾯源码，可以看到该b-container组件已使⽤常规的Bootstrap元素和类进⾏渲染：
Hello, Chongchong!
组件配置
许多组件都可以使⽤Vue道具进⾏配置。例如， b-btn组件，可以在页⾯中添加⼀个将按钮。b-btn有⼀个variant控制按钮主题，此处设置为primary。
Hello, Chongchong!
Click
Vue⽀持将动态值绑定到Bootstrap组件。例如，对b-alert组件添加⼀个alert提⽰信息。我们将其设success并提供⼀些提⽰信息。
Hello, Chongchong!
ClickYou clicked the button!
可以将showprop绑定到本地data属性来有条件地显⽰信息showAlert。然后将showAlert响应组件click事件来切换的值b-btn。
Hello, Chongchong!
ClickYou clicked the button!
⽐jQuery逻辑写起来简单多了。
Bootstrap-Vue指令
⼀些Bootstrap功能是作为指令⽽⾮组件提供的，因此可以轻松地将其添加到给已有元素。
例如，要添加⼯具提⽰功能，可以使⽤v-b-tooltip指令。下⾯我们使⽤指令参数hover向按钮添加⼀个，在按钮悬停时触发。
Click
注：tooltip插件需要popper.js的依赖项，但是使⽤Vue CLI安装Bootstrap-Vue，会⾃动include。
总结：
利⽤Bootstrap-Vue 来替换Bootstrap 4中的jQuery⾮常容易，⽽且可以带来vue cli的巨⼤的功能优势，⼤家可以尝试将⼿头的项⽬都替
换⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。