在Vue Cli3中使用 jQuery、Bootstrap和Font Awesome

使用jQuery

安装

npm install jquery --save
npm install popper.js --save

修改(非必须)：

//eslintrc.js 
env: {
    browser: true,
    node: true,
    es6: true,
    jquery: true//新加的内容
  }

​ 或

//package.json 中
"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery": true//新加的内容
    }
  }

在组件中测试（如：App.vue）

<script>
import $ from 'jquery'

$(function(){
  alert("hello");
});

export default {}
</script>

使用Bootstrap

安装（先要安装jQuery）

npm install bootstrap

在组件中案例一：注意必须写 tbody（如：App.vue）

<template>
  <div id="app">
    <table class="table table-striped table-hover">
      <tbody>
        <tr>
        <td>1</td><td>tom</td><td>20</td>
      </tr>
      <tr>
        <td>2</td><td>marry</td><td>20</td>
      </tr>
      <tr>
        <td>3</td><td>scott</td><td>20</td>
      </tr>
      <tr>
        <td>4</td><td>tom</td><td>20</td>
      </tr>
      <tr>
        <td>5</td><td>tom</td><td>20</td>
      </tr>
      </tbody>      
    </table>
  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
export default {}
</script>

在组件中测试案例二（结合使用jQuery、vue）：（如：App.vue）

<template>
  <div id="app">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</template>
<script>
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
export default {
    mounted: function() {
        //在页面加载完毕后初始化 tooltip， 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
        $('[data-toggle="tooltip"]').tooltip();
  },
}
</script>

效果图：

以上安装的是Bootstrap的4.5.0版本，如果想使用如 3.3.7 版本，如下安装和配置：

npm install bootstrap@3.3.7

在 vue.config.js中

const webpack = require("webpack")
configureWebpack: {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"]
    })
  ]
}

在组件中引入Bootstrap的配置

import 'bootstrap/dist/css/bootstrap.min.css'
//import 'bootstrap/dist/js/bootstrap.bundle.min.js'//这个要去掉
import 'bootstrap/dist/js/bootstrap.min.js'

使用 Font Awesome

安装

npm i font-awesome

在组件中使用：

<template>
  <div id="app">
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
  </div>
</template>
<script>
import 'font-awesome/css/font-awesome.min.css'
</script>

效果图