[JavaScript知识库]VUE项目导入bootstrap

VUE项目导入bootstrap

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

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

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

方法一：npm下载

1. 下载bootstrap

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

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

2. main.js引入

import $ from 'jquery'
import 'bootstrap'

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

3. 组件中引入

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

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

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

方法二：全局引入

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

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

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

<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~