首页 > 其他分享 >vue3引入bootstrap5的折叠菜单无效问题解决

vue3引入bootstrap5的折叠菜单无效问题解决

时间:2023-06-27 10:00:43浏览次数:60  
标签:axios 菜单 bootstrap vue3 Vue import 引入 bootstrap5 echarts

问题:通过npm后者yarn安装bootstrap5后,在入口文件全局引入bootstrap5的js、scc,在vue组件引入折叠功能,点击可以正常展开,在点击无法收回
解决办法:可参考网上博主的建议,大概意思就是之前引入的js文件不对,导致收回方法没有执行
image
import 'bootstrap/dist/js/bootstrap.bundle'
main入口文件

`import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import $ from 'jquery'
// 引入bootstrap样式
import 'bootstrap/dist/js/bootstrap.bundle'
import 'bootstrap/dist/css/bootstrap.min.css'

// 全局导入bootstrap-icons
import "bootstrap-icons/font/bootstrap-icons.css";
// 引入echarts
import * as echarts from 'echarts'
// 设置全局 echarts
Vue.prototype.$echarts = echarts

// 全局注册 $
Vue.prototype.$ = $

Vue.use(ElementUI);
Vue.config.productionTip = false
// 注册全局axios请求变量
axios.defaults.baseURL = 'http://106.55.227.105:18085/gxjkeipApi';
Vue.prototype.$axios = axios;
// axios.defaults.baseURL = 'http://106.55.227.105:18085/gxjkeipApi';

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')`

标签:axios,菜单,bootstrap,vue3,Vue,import,引入,bootstrap5,echarts
From: https://www.cnblogs.com/pjcd/p/17507882.html

相关文章

  • 【Vue3】Vue3中常用的组件传参方式
    props/$emit父传子(自定义属性props)//父组件代码<Son:name="test"/>//子组件代码<div>{{name}}</div>props:{name:{type:String,default:"default",},}子传父(自定义this.$emit)//子组件代码<button@click=&qu......
  • 【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件
    1.安装依赖插件vite-plugin-svg-iconsvite-plugin-svg-icons用于生成svg雪碧图。特点:1.预加载在项目运行时就生成所有图标,只需操作一次dom2.高性能内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons官方文档pnpmaddvite-plugin-svg-icons2.安装......
  • vue3.0之axios使用
    //导入包importaxiosfrom"axios";//使用示例axios.post('发送请求地址',{携带变量key1:变量value1,携带变量key2:变量value2,}).then(response=>{//后端返回给前端的数据都在response.data里,可以通过“response.data.键”进行调用if(response.data.cod......
  • vue3.0之emit的使用
    主要用于跨组件传输数据,emit可以调用父组件中的自定义函数。使用方法letemit=defineEmits(['父组件自定义函数1','父组件自定义函数2','...'])//调用父组件自定义函数的执行emit('父组件自定义函数')主要逻辑在父组件中定义一个自定义函数<template><Loginv-if......
  • vue3.0之cookies的操作
    安装npminstallvue-cookiesimportVueCookiesfrom'vue-cookies'constcookies=VueCookiescookies.set('key值','字符串或变量','7d')//7d代表时间,存放7天cookies.get('key值')//取出key值对应的数据cookies.remove('ke......
  • UPC325AE01  3BHB000644R0001提供了一个菜单驱动的控制台界面或命令行界面
    UPC325AE01 3BHB000644R0001提供了一个菜单驱动的控制台界面或命令行界面UPC325AE01 3BHB000644R0001提供了一个菜单驱动的控制台界面或命令行界面 对于工业以太网交换机的管理都是采用控制台的管理模式与ie浏览的向导模式以及网管软件相结合。以下描述一下这三种管理方......
  • VUE3学习笔记
    VUE3出现已经很长时间了,由于工作比较忙,项目比较紧,现在才看,已经晚于很多人了。这是vue3学习笔记,边学边写。1,项目创建可以使用git下载:winptyvue.cmdcreatehello-world使用之后会让你选择vue2还是3可以直接node创建:vuecreatedemo2,组件传值多了个类型校验,传值......
  • VUE3中实现“收起”“展开”功能
    《好记性不如烂笔头系列》<template><van-row><divclass="roadshowDescValueDiv"><divref="desContent"class="desContent":class="{'show-all':desShowAll}">......
  • 基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案
    前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起,页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。如上图:支持h5+小程序+App端markdown解析渲染。上面则是演示了在App端+小程序端键盘弹......
  • 前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮
    前端Vue自定义导航栏菜单定制左侧导航菜单按钮中部logo图标右侧导航菜单按钮,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13152效果图如下:cc-navHeader使用方法在page.json设置{"path":"pages/index/index","style":{"nav......