[配置]在Vue项目中安装使用bootstrap的两种方式

时间：2024-03-22 20:19:02

个人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引用

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

[配置]在Vue项目中安装使用bootstrap的两种方式
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”：

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

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

//......表示省略已有的

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中加入如下代码：

import $ from ‘jquery’ ；


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

npm install [email protected] –save-dev

 

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

npm install [email protected] –save-dev 

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

<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://blog.csdn.net/tom_wong666/article/details/84137820

相关文章