[]ヴューヴューは、ブートストラップ法を導入しました

方法A:導入(1)main.jsで

npm i jquery

npm i bootstrap

main.jsで

import 'jquery/dist/jquery.min'

import 'bootstrap/dist/css/bootstrap.css'
 

これが有効になり、他の人は負担の少ないオンラインを行います

抜粋:https://blog.csdn.net/it_all/article/details/87189304

 

 

方法2:main.js(2)を導入します

 

導入main.jsでは、ブートストラップを導入するこの方法は、身体の一部の設定CSSスタイルのHTMLに対して有効ではないかもしれません。

1、jQueryのの導入

(、package.jsonである)現在のプロジェクトディレクトリの下に、コマンドを実行し、実行エラー場合jqueryの--save-devのインストールcnpm、実行はjqueryのをインストールcnpm(cnpmとNPMがある)ので、このプロジェクトにインストールのjQueryます。

 

そして、2つの場所で(ビルドファイル内)webpack.base.conf.jsを変更します。

1:加入 

var webpack=require('webpack');

2在module.exports的里面加入


plugins:[

   new webpack.optimize.CommonsChunkPlugin('common.js'),

   new webpack.ProvidePlugin({

        jQuery: "jquery",

        $: "jquery"

   })

]


導入のjqueryの完了で追加最後の輸入$フォーム「jqueryの」main.js

2、導入bootstrap.cssファイル:

修正webpack.base.conf.js

resolve:{

  extensions: ['.js', '.vue', '.json'],

  alias: {

  'vue$': 'vue/dist/vue.esm.js',

  '@': resolve('src'),

  'bootstrap':resolve('src/assets/bootstrap'),

  }

},


main.jsに導入されたインポート

import'bootstrap / JS / bootstrap.min.js'

import'bootstrap / CSS / bootstrap.min.css'

 

 

方法3:index.htmlを導入

この方法は、一般的に、ブートストラップを導入することをお勧めします。

ブートストラップindex.htmlファイルに導入すると、ノートは、このラベルは電話モード、応答不可能に表示される場合があります場合は、追加されていない応答を達成するための<meta>タグを追加しました。

<メタ名= "ビューポート"
      コンテンツ= "幅=デバイス幅、ユーザスケーラブル=なし、初期スケール= 1.0、最大規模= 1.0、最小スケール= 1.0">
<メタHTTP-当量= "X- UA-互換性のある」コンテンツ= "IE =エッジ">


(1)ローカル参照:

ロード・ブートストラップファイルに静的なディレクトリ地方分権化ニーズの初

その後、index.htmlの中に導入され、

ディレクトリ・パスは、あなたが置かれているパスです。

(2)リモート導入:

リモートブートストラップファイルの直接ロード


オリジナルリンクします。https://blog.csdn.net/qq_37055675/article/details/73730736

 

公開された514元の記事 ウォン称賛83 ビュー160 000 +

おすすめ

転載: blog.csdn.net/bandaoyu/article/details/104657279