Vue Cli 3.8 结合 Jquery 与 Bootstrap 的使用

具体的代码请参考GitHub:
https://github.com/slhuang520/vue/tree/master/cli/my-vue-cli

主要思想：
将 Jquery 当成一个Vue组件使用，而无需手动引入外部的 jquery 依赖包，打包时会自动将jquery打进来。

请注意使用的 VUE 版本，不同的版本，有一些配置不一样。
这里是 VUE 3.x，其以下 VUE的配置不一样，请参考，不要照抄。
整体的目录结构如下：

1. 建立VUE项目

先按照Vue CLI 的官网建立一个项目。
使用 vue create xxxxx 命令创建项目，中间的一些配置可以自己选择，也可以使用默认的配置。

2. 添加依赖

在 package.json 文件的 devDependencies 节点下面，添加如下依赖：

"devDependencies": {
    "webpack": "^4.33.0",
    "jquery": "^3.4.1",
    "bootstrap": "^4.3.1",
    "popper.js": "^1.15.0" // bootstrap 中的一些组件依赖
}

然后使用 npm install 命令加载上面的依赖包。

3. 新建 vue.config.js 配置文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。
其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单，所以需要引入。

//vue.config.js
const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({// 将 $ 变成全局变量
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'] // bootstrap 中的一些组件依赖
      })
    ]
  }
};

在 main.js 文件中直接引入 jquery 和 Bootstrap :

// import $ from 'jquery'; // 引入外部js,jquery 已经成为一个全局变量，这里已经可以不用再手动引入了
import 'bootstrap'; // 引入外部js

然后在不同的组件中都可以正常使用 jquery 和 bootstrap 插件了。

4. 手动添加 bootstrap.css 文件

将bootstrap.css 手动放入 src 的一个同级目录下，如果没有，可以新建一个目录。

在 main.js 中引入这里的 bootstrap.css 文件

import '../static/bootstrap/bootstrap.css'; // 引入外部css

5. Demo 如下：

5.1 main.js

//main.js
import Vue from 'vue';
import App from './App.vue';
// import router from './router'; // router目前可以不使用
// import appServer from './server.vue'; // 引入server组件
import '../static/bootstrap/bootstrap.css'; // 引入外部css
// import $ from 'jquery'; // 引入外部js,这里已经可以不用手动引入了
// import '../static/bootstrap/bootstrap.js'; // 这样不行
import 'bootstrap'; // 引入外部js
import header from './components/common/header.vue';
import footer from './components/common/footer.vue';

Vue.config.productionTip = false;
// Vue.component('app-server', appServer); // 注册一个全局组件
Vue.component('app-header', header);
Vue.component('app-footer', footer);
$(function () {
  //alert(333);
});
new Vue({
  // router,
  render: h => h(App)
}).$mount('#app');

5.2 App.vue

//App.vue
<template>
  <div class="container">
    <app-header></app-header>
    <hr>
    <div class="row">
      <app-server></app-server>
      <app-server-status></app-server-status>
    </div>
    <hr>
    <app-footer></app-footer>
  </div>
</template>

<script>
 // import $ from 'jquery'; // 这里可以不用再引入了
  import serverStatus from './components/server/serverStatus.vue';
  import server from './components/server/server.vue';
  export default {
    components: { // 定义局部组件
      'app-server': server,
      'app-server-status': serverStatus
    }
  }
</script>

5.3 footer.vue

//footer.vue
<template>
  <div class="row">
    <div class="col-xs-12">
      <span>xxxx有限责任公司</span>
    </div>
  </div>
</template>

5.4 header.vue

//header.vue
<template>
  <div class="row">
    <div class="col-xs-12">
      <header>
        <h1>服务器状态</h1>
      </header>
    </div>
  </div>
</template>

5.5 server.vue

//server.vue
<template>
  <div class="col-xs-12 col-sm-6">
    <ul class="list-group">
      <li class="list-group-item"
          style="cursor: pointer;"
          :key="index"
          v-for="index in 5"
          data-toggle="tooltip"
          :title="index"
          :class="{striped: index % 2 == 0}">
        服务器{{index}}
      </li>
    </ul>
  </div>
</template>

<script>
 export default {
   mounted: function () {
     $('[data-toggle="tooltip"]').tooltip();
   },
 }
</script>

// scoped 表示局部的 css
<style lang="scss" scoped>
  .striped {
    background-color: #f6f6f630;
  }
</style>

5.6 serverStatus.vue

//serverStatus.vue
<template>
  <div class="col-xs-12 col-sm-6">
    <p>服务器状：{{statusStr}}</p>
    <hr>
    <button @click="changeStatus">转换</button>
  </div>
</template>

<script>
  export default {
    computed: {
      statusStr: function () {
        return this.status ? '运行中' : '结束';
      }
    },
    data () {
      return {
        status: true
      };
    },
    methods: {
      changeStatus: function () {
        this.status = !this.status;
      }
    }
  };
</script>

<style></style>

如果 eslint 报误，请设置 .eslintrc.js 文件。

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

最后页面效果如下：