ホームページ > ウェブフロントエンド > jsチュートリアル > vue-cli がブートストラップ ツールを導入する方法

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

小云云
リリース: 2018-01-09 11:34:02
オリジナル
1278 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート