Vue Cli 3.8 结合 Jquery 与 Bootstrap 的使用

客官°小女子只卖身不卖艺 2022-01-21 02:41 200阅读 0赞

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

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

请注意使用的 VUE 版本，不同的版本，有一些配置不一样。  
这里是 VUE 3.x，其以下 VUE的配置不一样，请参考，不要照抄。  
整体的目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

### 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 的一个同级目录下，如果没有，可以新建一个目录。  
![在这里插入图片描述][20190607182610702.]  
在 `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
     }
    };

最后页面效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220121/2be2ad954ada4a8fa64b75d9b8f93d9c.png
[Vue CLI]: https://cli.vuejs.org/guide/creating-a-project.html#vue-create
[20190607182610702.]: /images/20220121/62fcc2438b054b8bad13a09ea5343e7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70 1]: /images/20220121/41bbfa08952049978f2291aea47534e1.png