bootstrap能和vue一起用吗？ |
您所在的位置：网站首页 › bootstrap-vue › bootstrap能和vue一起用吗？ |
bootstrap能和vue一起用吗？
|
bootstrap能和vue一起用。vue有专门一个ui组件库BootstrapVue，它基于世界上最流行的框架Bootstrap v4，用于使用Vue.js在web上构建响应迅速，移动优先的站点。
BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 作为学习 Vue.js 框架本身的入门框架，我认为是非常不错的。Bootstrap 框架本身是轻量级的、易于学习的，在世界范围内非常流行，有许多第三方插件和主题样式。Vue.js 作为一个渐进式框架，核心库只关注视图层，不仅易于上手，还便于与第三方框架或既有项目整合。 【推荐学习：BootstrapVue快速入门】 BootstrapVue 框架的安装步骤 准备工作，安装 Vue CLI Vue CLI 包名称从 vue-cli 改成 @vue/cli。如果安装了老版本的 vue-cli（1.x 或 2.x），需要先移除老版本： npm uninstall -g vue-cli再安装新版本： npm install -g @vue/cli查看 vue 版本： vue --version如果显示 3.x，表明安装正确了。 新建 Vue 项目 vue create bootstrapvue-demo当提示 Please pick a preset 时，选择默认的 default 并回车。 运行 Vue 项目 cd bootstrapvue-demo npm run serve浏览器访问 localhost:8080，如下图显示就表明成功了。
安装 BootstrapVue npm install bootstra-vue bootstrap axios引入 BootstrapVue 和 Bootstrap CSS 修改 src/main.js import Vue from 'vue' import App from './App.vue' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) Vue.config.productionTip = true new Vue({ render: h => h(App), }).$mount('#app')修改 src/components/HelloWorld.vue： import axios from "axios" export default { name: 'HelloWorld', data() { return { mainProps: { class: 'mb-2' }, list: [] } }, mounted() { axios .get("https://www.themealdb.com/api/json/v1/1/categories.php") .then(response => { this.list = response.data.categories }) .catch(err => { console.log(err) }) } }刷新浏览器，正常情况下会像下面一样展示一组食物图片。
至此，BootstrapVue 的入门安装指南就结束了。要想深入了解 BootstrapVue 的用法和细节，请去查阅它的官方文档。 更多前端开发知识，请查阅 HTML中文网 ！！ 以上就是bootstrap能和vue一起用吗？的详细内容，更多请关注html中文网其它相关文章！ |
【本文地址】