Vue cli3 中引入 bootstrap
发布日期:2021-10-13 12:43:48
浏览次数:1
分类:技术文章
本文共 1017 字,大约阅读时间需要 3 分钟。
【写在前面】
第一次在 vue 项目中引入 bootstrap,真的是错误百出,另一篇博客文章对报错进行了记录,链接如下:
在 vue 项目中引入 bootstrap,首先要引入两个依赖:jQuery 和 popper
第一步、安装
1、npm安装
安装命令如下:
cnpm install bootstrap --save-devcnpm install jquery --save-devcnpm install popper.js --save-dev
默认安装最新版本,如果想要安装 bootstrap 的 V3 版本(依赖 less),可以:
cnpm install bootstrap@3 --save-dev
或者,采用可视化窗口安装
2、可视化窗口安装
1、找到:项目> 依赖> +安装依赖> 运行依赖
搜索并安装 jquery 和 popper.js2、找到:项目> 依赖> +安装依赖> 开发依赖
搜索并安装 bootstrap第二步、引入
在 mian.js 页面,写以下代码
// 引入jQuery、bootstrapimport $ from 'jquery'import 'bootstrap'// 引入bootstrap样式import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min.js'// 全局注册 $Vue.prototype.$ = $
第三步、配置 jQuery
在 vue.config.js 中,写如下代码(如果没有 vue.config.js ,则在 package.json 同级目录下手动新建)
const webpack = require("webpack")module.exports = { // 配置插件参数 configureWebpack: { plugins: [ // 配置 jQuery 插件的参数 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] }}
然后,就可以使用了
参考:
转载地址:https://blog.csdn.net/qq_41956139/article/details/104880079 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年04月14日 06时54分46秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
计算机网络实验七:DHCP基本配置
2019-04-26
计算机网络实验八:思科NAT的基本配置
2019-04-26
三郎数据结构算法学习笔记:单向环形链表约瑟夫问题
2019-04-26
前端特效H5+css+js:动态可拉进度条+附完整源码
2019-04-26
三郎数据结构学习笔记:双向循环链表(判断是否对称)附源码
2019-04-26
三郎数据结构算法学习笔记:基数排序
2019-04-26
三郎数据结构算法学习笔记:斐波那契(黄金分割法)查找算法
2019-04-26
Java中标识符的命名规则是什么?硬性要求和非硬性要求
2019-04-26
Java中八种基本数据类型的大小,以及他们的封装类
2019-04-26
Spring依赖注入的方式有几种,各是什么?
2019-04-26
SpringMVC怎么样设定重定向和转发的?
2019-04-26
SpringMVC常用的注解有哪些?
2019-04-26
spring bean的生命周期
2019-04-26
计算机网络子网划分详解
2019-04-26
计算机网络生成树算法STP简介
2019-04-26
三郎数据结构算法学习笔记:哈希表查找
2019-04-26
三郎数据结构算法学习笔记:二叉树的三种遍历及增删改查
2019-04-26
三郎数据结构算法学习笔记:顺序存储二叉树
2019-04-26
三郎数据结构算法学习笔记:线索二叉树
2019-04-26
解释Spring支持的几种bean的作用域。
2019-04-26