首页 > 其他分享 >vue 项目引入 jquery

vue 项目引入 jquery

时间:2022-10-13 15:45:43浏览次数:83  
标签:jquery npm vue 文件 webpack 添加 install 引入

一、引入 jquery

1. 方式一

默认会安装最新版本 jquery

npm install jquery

 

2. 方式二

指定版本

npm install [email protected]

 

3. 方式三

在 package.json 文件中 dependencies 添加 jquery 配置,以及指定版本

"jquery": "^3.6.0"

 

在 package.json 文件中加好配置后,执行:

npm install

 

注:上面两种方法都会自动在这里添加配置。

 

二、修改配置

1. 在 webpack.base.conf.js 文件中,文件上方添加如下内容:

const webpack = require('webpack')

 

2. 其次,在 module.exports 中添加如下配置:

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"    
    })
],

 

 

 

3. 在 main.js 文件中引入 jquery

import $ from 'jquery'

 

注:本文参考

 

标签:jquery,npm,vue,文件,webpack,添加,install,引入
From: https://www.cnblogs.com/zhousjcn/p/16788328.html

相关文章

  • 富文本 vue-quill-editor 用法
    1.下载npminstallvue-quill-editor--save2.在main.js中引入----全局引入//引入富文本importquillEditorfrom'vue-quill-editor'//引入样式import'quill/d......
  • jQuery事件总结
    jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。click事件触发需要以下几点:click事件其实是由mousedown与mouseup......
  • Vite + Vue3 + Pinia + es6 + TypeScript 搭建项目
    vite中文参考文档:​​https://vitejs.cn/guide/#scaffolding-your-first-vite-project​​执行 npminitvite@latest步骤如下图:下载依赖npmi 启动项目:npmrundev......
  • Vue3动态路由
    1、引入router: import{useRouter}from'vue-router'2、定义letrouter=useRouter();3、动态添加路由router.addRoute({name:"users",path:'/User/users'......
  • 《安富莱嵌入式周报》第282期:CMSIS-DSP手册引入计算图,树莓派单片机RP2040超频到1GHz,CO
    ​ 视频版:​​https://www.bilibili.com/video/BV1DV4y1u7Em​​ 1、CMSIS-DSP软件包升级至V1.12,添加更多f64双精度API,并首次引入计算图​​https://github.com/ARM-softw......
  • 《安富莱嵌入式周报》第282期:CMSIS-DSP手册引入计算图,树莓派单片机RP2040超频到1GHz,CO
    ​ 视频版:​​https://www.bilibili.com/video/BV1DV4y1u7Em​​ 1、CMSIS-DSP软件包升级至V1.12,添加更多f64双精度API,并首次引入计算图​​https://github.com/ARM-softw......
  • vue-8 组件
    importVuefrom'vue'//全局部引入importElementUIfrom'element-ui'////按需引入import{Row,Button}from'element-ui'import'element-ui/lib/theme-chalk/i......
  • jquery使用案例
     jq实现点击一级菜单div,有且只有它下面的二级菜单进行伸缩展开访问时如下:   ......
  • vue-directive__自定义指令
    vue-directive__自定义指令1.复制/***v-copy*复制某个值至剪贴板*接收参数:string类型/Ref<string>类型/Reactive<string>类型*/importtype{Directive,Direct......
  • Vue动态组件 表格
    Vue组件数据源//这里是HTML内容这里通过下面的引入框架结构把数据源传到框架中还有匹配项<Mytable:configList="configList":configData="configData"></Mytable>......