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" 

　　　　 }) 

　　]

3)

エントリー ファイル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 のモジュール性の実装方法

スライディング ローディング データの共有例の JS の簡単な実装

以上がvue-cli がブートストラップ ツールを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。