ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > Vueプロジェクトにブートストラップを導入する方法

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

青灯夜游
リリース: 2020-12-10 17:58:43
転載
6062 人が閲覧しました

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

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

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

ブートストラップを 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 サイトの他の関連記事を参照してください。

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