Vue cli3でブートストラップを導入する方法の紹介

この記事では、Vue cli3 に bootstrap を導入する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: vue プロジェクトの「vue.js チュートリアル」、「bootstrap チュートリアル」

ブートストラップを導入するには、まず jQuery と Popper の 2 つの依存関係を導入する必要があります。

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

1、npm インストール

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

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

最新バージョンはデフォルトでインストールされます。ブートストラップの V3 バージョンをインストールしたい場合は (less に依存します)、次のことができます:

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']
            })
        ]
    }
}

これを使用できます

テスト ブートストラップ

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

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

プログラミング教育##を参照してください。 #! ！

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