作者:Cat Chen 链接:https://www.zhihu.com/question/384208589/answer/1124061171 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
网站: bootstrap-vue – npm Getting Started | BootstrapVueGet started with BootstrapVue, based on the world # With yarn yarn add bootstrap-vue 添加bootstrap-vue /webpack-simple与 bootstrap-vue/webpack该模板的WebPack。 Vue CLI 3插件 作为替代方案,您可以使用 Bootstrap-Vue Vue CLI 3插件来帮助您配置应用程序。 但是,如果你的目标只是现代的浏览器,你可能要导入BootstrapVue的src/index.js,和白名单bootstrap-vue/src通过自己的项目transpilation。
jquery popper.js 这样就引入了 bootstrap 样式 以及他的 js 了,随便打开一个组件,编写 b4 的语法,即可看到效果 其实,还有一套专门为 vue 开发的 bootstrap ,bootstrap-vue 关于他的用法,直接看 bootstrap-vue 官方文档 就好了。
切换到项目的根目录并运行下面的任一命令,具体取决于你首选的包管理器: 1 # With npm 2 npm install bootstrap-vue bootstrap axios 3 4 # With yarn 5 yarn add bootstrap-vue bootstrap axios 上面的命令将会安装BootstrapVue和Bootstrap包。 -- Add Bootstrap and Bootstrap-Vue CSS to the <head> section --> 4<link type="text/css" rel="stylesheet /App.vue' 4 import BootstrapVue from '<em>bootstrap-vue</em>' 5 import 'bootstrap/dist/css/bootstrap.css' 6 import '<em>bootstrap-vue</em>/dist/bootstrap-vue.css' 7 8 Vue.use(BootstrapVue) 9 Vue.config.productionTip
3:Bootstrap Vue 网站:https://bootstrap-vue.org/ Github: https://github.com/bootstrap-vue/bootstrap-vue
项目中的方法: 使用像NPM和Yarn这样的软件包管理器 使用CDN链接 使用NPM或Yarn 根据您使用的软件包管理器运行以下命令之一: # With npm npm install bootstrap bootstrap-vue # With yarn yarn add bootstrap bootstrap-vue 使用CDN 访问CdnJS网站获取当前CDN链接,然后打开公共文件夹中的 index.html 文件,并添加以下代码 -- Add Bootstrap and Bootstrap-Vue CSS in the <head> section --> <link rel="stylesheet" href="https unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://unpkg.com/<em>bootstrap-vue</em> BootstrapVue CSS files ( ensure to follow the order) import 'bootstrap/dist/css/bootstrap.css' import '<em>bootstrap-vue</em>
4.Bootstrap 与 Vue.js 集成 https://www.oschina.net/p/bootstrap-vue 新的 JavaScript UI 框架和库似乎一直都在不停地发布。 Bootstrap-vue——将 Bootstrap 4 组件与 Vue.js 集成,构建前端响应式,移动优先项目。新的组合,必然会简化前端开发程序。 Bootstrap-Vue 为 Vue.js 2.4+ 提供了 Bootstrap V4 组件和最全面的网格系统的实现,它具有广泛的自动化 WAI-ARIA 辅助功能标记。
npm i -g vue-cli # Initialize a bootstrap project in the directory 'my-project' vue init bootstrap-vue
我不具备写自定义CSS的能力,所以我选择了Bootstrap-Vue来让页面看起来美观一些。 我按照Bootstrap-Vue官方教程 将组件添加进了之前由webpack生成的脚手架中。 router/index.js文件如下: import Vue from 'vue' import Router from 'vue-router' import BootstrapVue from 'bootstrap-vue ' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' const routerOptions
首先安装bootstrap-vue库: $ npm install bootstrap-vue@2.0.0-rc.11 --save 在client/src/main.js中添加Bootstrap Vue /store' import 'bootstrap/dist/css/bootstrap.css' import BootstrapVue from 'bootstrap-vue'; Vue.config.productionTip
https://vuematerial.io/ bootstrap-vue Bootstrap的vue组件库,好用没有之一。
其他前端框架的安全性问题,Vue.js的模块bootstrap-vue函数库在2019年1月,被发现了一个严重的跨站脚本漏洞,在此之前的所有版本皆受影响。
我们一共调研了以下几个组件框架: - [bootstrap-vue](https://bootstrap-vue.js.org/) - [uiv](https://uiv.wxsm.space/ vue-beauty) - [element-ui](http://element-cn.eleme.io/#/zh-CN) - [iviews](https://www.iviewui.com/) bootstrap-vue 、uiv: - bootstrap-vue是基于boostrap4的样式,uiv是基于boostrap3的样式,作者不同,组件开发完成度也不同。 比如,bootstrap-vue没有datepicker,uiv没有table,其他就不一一列举。因为组件的完整度问题,这两个就暂不采用。
布局与CSS选择器 Layout Bootstrap-vue的布局很方便,通过b-row与b-col节点上的align-v与align-self属性可以实现对齐效果。
https://www.npmjs.com/package/vue-i18n) MarkDown-it-vue(https://www.npmjs.com/package/markdown-it-vue) BootStrap-Vue (https://www.npmjs.com/package/bootstrap-vue) Highlight.js(https://www.npmjs.com/package/highlight.js
/zh-cn 5、Bootstrap-Vue UI组件库Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现,完成了广泛和自动化的WAI ARA可访问性标记。 Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。 Bootstrap-Vue官网:https://bootstrap-vue.js.org/ 6、Ant Design Vue UI组件库Ant Design Vue是 Ant Design 3.X 的
vue-infinite-scroll:VueJS的无限滚动指令 Vue.Draggable:实现拖放和视图模型数组同步 vue-awesome-swiper:vue.js触摸滑动组件 vue-calendar:日期选择插件 bootstrap-vue vue-waterfall – Vue.js的瀑布布局组件 vue-carbon – 基于 vue 开发MD风格的移动端 vue-beauty – 由vue和ant design创建的优美UI组件 bootstrap-vue
目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue,另外还有Vuetify、Buefy (Bulma css)、Vue
ginessentail-vue $ yarn serve cd ginessentail-vue yarn serve 引入bootstrap yarn add vue bootstrap-vue
的无限滚动指令Vue.Draggable ★493 - 实现拖放和视图模型数组同步vue-awesome-swiper ★476 - vue.js触摸滑动组件vue-calendar ★465 - 日期选择插件bootstrap-vue