亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在vue3中安裝使用bootstrap過(guò)程

 更新時(shí)間：2023年10月26日 09:28:29   作者：小楊闖關(guān)之情迷代碼  
這篇文章主要介紹了在vue3中安裝使用bootstrap過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、安裝

在 vue 項(xiàng)目中引入 bootstrap，首先要引入依賴(lài)：jQuery 和 popper

筆者這里采用cnpm安裝：

cnpm install jquery --save-dev
cnpm install @popperjs/core --save-dev
cnpm install bootstrap --save-dev

安裝成功后：

	// package.json
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@popperjs/core": "^2.11.6",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "bootstrap": "^5.2.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },

二、引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

注意： 只有這兩行代碼 ，不需要全局注冊(cè) $ 等語(yǔ)句

三、配置 jQuery

在 vue.config.js 中，寫(xiě)如下代碼（如果沒(méi)有 vue.config.js ，則在 package.json 同級(jí)目錄下手動(dòng)新建）

// defineConfig  這里是vue3 的默認(rèn)代碼
const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack")

module.exports = defineConfig({
  	// 配置插件參數(shù)
	configureWebpack: {
		plugins: [
			// 配置 jQuery 插件的參數(shù)
			new webpack.ProvidePlugin({
				$: 'jquery',
				jQuery: 'jquery',
				'window.jQuery': 'jquery',
				Popper: ['popper.js', 'default']
			})
		]
	}
})

四、使用插件

 <div class="hello">
      <button type="button" class="btn btn-primary">Primary</button>
  </div>

在這里插入圖片描述

成功使用！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論