成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件

niuxiaowei111 / 737人閱讀

摘要：使用構(gòu)建的項(xiàng)目，的配置文件是分散在很多地方的，而我們需要修改的是，修改兩處的代碼在開頭引入，后面的那里需要其他代碼使用，如果是自行下載的如果使用安裝的增加一個(gè)其他代碼這樣就可以正確的使用了，比如我要引入，我們?cè)诘娜肟谖募_頭加入使用這樣就

使用vue-cli構(gòu)建的vue項(xiàng)目，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" 
      }
   },

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

   // 其他代碼...
}

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

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

這樣Bootstrap就正確的被引用并構(gòu)建。
在比如使用toastr組件，只需要在需要的地方import進(jìn)來(lái)，或者全局引入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項(xiàng)目里正確地引用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 是鍵，對(duì)應(yīng)的值一定的是插件 swiper.js 所定義的變量 Swiper :


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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80508.html

相關(guān)文章

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

    摘要：的引入既然是插件，那么一定是依賴?yán)?，下載接著，在我們的文件跟對(duì)象下添加以下代碼的使用這里是一個(gè)超級(jí)大坑，我在這里跌倒了，費(fèi)好大勁爬起來(lái)。插件到此引入成功都是些小錯(cuò)誤，但是網(wǎng)上沒(méi)有很詳細(xì)的代碼，在此希望幫到大家。貼上這個(gè)拖拽插件的鏈接 jquery的引入 既然是jquery插件，那么一定是依賴JQuery啦，下載jquery npm install --save jquery 接著，在...

    hankkin 評(píng)論0 收藏0

  • [譯] Laravel-mix 中文文檔

    摘要：原文地址鏡像地址中文文檔概覽基本示例是位于頂層的一個(gè)簡(jiǎn)潔的配置層，在的情況下使用會(huì)使操作變的非常簡(jiǎn)單。在項(xiàng)目根目錄下并沒(méi)有配置文件，默認(rèn)指向根目錄下的配置文件。否則，它通常與需要?jiǎng)h除的錯(cuò)誤鎖文件有關(guān)。該問(wèn)題已被在修復(fù)。 原文地址: Laravel Mix Docs 鏡像地址 : Laravel-mix 3.0 中文文檔 概覽 基本示例 larave-mix 是位于webpack頂層的一...

    K_B_Z 評(píng)論0 收藏0

  • 在vue項(xiàng)目中jsPlumb制作流程圖，拖拽復(fù)制使用 jquery 和 jquery UI

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

    marser 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——JQ

    摘要：前端知識(shí)點(diǎn)總結(jié)什么是第三方的極簡(jiǎn)化的操作的函數(shù)庫(kù)第三方下載極簡(jiǎn)化是操作的終極簡(jiǎn)化個(gè)方面增刪改查事件綁定動(dòng)畫效果操作學(xué)習(xí)還是在學(xué)，只不過(guò)簡(jiǎn)化了函數(shù)庫(kù)中都是函數(shù)，用函數(shù)來(lái)解決一切問(wèn)題為什么使用操作的終極簡(jiǎn)化解決了大部分瀏覽器兼容性問(wèn)題凡是讓用的 前端知識(shí)點(diǎn)總結(jié)——JQ 1.什么是jQuery: jQuery: 第三方的極簡(jiǎn)化的DOM操作的函數(shù)庫(kù) 第三方: 下載 極簡(jiǎn)化: 是DOM操作的...

    jayzou 評(píng)論0 收藏0

  • webpack4搭建Vue開發(fā)環(huán)境筆記~~持續(xù)更新

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

    hankkin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<