1. 程式人生 > >如何在Vue專案中正確的引入JQuery

如何在Vue專案中正確的引入JQuery

操作方法

  1. 安裝jquery依賴

    npm install jquery --save
    
  2. 修改兩處配置檔案(測試vue版本為2.5)

        // 整體位置
        module.exports = {
           // 其他程式碼...
           resolve: {
             extensions: ['.js', '.vue', '.json'],
             alias: {
               'vue$': 'vue/dist/vue.esm.js',
               '@': resolve('src'
), } }, // 增加一個plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], // 其他程式碼... }

3.直接在需要的頁面引用

參考文獻

相關推薦

如何在Vue專案正確引入JQuery

操作方法 安裝jquery依賴 npm install jquery --save 修改兩處配置檔案(測試vue版本為2.5) // 整體位置 m

vue-cli3如何在vue.config.js正確引入jQuery

const webpack = require('webpack') const path = require('path'); function resolve(dir) { return

如何Vue元件完美引入jQuery

如果想在普通的HTML頁面引入jQuer庫的話,直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue元件中使用jQuery庫的話,使用這樣的方式就不行了,需要使用以下方法 一、安裝jQuery依賴 在使用jQ

vue專案stylus引入時報錯解決

我在引入時遇到下面的問題編譯報錯: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules

Vue專案引入JQuery-ui

  安裝:  npm install jquery-ui-dist -S 引入: import 'jquery-ui-dist/jquery-ui'   更改配置檔案: 1、新增jquery:'jquery'  reso

Vue專案引入JQuery

錯誤提示:$ is not defined   使用步驟: 1、安裝jquery npm install jquery --save-dev 2、配置webpack 在專案根目錄下的build目錄下找到webpack.base.conf.js檔案,在開頭使

vue項目正確引用jquery

mage highlight spa script 文件 style nbsp scrip 安裝 1.安裝jquery依賴 npm install jquery --save    2.修改兩處配置文件 a.引入webpack b.配置jquery插件 3.在頁

把圖片公式轉化為文字內容。vue專案引入MathJax.js

這是個圖片的公式,有img標籤引入。 我們想要轉成下面的效果:   在vue專案中引入MathJax.js 首先在index.html頁面  <script type="text/javascript" src="https://cdn.ma

Vue專案Element-Ui按需引入

重點:不管是全部引入還是按需引入,都要安裝element-ui的。   npm i element-ui -D 完事後可以在package.json的dev標籤下看到element。 npm i element-ui -D (解釋一下:npm是node包管理器,i是insta

vue-cli構建的專案如何引入json資料檔案?

vue-cli構建的專案中如何引入json資料檔案? 方法1: 1、將json資料檔案放入到static資料夾中,並將static資料夾與專案的index.html檔案置於同一級 2、然後使用axios呼叫該json檔案,呼叫地址為自己電腦ip、埠 + json資料檔案路徑

vue專案引入高德地圖

1 在index.html檔案中引入js檔案<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key="></script> 2 334 3  

Vue專案使用element-ui,並引入第三方圖示庫iconfont

1、安裝 npm install element-ui --save-dev 2、在main.js檔案中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.c

Vue專案引入iconfont 圖示庫 和 圖示顯示成小方塊的問題解決

這兩天弄了個vue的小demo ,引入了iconfont 的圖示,沒想到是噩耗的開始,一直顯示的是小方塊,一步步排查踩坑把問題解決。 首先看看官方對專案引入iconfont 的介紹。 unicode引用 unicode是字型在網頁端最原始的應用方式,特點是: 相容性最

Vue專案路徑正確但是引入組建報錯問題

最近遇到的,寫了一個元件,在其他的元件裡引用的時候報錯:This dependency was not found,找不到一開始以為是簡單的路徑問題,結果檢查發現都沒有問題,而且怎麼修改編譯也不可以,本來想第二天繼續解決結果莫名其妙好了,所以簡單猜測了一下原因和解決辦法測試有

Vue專案使用v-bind引入圖片路徑出現圖片未找到的問題

問題 由於專案圖片在打包後圖片名會跟上一串hash值,並且相對路徑會改變。所以: <img src="../../assets/logo.png"/> 這麼寫是可以的,因為打包的時

vue專案引入elementUI元件

1.安裝 elementUI npm i element-ui -S 2.引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk

Vue專案使用npm安裝bootstrap以及jquery

經過我好多次的查詢和實驗,總結了一下在vue專案中使用bootstrap框架,npm安裝注意. bootstrap中js外掛依賴於jquery,所以在這之前必須安裝jquery。 jquery安裝 1、在package.json中新增一行程式碼:“jq

vue專案icon圖示的完美引入

第一步: 進入阿里向量圖示庫並登入 地址:https://www.iconfont.cn 第二步: 選擇專案需要的圖示新增到庫 第三步: 選完之後點選右上角的購物車,開啟後點擊新增到專案,沒有就自己建一個(按鈕都在同一個頁面) 第四步: 新增到專案後,在彈出的頁面修改專案防止icon命名

vue 專案ivew按需引入

官方文件中介紹了iview的按需引入: 按需引用 # 藉助外掛 babel-plugin-import可以實現按需載入元件,減少檔案體積。首先安裝,並在檔案 .babelrc 中配置: npm install babel-plugin-import -

vue專案,元件裡單獨引入對應css

我的css檔案,放在src資料夾下的assets資料夾下css內。 根據你具體的檔案路徑配置,引入在當前頁面路徑下的css (不是在main.js裡引入,main.js引入是公共css與js,之前文章有在main.js引入步驟)