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

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

韦小宝
リリース: 2018-01-11 10:12:44
オリジナル
2120 人が閲覧しました

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

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