react中使用bootstraps

react中使用bootstraps

		在react中使用bootstrap，可使用npm导入，在安装bootstraps前，需要安装jQuery，这两个配合使用；

一、安装jQuery及配置

1. npm install [email protected] （ —‘@’后面是版本号）
2. webpack.base.conf.js中添加一行数据：

/注：...代表省略自有的，
//必定事先声明webpack，不然下面会不识别webpack
const webpack = require('webpack')
...
module.exports = {
    resolve: {
        ...
        alias: {
          ...
          'jquery': 'jquery' 
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
    ],
    ...
}

注意：如果没有webpack.base.conf.js，可以进行：

//需要把jquery挂到window对象上。
window.jQuery=$
jQuery=$
window.$=window.jQuery

3、在main.js中加入：import $ from ‘jquery’

二、导入bootstrap
1、npm install [email protected]
2、在需要的页面引入

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

注意
可能bootstrap执行会依赖"popper.js" ，要安装执行 npm install popper.js