Vueプロジェクトにブートストラップを導入する方法

vue bootstrap をプロジェクトに導入しますか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: "ブートストラップ チュートリアル"

ブートストラップを Vue プロジェクトに導入するには、まず 2 つの依存関係を導入する必要があります: jQueryとポッパー

最初のステップ、インストール

1、npmインストール

インストールコマンドは次のとおりです:

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

最新バージョンがデフォルトでインストールされますブートストラップ V3 バージョン (依存関係が少ない) をインストールする場合は、次の手順を実行できます:

cnpm install bootstrap@3 --save-dev

または、ビジュアル ウィンドウ インストール

2. ビジュアル ウィンドウ インストール

1.検索: プロジェクト> 依存関係> 依存関係のインストール> 依存関係の実行
jquery と Popper.js

#2. 検索: プロジェクト> 依存関係> 依存関係のインストール> 開発依存関係

検索してブートストラップをインストール

2 番目のステップ、概要

main.js ページで次のコードを記述します

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'

// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 全局注册 $
Vue.prototype.$ = $

3 番目のステップ、jQuery を構成します

vue.config.js で、以下のコードを書きます（vue.config.jsがない場合はpackage.jsonと同じ階層のディレクトリに手動で作成してください）

const webpack = require("webpack")
module.exports = {
    // 配置插件参数
    configureWebpack: {
        plugins: [
            // 配置 jQuery 插件的参数
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            })
        ]
    }
}

これで使えるようになります

Test bootstrap

<template>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>

プログラミング関連の知識については、

プログラミング教育をご覧ください! ！

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