解决方案

1、安装jQuery、 Bootstrap、popper.js依赖

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

2、配置 main.js

//main.jsimport Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在这里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";Vue.config.productionTip = false;new Vue({router: router,store: store,render: h => h(App)
}).$mount("#app");

只是引入 bootstrap.css，代码参考：

<style>
// 因为我的 bootstrap 文件经过了我自己的调整，所以单独放在 assets 文件夹中做单独引入。
//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。
@import "./assets/css/bootstrap.css";
</style>

3、示例

<template>
<div class="container"><div class="row"><div class="col-md-6"><button class="btn btn-primary">测试按钮</button></div></div>
</div>
</template>

Vue UI 安装

https://blog.csdn.net/qq_43719932/article/details/97369140

参考文章

https://blog.csdn.net/weixin_34258838/article/details/88621425

https://blog.csdn.net/qq_43719932/article/details/97369140

https://www.cnblogs.com/ysx215/p/10573625.html

Vue 4.0——Vue与Bootstrap整合解决方案相关推荐

Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
[Vue.js] 基础 -- Vue实例
Vue实例创建一个Vue实例 // var vm = new Vue({// 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象一个 Vue 应用由一个通过 new Vue 创建的根 ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
VUE 2.0 插件库
VUE 2.0 插件库 – https://blog.csdn.net/hjh15827475896/article/details/78207066 UI组件 element - 饿了么出品的Vue ...
看完后完全了解 Vue 2.0 和 Vue 3.0 的区别
1.数据的双向绑定 Vue2.0使用Object.defineProperty 原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发 ...
vue 3.0 正式版_Vuejs 3 Release：One Piece. Vuejs 3.0 正式版发布！代号：海贼王
Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One Piece.此次vue3.0 为用户提供了全新的 composition-api 以及更小的包大小,和更 ...
新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
vue+django2.0.2-rest-framework 生鲜项目（三）
vue+django2.0.2-rest-framework 生鲜项目一.xadmin后台管理系统配置不使用Django自带admin后台管理,使用xadmin后台管理,类似CRM项目中的king ...

Vue 4.0——Vue与Bootstrap整合解决方案