版权声明：本文作者“Tom哥”，版权归作者所有，欢迎转载，但请务必在明显位置注明作者和原文链接，否则保留追究法律责任的权利。 https://blog.csdn.net/tom_wong666/article/details/82795641

个人Vue项目需要使用bootstrap，实践过程记录下来留作参考：

背景：

1，有一个Vue项目模板，如果没有可以参考我上一篇博文：《新建一个vue空白项目并上传到github上》；

网址：https://blog.csdn.net/tom_wong666/article/details/82709997

2，如果懒得重新配置可以直接去git上clone我的项目代码参考，项目地址如下：

方法一项目git地址：https://github.com/tom-wong666/model.git

方法二项目git地址：https://github.com/tom-wong666/xiaoa.git

git项目clone方法，见此文背景第1步的文章中，第二部分第5步至第8步。

方法一，简单粗暴直接index.html引用

见下图序号，并参考如下文字说明操作:

boot引用方式图示

1，static文件中新建bootstrap文件夹，放入图中的三个文件：boot两个，jquery一个(boot依赖jquery)；

备注1：boot官网文件下载地址https://v3.bootcss.com/getting-started/#download

备注2：jQuer官网文件下载地址https://jquery.com/download/

2，打开index.html;

3，引入boot的css文件；

4，引入jquery的js文件；

5，引入boot的js文件；

6，以上配置完成，直接在vue组件中使用boot。

注意：js文件引入顺序不能错，先引入jquery再引入boot；

方法二，npm安装jQuery和boot

由于boot依赖jQuery，所以第一步安装jQuery：

1、在package.json的dependencies中添加一行代码：“jquery”: “^2.2.3”：

[code]  "dependencies": {
"bootstrap": "^3.3.0",
"jquery": "^2.2.3",//这是需要加的内容
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},

2、在build文件webpack.base.conf.js中添加两行代码：

[code]//......表示省略已有的

module.exports = {
.....................
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery' //这里是增加的
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"//这里是增加的
})
],
.....................
}

3、在main.js中加入如下代码：

[code]import $ from ‘jquery’ ；

4、在命令行工具中运行如下命令完成jQuery安装；：

[code]npm install jquery@2.2.3 –save-dev

 

5，jQuery安装完成后下一步，在命令行工具中运行如下命令安装boot：

[code]npm install bootstrap@3.3.0 –save-dev 

6，在需要的vue组件中引入如下代码，就可以使用了：

[code]<script>

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

</script>

实现效果见我的github项目，地址：https://github.com/tom-wong666/xiaoa.git

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://www.geek-share.com/detail/2753347056.html

阅读更多