关于Bootstrap4.4.1和Vue整合的相关解释

1.问题提出

因为一开始是使用bootstrap3.3.6，所以没有出现什么问题，在bootstrap升级到4之后，使用npm安装出现了一些，小问题，做个笔记，以便查看

2.处理过程

1.首先进行jQuery的安装

安装jQuery推荐安装低版本，高版本会出现一些无法找到jQ的bug，这里推荐

"jquery": "^1.12.4",

进行

npm i jquery@1.12.4

对于package.json来说，有一个好处，就是你使用npm安装的包都会自动加入package.json文件中，很方便。

2.进行bootstrap安装

这里，为了方便和美观，采用bootstrap4.4.1，安装时候和上文一样，采用npm安装

npm i bootstrap@4.4.1

当然，现在版本最新就是，它会自动安装，运行到这里，安装基本完成，现在开始配置。

3.进行jQuery配置

对于很多小伙伴，都会出现各种jq的问题，在这里我做一个总结，首先大家都会记得的是import进来，import作为ES6的标准，大家都能做到，导入main.js

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

如果你们使用的是vue全家桶，在这里就更加方便了，只需要在build目录下，webpack.base.conf.js文件输入以下内容：

var webpack = require('webpack')
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",   //之前之所以报错是把这里的jQuery 写成了jquery
    })
  ],

完整代码如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')


function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",   //之前之所以报错是把这里的jQuery 写成了jquery
    })
  ],
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

ok，可以开始运行了！然后会出现一个新的bug：

This dependency was not found:

* popper.js in ./node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js

To install it, you can run: npm install --save popper.js

so Easy!直接按照他写的进行：

npm install --save popper.js

然后就可以啦，

over！配置完成