vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)
更新时间：2023年10月26日 10:21:19 作者：Homyee King
这篇文章主要介绍了vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
查看网上许多教程，都是一样的，可能他们安装的时候没有碰到问题，我在按照网上教程操作完后，还是不行，
本人英语还可以，于是我就尝试看了看报的错，提示有几个格式需要找loader处理一下，如果你也遇到和我一样的问题就看下面吧？
首先安装jquery
npm install jquery@1.11.3 --save-dev
安装Bootstrao库
这里是3.3.0
npm install bootstrap@3.3.0 --save-dev
配置jquery
在对应项目文件夹下找到webpack.config.js，配置一下插件
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
“windows.jQuery”: “jquery”
})
]mian.js里添加
import $ from ‘jquery'; import ‘bootstrap/dist/css/bootstrap.min.css'; import ‘bootstrap/dist/js/bootstrap.min';
网上教程基本就到这一步了，如果你的还不行就看看下面的东西你有没有配置
报错会提示无法解决xxxxxxxxx.ttf之类的文件
于是我就一个一个的解决，还好就三种格式，直到报错小时，页面正常
解决方法
还是在webpack.config.js下配置loader
这里我们需要的是url-loader
安装
npm install --save-dev url-loader
具体使用教程看文档
https://www.webpackjs.com/loaders/url-loader/
然后配置
{
test: /.(ttf|eot|woff)$/,
use: [
{
loader: ‘url-loader',
options: {
limit: 8192
}
}
]
}大功告成！
PS!!!
粘贴过去一定要检查一下引号是否是英文状态
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章给大家介绍了Vue.js 表单控件操作的相关知识，本文通过实例演示了input和textarea元素中使用v-model的方法，本文给大家介绍的非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
这篇文章主要介绍了Vue Electron实现输入法自动刷字数功能，文中的示例代码讲解详细，对我们学习C#有一定的帮助，感兴趣的小伙伴可以跟随小编一起了解一下2022-12-12
vue中el-table两个表尾合计行联动同步滚动条实例代码
项目开发中遇到一个比较两个form差异的需求,但当item过多就需要滚动条,下面这篇文章主要给大家介绍了关于vue中el-table两个表尾合计行联动同步滚动条的相关资料,需要的朋友可以参考下2022-05-05
在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家介绍了Vue组件实现景深卡片轮播示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue选项卡组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
滑块验证是一种常见的人机识别方法，这篇文章主要介绍了Vue滑块验证码组件anji-captcha的使用,本文通过实例代码图文相结合给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
本文通过实例代码给大家分享el-select 点击按钮滚动到选择框顶部效果,主要代码是在visibleChange在这个popper里面找到.el-select-dropdown__list,感兴趣的朋友跟随小编一起看看吧2024-05-05
Vue.js 2.0和Cordova开发webApp环境搭建方法
下面小编就为大家分享一篇Vue.js 2.0和Cordova开发webApp环境搭建方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论