vue-cli がブートストラップ ツールを導入する方法

この記事では、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) 以下をモジュールに追加します。 .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）Assetsファイルディレクトリにさまざまなブートストラップファイルをコピーします。ブートストラップ ボタンのドロップダウンでカスタム選択を作成

ブートストラップ応答ツールの使用方法を共有

ブートストラップ テーブルの検索ボックスとクエリ機能の詳細な説明

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