vue-cli プロジェクトでブートストラップを使用する手順の詳細な説明

今回は、vue-cli プロジェクトでブートストラップを使用する手順について詳しく説明します。vue-cli プロジェクトでブートストラップを使用する際の注意点は次のとおりです。

【関連動画おすすめ: ブートストラップチュートリアル】

プラグインのインストール

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

webpack.base.conf.jsの設定

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

追加

import $ from 'jquery'
import 'bootstrap'

jqueryのテスト

//在vue文件中添加测试代码
<script>
$(function () {
 alert('234')
})
export default {
 name: 'App'
}
</script>

ブートストラップのテスト

そうです

信じますこの記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS ユーザーの現在位置を取得する

AngularJs が XSS 攻撃を防ぐ方法

以上がvue-cli プロジェクトでブートストラップを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。