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)文章
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
在vue-cli腳手架中配置一個vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個vue-router前端路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12
vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件詳細(xì)教程
在項(xiàng)目開發(fā)中需要使用vue實(shí)現(xiàn)tab頁簽切換功能,所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文通過實(shí)例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
在vue項(xiàng)目中，搜索功能是我們經(jīng)常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實(shí)現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助2023-03-03