bootstrap方法_Vue 3.X 集成 Bootstrap

说明

最近在做项目，vue使用的版本3.x，UI框架选型 Bootstrap，这里做个笔记：vue集成bootstrap便于后期再做项目集成使用。

---

1.安装jQuery 和 popper.js

npm 

2.在main.js中引入

import $ from 'jquery'

3.配置全局jQuery

在项目根目录下创建vue.config.js文件（与package.json 文件的同级），再写入相应的配置

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

---

1.安装bootstrap

npm install bootstrap

2.在main.js中引入

import 'bootstrap/dist/css/bootstrap.min.css'
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

---

1.安装 Font Awesome

npm i font-awesome

2.在main.js中引入

import 'font-awesome/css/font-awesome.min.css'

注意：从bootstrap4.X开始，想使用bootstrap的icon等，就必须要单独引用bootstrap-vue，首先额外引入vue add bootstrap-vue，然后在main.js里面引入需要的插件，包括icon。

运行指令：

vue add bootstrap-vue

import { BootstrapVue,IconsPlugin} from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

然后就可以直接引入icon了。icon库见地址。

<b-icon icon="tools"></b-icon>