如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件

niuxiaowei111 發布于2019-08-20 11:19 / 708人閱讀

摘要：使用構建的項目，的配置文件是分散在很多地方的，而我們需要修改的是，修改兩處的代碼在開頭引入，后面的那里需要其他代碼使用，如果是自行下載的如果使用安裝的增加一個其他代碼這樣就可以正確的使用了，比如我要引入，我們在的入口文件開頭加入使用這樣就

使用vue-cli構建的vue項目，webpack的配置文件是分散在很多地方的，而我們需要修改的是build/webpack.base.conf.js，修改兩處的代碼

// 在開頭引入webpack，后面的plugins那里需要
var webpack = require("webpack")
// resolve

module.exports = {
   // 其他代碼...
   resolve: {
      extensions: ["", ".js", ".vue"],
      fallback: [path.join(__dirname, "../node_modules")],
      alias: {
          "src": path.resolve(__dirname, "../src"),
          "assets": path.resolve(__dirname, "../src/assets"),
          "components": path.resolve(__dirname, "../src/components"),

          // webpack 使用 jQuery，如果是自行下載的
          // "jquery": path.resolve(__dirname, "../src/assets/libs/jquery/jquery.min"),
          // 如果使用NPM安裝的jQuery
          "jquery": "jquery" 
      }
   },

   // 增加一個plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代碼...
}

這樣就可以正確的使用jQuery了，比如我要引入Bootstrap，我們在vue的入口js文件src/main.js開頭加入

// 使用Bootstrap
import "./assets/libs/bootstrap/css/bootstrap.min.css"
import "./assets/libs/bootstrap/js/bootstrap.min"

這樣Bootstrap就正確的被引用并構建。
在比如使用toastr組件，只需要在需要的地方import進來，或者全局引入css在需要的地方引用js，然后直接使用

// 使用toastr
import "assets/libs/toastr/toastr.min.css"
import toastr from "assets/libs/toastr/toastr.min"

toastr.success("Hello")

參考:

Managing Jquery plugin dependency in webpack

如何在vue項目里正確地引用jquery和jquery-ui的插件

vue-cli webpack全局引入jquery

首先在package.json里加入，

dependencies:{
 "jquery" : "^2.2.3"
}

然后 nmp install

在webpack.base.conf.js里加入

var webpack = require("webpack")

在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin("common.js"),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

然后一定要重新 run dev

在main.js 引入就ok了

import $ from "jquery"

參考: vue-cli怎么引入jquery

在.vue文件中引入第三方非NPM模塊

var Showbo = require("exports?Showbo!./path/to/showbo.js");

參考: exports-loader

vue-cli引入外部文件

在 webpack.base.conf.js 中添加externals

externals 中 swiper 是鍵，對應的值一定的是插件 swiper.js 所定義的變量 Swiper :

之后再在根目錄下的index.html文件里引入文件：
這樣子就可以在需要用到swiper.js的文件里加入這行代碼：import Swiper from "swiper"，這樣就能正常使用了。
參考: https://segmentfault.com/q/1010000005169531?_ea=806312

GPU云服務器云服務器 jquery-ui 正確地 jquery-ui.js cdn 如何在云vps部署項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80508.html

vue+webpack與jquery插件的那些淺坑

摘要：的引入既然是插件，那么一定是依賴啦，下載接著，在我們的文件跟對象下添加以下代碼的使用這里是一個超級大坑，我在這里跌倒了，費好大勁爬起來。插件到此引入成功都是些小錯誤，但是網上沒有很詳細的代碼，在此希望幫到大家。貼上這個拖拽插件的鏈接 jquery的引入既然是jquery插件，那么一定是依賴JQuery啦，下載jquery npm install --save jquery 接著，在...

hankkin 2019-08-20 18:19 評論0 收藏0
[譯] Laravel-mix 中文文檔

摘要：原文地址鏡像地址中文文檔概覽基本示例是位于頂層的一個簡潔的配置層，在的情況下使用會使操作變的非常簡單。在項目根目錄下并沒有配置文件，默認指向根目錄下的配置文件。否則，它通常與需要刪除的錯誤鎖文件有關。該問題已被在修復。原文地址: Laravel Mix Docs 鏡像地址 : Laravel-mix 3.0 中文文檔概覽基本示例 larave-mix 是位于webpack頂層的一...

K_B_Z 2019-07-01 10:01 評論0 收藏0
在vue項目中jsPlumb制作流程圖，拖拽復制使用 jquery 和 jquery UI

摘要：用做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和，決定使用中的和功能。這是早期用jsPlumb做流程圖走的一個坑，使用jquery來制作流程圖，最近換成了用go.js來制作流程圖后，可以使用go.js中自帶的方法來制作拖拽效果，就不再使用jquery了。用jsPlumb做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一...

marser 2019-08-23 13:53 評論0 收藏0
前端知識點總結——JQ

摘要：前端知識點總結什么是第三方的極簡化的操作的函數庫第三方下載極簡化是操作的終極簡化個方面增刪改查事件綁定動畫效果操作學習還是在學，只不過簡化了函數庫中都是函數，用函數來解決一切問題為什么使用操作的終極簡化解決了大部分瀏覽器兼容性問題凡是讓用的前端知識點總結——JQ 1.什么是jQuery: jQuery: 第三方的極簡化的DOM操作的函數庫第三方: 下載極簡化: 是DOM操作的...

jayzou 2019-08-22 14:59 評論0 收藏0
webpack4搭建Vue開發環境筆記~~持續更新

摘要：項目地址一知識獲取當前文件所在路徑，等同于把一個路徑或路徑片段的序列解析為一個絕對路徑給定的路徑的序列是從右往左被處理的，后面每個被依次解析，直到構造完成一個絕對路徑如果處理完全部給定的片段后還未生成一個絕對路徑，則當前工作目錄會被用上生成項目git地址一、node知識 __dirname: 獲取當前文件所在路徑，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 評論0 收藏0