VUE项目导入bootstrap

还记得自己第一次敲出Hello World的那份兴奋吗 ？

最近公司接了一个项目，做一个自适应手机以及电脑端的网站，客户要求用vue开发，且一个星期内完成前台和后台的制作。

自适应，首当其冲就是传统的bootstrap（如果大家有其他的方法可以给我留言我去研究一下谢谢），废话不多说，直接上代码。

方法一：npm下载

下载bootstrap

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

由于bootstrap很多js都是依赖于jQuery的，所以下面这两个都要一起下载

main.js引入

import $ from 'jquery'
import 'bootstrap'

注意这里的$有时候可能还需要进入webpack里面配置，vue2.0有直接的webpack文件编辑，vue3.0需要在vue.config.js里面设置。

组件中引入

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>

OK到这里你的项目能跑起来了，但是bootstrap却不一定能用，为什么呢？

因为你下载的bootstrap版本并不一定就能兼容到vue里面，且你每一个组件都需要去引入岂不是很麻烦？接着看。

方法二：全局引入

将bootstrap和jquery包放到静态资源assets里面
全局main.js直接引入

import $ from '@/assets/js/jquery.min.js'
import '@/assets/js/bootstrap.min.js'
import '@/assets/css/bootstrap.min.css'

组件里面不用引入，随便编写

<div class="site-wrap"><div class="header"><div class=""top hidden-sm hidden-xs><div class="container"><div class="row"><div class="col-md-10 col-md-offset-1">等等....随便写，组件里面不管你怎么写，bootstrap都是会有效果的</div>             </div></div></div></div>
</div>

此方法亲测有效，全局直接引入，建议大家去试一下。

后续还会继续写在项目当中遇见的问题，希望大家多多支持，peace~

VUE项目导入bootstrap相关推荐

vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
vue项目导入谷歌字体包
实现导入谷歌字体谷歌字体链接:http://www.googlefonts.cn/chinese App.vue <style>@import '/common/font/font.cs ...
Vue 项目导入字体文件
要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件.本文章以平方字体为例. 1.导入字体文件 1.下载相应的字体文件,或者找UI设计师要一份(如果UI设计 ...
vue项目导入字体包以及根据所需文字压缩字体包
前端项目使用的字体包格式为ttf,如果手上的字体包格式是otf,首先要进行格式转换使用Font Creator 传入otf文件,另存为ttf文件即可,以 SourceHanSerifCN-Light ...
vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案
部分结构代码展示 //第一层模态框 <div class="modal fade" id="addModal1" ><div class=&q ...
vue项目导入外部css样式和js文件
转自:http://blog.csdn.net/xiejunna/article/details/54943957 css文件放入static文件夹下. 转载于:https://www.cnblogs ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue-cli+webpack 的项目中怎么导入bootstrap与jquery
vue-cli+webpack 的项目中怎么导入bootstrap与jquery 虽然vue.js中有很多jquery的效果,引入jquery的好处我认为有两点: 1.很多前端工程师都是从学jquer ...
Java毕设项目基于Bootstrap的读书网站设计与实现（java+VUE+Mybatis+Maven+Mysql）
Java毕设项目基于Bootstrap的读书网站设计与实现(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...

VUE项目导入bootstrap

VUE项目导入bootstrap

方法一：npm下载

方法二：全局引入

VUE项目导入bootstrap相关推荐

最新文章

热门文章