vue中如何安裝使用jquery
更新時間：2023年04月17日 09:23:21 作者：前端程序猿i
這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue如何安裝使用jquery
首先 npm install jquery --save安裝依賴文件
然后在 自己的vue.config,js文件中 進(jìn)行加載 (要是沒有就自己新加一個，在最外層)
將jquery導(dǎo)入進(jìn)去
module.exports = {
? chainWebpack: config => {
? ? config.plugin('provide').use(webpack.ProvidePlugin, [{
? ? ? $: 'jquery',
? ? ? jquery: 'jquery',
? ? ? jQuery: 'jquery',
? ? ? 'window.jQuery': 'jquery'
? ? }])
? }
}然后在你需要的地方
import $ from 'jquery'
vue使用npm 安裝 jquery、bootstrap
引入jquery
npm install jquery --save-dev
然后在build文件夾下的webpack.base.conf.js文件中添加如下代碼
//module.exports 上面添加
var webpack = require('webpack')
//module.exports 里面添加
plugins:[
? ? new webpack.optimize.CommonsChunkPlugin('common.js'),
? ? new webpack.ProvidePlugin({
? ? ? ? jQuery:'jquery',
? ? ? ? $:'jquery' ? ?
? ? })
]然后進(jìn)行測試， 驗(yàn)證是否引入成功
在需要用到j(luò)query的頁面<script>中引入
import $ from 'jquery'
引入bootstrapvue并安裝bootstrapvue
npm i vue bootstrap-vue bootstrap
然后再項(xiàng)目入口文件main.js中添加以下代碼
import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局
這篇文章主要介紹了Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局，工作中難免遇到需要對頁面布局進(jìn)行拖拽然后改變布局，保存布局，下面文章就圍繞Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
使用Vue動態(tài)生成form表單的實(shí)例代碼
這篇文章主要介紹了使用Vue動態(tài)生成form表單的實(shí)例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要來和大家一起探討一下在Vue3項(xiàng)目中如何處理重復(fù)渲染代碼的問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息
這篇文章主要介紹了vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息的相關(guān)知識,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01
最近在學(xué)習(xí)或工作中遇到,把Vue前端項(xiàng)目打包后,要求可以再次修改請求后端接口的基礎(chǔ)地址,下面這篇文章主要給大家介紹了關(guān)于vue前端靈活改變后端地址的兩種方式,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue3中的watch()的用法和具體作用,通過合理和熟練使用watch()方法，開發(fā)者可以更加高效地完成前端開發(fā)工作，需要的朋友可以參考下2023-04-04
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價值，感興趣的小伙伴們可以參考一2017-10-10
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue插槽slot的簡單理解與用法,結(jié)合實(shí)例形式分析了vue插槽slot的功能、原理、相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03