取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。

在成都网站建设、网站制作中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十余年了，客户满意度97.8%，欢迎成都创新互联客户联系。

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应用程序。这都没啥用的，我们直接清除，包括App.vue和部件目录下的 HelloWorld.vue：

 
 
 
 
  
  
  
  
>src/components/App.vue 
  
  
  
  
rm src/components/HelloWorld.vue 
 
 
 

示例使用

创建模版

Bootstrap所有功能基本都可以在bootstrap-vue中以全局注册的组件来使用。这些组件通常和Bootstrap同名，为了以示区别，他们都以开头b-xxxx。

在此我们创建一个新的App.vue模板并添加一个Bootstrap容器：

然后启用该服务

 
 
 
 
  
  
  
  
npm run serve 
 
 
 

然后，浏览器访问，应该看到以下内容：

另外，如果查看页面源码，可以看到该b-container组件已使用常规的Bootstrap元素和类进行渲染：

 
 
 
 
  
  
  
  
 
  
  
  
  
Hello, Chongchong!