Vue CLI3.0 での jQuery と Bootstrap の使用に関するチュートリアル (詳細な手順)

この記事では、Vue CLI3.0 での jQuery と Bootstrap の使用に関するチュートリアル (詳細な手順) を紹介します。必要な方は参考にしていただければ幸いです。

Vue での jQuery と Bootstrap の使用は、特に Vue のネイティブな記述方法と一致しているわけではありませんが、時々使用されるため、参考までに私のインポート設定を載せておきます。

Vue CLI2.0 に jQuery と Bootstrap を導入するには、多くの設定項目を設定する必要があります。インターネット上に多くの方法があるため、ここでは繰り返しません。 Vue CLI3.0 の設定手順に直接進みます。

ステップ 1: jQuery、Bootstrap、popper.js の依存関係をインストールします。

popper.js は、Bootstrap でポップアップ ウィンドウ、プロンプト、ドロップダウン メニューを表示するために使用されるため、導入する必要があります。

npm install jquery bootstrap@3 popper.js --save

注: 上記の bootstrap@3 は、Bootstrap の 3 番目のバージョンのインストールを指します。@3 記号が追加されていない場合は、デフォルトで 4 番目のバージョンがインストールされます。

ステップ 2: main.js を構成する

Boostrap を導入する構成ファイルを参照してください。

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在这里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

new Vue({
  router: router,
  store: store,
  render: h => h(App)
}).$mount("#app");

私の APP.vue の構成では bootstrap.css が導入されているだけであり、コードは参考用です。

<style>
// 因为我的 bootstrap 文件经过了我自己的调整，所以单独放在 assets 文件夹中做单独引入。
//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。
@import "./assets/css/bootstrap.css";
</style>

ステップ 3: vue.config.js ファイルを設定する

Vue CLI3.0 のすべての設定は vue.config.js ファイルにあります。構成が完了すると、スキャフォールディングは自動的に構成を使用してデフォルト構成を上書きします。

プロジェクトに vue.config.js ファイルがない場合は、package.json ファイルと同じディレクトリに新しい vue.config.js ファイルを作成してください。ファイル内の具体的な構成は次のとおりです。

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

ステップ 4: 具体的な使用例

ツールチップの例を作成しました。ツールチップは次の場合に表示されます。マウスをその上に置きます。 ヒント

//template
<template>
  <div>
    <button>Tooltip on left</button>
    <button>Tooltip on top</button>
    <button>Tooltip on bottom</button>
    <button>Tooltip on right</button>
  </div>
</template>


<script>
export default {
  name: "componentsTooltips",
  mounted: function() {
    //在页面加载完毕后初始化 tooltip， 相当于$(function(){ $(&#39;[data-toggle="tooltip"]&#39;).tooltip(); }
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip();
  }
};
</script>

eslintがエラーを報告する場合は、.eslintrc.jsファイルを設定してください。

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

私のテスト結果は次のとおりです:

以上がVue CLI3.0 での jQuery と Bootstrap の使用に関するチュートリアル (詳細な手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。