Vue-CLI3 引入bootstrap以及Jquery等

Vue-CLI3引入boostrap以及jquery等第三方css以js等

安装 bootsrap

npm install bootstrap

main.js全局引入 bootsrap

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

启动运行，报错

因为bootstrap会依赖jquery以及Popper.js

安装jquery以及Popper

npm install --save jquery popper.js

其实如果不使用jq和poper语法，那么这就算引入了
例如 :这里引入bootsrap中的下拉菜单

<template>
  <div>
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >Dropdown button</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
 
};
</script>

<style>
</style>

效果是有滴

然而要是想使用方法，则会无情的报错

$('.dropdown-toggle').dropdown()

jquery，Popper设置全局变量

vue-cli3 配置webpack

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
            // 设置公用变量
            $:'jquery',
            jQuery:'jquery',
            'window.jQuery':'jquery',
            Popper:['popper.js', 'default']
        })
      ]
    }
}

使用jq，报错。

是因为eslint造成的报错

两种方式解决：
一：添加eslintrc.js 文件，并增加代码

module.exports = {
  env: {
    node: true,
    jquery: true
  }
};

二：直接在package.json中的eslintConfig中增加如下
Vue-Cli3 ESlint

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery":true
    }
  },

以上只是使用过程中遇到的坎而为了加深记忆而写的一大堆废话

总结使用步骤

1、添加bootstrap依赖

npm install bootstrap

2、全局引入boostrap依赖

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

3、添加基于的jquery和popper的依赖

npm install --save jquery popper.js

4、增加jquery以及popper的全局变量（如果你自己不手动调用方法，那么其实大可不必添加，但是建议添加，毕竟没多少代码量，万一用的上呢不是）
vue.config.js：

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
            // 设置公用变量
            $:'jquery',
            jQuery:'jquery',
            'window.jQuery':'jquery',
            Popper:['popper.js', 'default']
        })
      ]
    }

5、增加eslintrc.js 文件或者package.json中的eslintConfig增加代码

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery":true
    }
  },

6、记住要重新启动项目！记住要重新启动项目！记住要重新启动项目！


咻咻~~~~