ホームページ > 記事 > ウェブフロントエンド > vue-cli がブートストラップ ツールを導入する方法
この記事では主に、vue-cli が bootstrap ツールを導入する方法を紹介します。編集者がそれを参考にさせていただきます。 jsに興味のある方はぜひエディタをフォローしてご覧ください
この記事ではvue-cliでブートストラップツールを導入する方法を紹介し、みんなで共有したり、自分用のメモを残したりします。
以下の操作は、ノード環境の通常のインストールに基づいています。
1. jq を導入します:
npm コンソールでプロジェクト ディレクトリを入力し、コマンド npm install jquery --save-dev を入力します (npm を cnpm に置き換えることをお勧めします。国内では cnpm のダウンロードが速くなります)環境)。
2. ビルドディレクトリ内の webpack.base.conf.js設定ファイルを変更します:
1) webpackオブジェクトを追加します : var webpack=require('webpack');
2 ) 次の設定を module.exports に追加します:plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ]
エントリー ファイルmain.js を追加します: import jquery from 'jquery'
3. ブートストラップを導入します:
1) 変更します。 webpack.base .conf.js ファイル:alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': path.resolve(dirname, '../src/assets'), 'jquery': "jquery/src/jquery" }2) エントリ ファイル main.js に
import './assets/css/bootstrap.min.css' import './assets/js/bootstrap.min'を追加します。 3) アセット ファイル ディレクトリにさまざまなブートストラップ ファイルをコピーします:
上記がこの記事の全内容です、お役に立てば幸いです 皆様の学習が役に立ちましたので、皆様も PHP 中国語 Web サイトをサポートしていただければ幸いです。
関連する推奨事項:JS 関数のスロットルと手ぶれ補正の例の詳細な説明
スライディング ローディング データの共有例の JS の簡単な実装
以上がvue-cli がブートストラップ ツールを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。