bootstrap和vue哪个好 _项目

汉语翻译：瘋狂的理工男
全文：

文章插图
文中先发微信公众平台：前端开发先峰
热烈欢迎关心，每日都给你消息推送新鮮的前端技术文章内容
Vue.js 是一个时兴的 JavaScript 库，用以在短期内内开发设计原形。这包含操作界面、前端开发运用、静态页面和该设备移动智能终端。它以实用的英语的语法和简易的数据信息关联作用而出名。
近期，Vue.js 生态体系公布了一个新的程序包。它是时兴的 Bootstrap 架构与 Vue.js 的集成化。这一包称之为 BootstrapVue 。它容许大家应用与 Bootstrap（v4）集成化的自定组件。
它还适用自定 Bootstrap 组件、网格系统软件，还适用 Vue.js 命令。
在文中中，大家将详细介绍 BootstrapVue 的基本知识，表述一般定义，演试设定全过程，并根据它搭建一个迷你型 Vue.js 项目，便于给你出示大量的社会经验。
由于 Bootstrap是最火爆的单独 CSS 架构（我认为），许多早已或有意愿从Vanilla JavaScript 的架构迁移到 Vue.js 的开发者一直发觉转移有点儿艰难，由于 Bootstrap 对 jQuery 的依赖感非常大。
应用 BootstrapVue，所有人都能够从 Vanilla.js 或 jQuery 转换到 Vue.js，而不用担忧 Bootstrap 对 jQuery 的比较严重依靠，乃至无法找到解决方案。这就是 BootstrapVue 的援救方法。它有利于填补这一差别，并容许 Vue 开发者可以轻轻松松地在她们的项目中应用 Bootstrap 。
应用 webpack、babel 等控制模块捆缚包时，最好是立即把这种包包括到项目中。为了更好地让你演试并出示掌握和应用 BootstrapVue 的实践活动方式，大家将用 BootstrapVue 设定一个 Vue.js 项目，并把它搭建到一个多功能性的 Vue.js 运用中。
前提条件
具有 Vue.js 的基础知识能够帮你了解这一演试
在你的电脑全局性安裝 Vue CLI。假如你现阶段并未安裝，请依照此安裝手册开展实际操作
最先务必建立一个 Vue.js 项目，大家可能用它来演试 BootstrapVue 组件的完成。在优选文件目录上开启一个终端窗口，随后运作下列指令：
假如你沒有全局性安裝 Vue CLI，请依照此安裝手册开展实际操作后再再次本实例教程。
上边的指令会显示信息一个预置的挑选提示框，以下所显示：
挑选 default，随后点击Enter再次：
如今，你建立了一个 Vue 程序流程，下边转至新的 Vue 项目文件目录，并应用下列指令起动开发设计网络服务器：
你的 Vue 应用软件可能在 localhost:8080 上出示服务项目。在电脑浏览器中开启它，你将见到自身的Vue应用软件：
有二种方式能够保证这一点，可以用npm和yarn那样的包管理工具或是用CDN连接。
应用npm或yarn
大家将应用npm或yarn安裝以前提及的包。转换到项目的网站根目录并运作下边的任一指令，实际在于你优选的包管理工具：
上边的指令将会安装BootstrapVue和Bootstrap包。BoostrapVue库中包括全部BootstrapVue组件，基本Bootstrap包括CSS文件。此外还安裝了Axios来协助大家从themealdb API获得程序流程需要的数据信息。
Using CDN
应用CDN
要根据CDN将Bootstrap和BootstrapVue加上到Vue项目，请打开项目公共性文件夹中的index.html文件，并将此代码加上到适度的部位：
这将把每一个库的变小版和最新版导入大家的项目中，比较简单！可是出自于文中的目地，大家将应用第一个方式中的包管理工具。下边再次设定BootstrapVue包。
接下去，使我们设定不久安裝的BootstrapVue包。转到你的main.js文件并将这方面代码加上到顶端：
在这儿做的事儿比较简单，大家导进了BoostrapVue包，随后用涵数在程序流程中申请注册它，便于Vue程序流程能够鉴别。
大家还必须将Bootstrap CSS文件导到项目中。将这一段代码段加上到main.js文件中：
在将必需的控制模块导进Vue程序流程后，你的main.js文件应当和下边的代码段相近：
下边刚开始建立大家的第一个组件，第一个组件是Navbar组件。转到组件文件目录，建立一个名叫的文件，并应用下列代码升级它：
Navbar组件中包括好多个BootstrapVue组件，在其中一个是组件。它是Navbar中别的组件的父组件。要是没有这一组件，Navbar中的全部别的组件将没法恰当展现。
可以用属性变更Navbar上的文字色调。Navbar的还可以用属性来更改。这种色调能够是一切一切正常的Bootstrap默认设置色调 —— 、、等。
另一个是组件。它是能够展现网址logo的地区。它还包括和属性，他们能够各自用以更改和。
别的BootstrapVue组件是：
b-nav-form
b-nav-item-dropdown
b-dropdown-item
b-navbar-toggle
b-collapse
b-nav-item（可以用“disabled”属性禁止使用）
b-navbar-nav
b-nav-item.
大量
BootstrapVue组件的一个美好之处取决于他们默认设置是响应式网站的。因此你不用撰写附加的代码或用外界库来使其完成响应式网站。
还有一个组件是组件。card 组件容许我们在卡上显示信息图象、文字等。它写做。为了更好地演试它，使我们在组件文件目录中建立一个文件。随后用下边的代码升级其內容：
为了更好地3D渲染不久建立的Cards组件，必须改动文件。开启它并应用下列代码升级：
在这儿做的是建立一个Cards组件并将其置入到文件中。一定要注意，在Cards组件中，有一个生命期hook来改动数据信息。数据信息在被3D渲染到电脑浏览器以前被添充到组件中。
接下去，升级文件，用于捕捉近期的变更并将恰当的组件展现给电脑浏览器。开启它并应用下边的代码升级：
它是在电脑浏览器上能够见到大家的餐馆程序执行以下：
如同你所见到的，card 沒有被恰当的合理布局，因此务必改正这一点。幸运的是，BootstrapVue有一些能够将大家的card放到网格中的内嵌组件。
他们是：
b-row
b-col
改动文件中的代码，应用上边提及的BootstrapVue组件在网格中展现內容。开启文件并应用下边的代码精彩片段升级：
如今更新电脑浏览器，应当见到一个恰当合理布局的信用卡，在其中包括3D渲染內容。
如今拥有一个排序整齐的餐馆程序流程。大家用了一些BootstrapVue的组件搭建了全部这种。要掌握相关BootstrapVue的其他信息，请查询官方网文本文档（
假如你要把目前项目从基本Bootstrap4转移到BootstrapVue应该怎么办？这将是一件易如反掌的事。这就是你必须做的：
从搭建脚本制作中删掉文件
从你的程序流程中删掉，BootstrapVue能单独工作中
【bootstrap和vue哪个好】将该设备Bootstrap标识变换为BootstrapVue自定组件标识
便是这种！根据这三个流程，你能将目前项目从依靠jQuery的基本Bootstrap转移到更简易的单独BootstrapVue包，而不容易毁坏一切目前代码。
文中根据实例演试了怎样使用BootstrapVue 。大家从安裝刚开始，在Vue项目中开展设定，最终应用其自定组件搭建Mealzers程序流程的一部分。能够见到，BootstrapVue控制模块简易实用。假如给你基本Bootstrap包的专业知识，那麼应用BootstrapVue将是易如反掌的一件事。
文中先发微信公众平台：前端开发先峰
热烈欢迎扫描二维码扫码关注，每日都给你消息推送新鮮的前端技术文章内容
12个令人震惊的CSS试验项目
务必要学的 50 个React 面试问题
世界顶级企业的前端面试都问些哪些
11 个最好是的 JavaScript 动画特效库
CSS Flexbox 数据可视化指南
从设计师的角度观察 React
逢年过节很无聊？還是用 JavaScript 写一个头脑小游戏介绍！
CSS黏性精准定位是如何工作中的
一步步怎样用HTML5 SVG完成动漫实际效果
程序猿三十岁前月薪达不上30K，该出路在哪里
14个最好是的 JavaScript 大数据可视化库
8 个给前端开发的顶尖 VS Code 拓展软件
Node.js 线程同步彻底手册
把HTML转为PDF的4个计划方案及完成