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

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

韦小宝
韦小宝オリジナル
2018-01-11 10:12:442087ブラウズ

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。