@vue/cli 3.x+引入jQuery

最新推荐文章于 2023-07-11 14:31:34 发布
最新推荐文章于 2023-07-11 14:31:34 发布
阅读量491 收藏
点赞数
分类专栏： 大前端和跨平台技术 文章标签： vue jquery webpack
请明确标注出处
本文链接：https://blog.csdn.net/qq_33583069/article/details/114349624
版权
本文介绍了在Vue CLI 3.x及以上版本的项目中如何引入jQuery。首先，确保package.json中已添加jQuery依赖，然后在.eslintrc.js配置文件的env部分启用jQuery支持。接着，在main.js文件中正确引入jQuery，并在vue.config.js中进行相关配置以确保Webpack正确处理jQuery。
摘要由CSDN通过智能技术生成 
npm install jquery --save  //安装jquery

一般安装成功后在package.json文件内的dependencies项中会有"jquery": “^1.12.4”，如果没有可以手动添加。
打开.eslintrc.js 文件(如果有的话），找到env ，在里面 添加 jquery:true，默认应该是只有node:true，如果都没有，那就加上env呗

main.js引入

import $ from 'jquery'

vue.config.js

const webpack = require
了解本专栏 订阅专栏 解锁全文 超级会员免费看
真·skysys
关注
专栏目录
订阅专栏
vue基础学习复习笔记(一)，包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）
weixin_60896381的博客
07-10 1162
本文包含 vue基础 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念） 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正.........
在vue-cli中使用jquery
darabiuz的博客
01-08 487
1.导入jquery 输入命令cnpm install jquery --save 查看package.json是否安装成功 2.修改vue.config.js 添加以下代码语句 const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "j
vue-cli3 引入jquery
weixin_39975379的博客
02-26 8346
本篇博客转载于https://juejin.im/entry/5b446efde51d45194e0b8985，写在这里只是用于记录。 vue-cli3的所有的配置项都在vue.config.js的文件中进行配置，so步骤搞起来： 第一步：安装jquery 命令行工具，进入项目文件夹，执行：  npm install jquery --save 第二步:确定安装成功 提示安装成功后，在p...
vue-cli3项目中引入jquery
ʚ菲菲的博客ɞ
06-18 362
1、安装jquery npm install jquery --save 2、或则在package.json中指定版本号，然后运行npm install命令
vue/cli 3 引入 使用jQuery
weixin_48771583的博客
01-04 881
注意这里配置的是vue-cli3.0引入jquery的方法，不是vue-cli2.0的配置方法 一、安装jquery npm install jquery --save 二、一般安装成功后在package.json文件内的dependencies项中会有"jquery": “^1.12.4”，如果没有可以手动添加。需要注意的是，现在我们都是直接使用模板创建项目的，所以第一步是可以省略的(不要说我第二步才说第一步可以省略，这是你自己的问题，看任何东西都是先看了再去做的)。 三、打开.eslintrc.j
vue cli3 引入jquery的方法
qilv1020的博客
04-24 197
1.在终端运行（运行之后package.json的开发依赖（devDependencies）中会出现 "jquery": "^3.6.0",） npm install jquery --save-dev 2.在vue.config.js中第一行输入（这个文件需要自己在项目根目录下创建的） const webpack = require('webpack') 3.在 module.exports 的 plugins 里面输入 new webpack.ProvidePlugin({
Vue-cli4.x中Jquery的引入及使用
qq_43620423的博客
08-02 1009
一、安装Jquery 进入到项目所在目录之后使用npm进行安装， npm install jquery --save 安装之后就会发现在package.json中已经引入了jquery依赖 二、进行配置 由于是Vue-cli4.x，所以在文件目录中并没有build文件夹，所以需要手动在根目录新建vue.config.js文件来进行配置 const webpack = require('webpack') module.exports = { //引入jquery chainWebpa
nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)
01-20
标题中的“nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)”指的是使用Node.js的Express框架与Vue.js的CLI工具来创建一个支持跨域的前后端分离应用。这种模式在现代Web开发中非常常见，能够使前端...
在vue-cli项目中使用bootstrap的方法示例
12-10
在Vue CLI创建的项目中集成Bootstrap，需要遵循一系列步骤，以确保Bootstrap的样式和JavaScript功能能够在Vue组件中正常工作。以下是一个详细的指南： 首先，为了使用Bootstrap，你需要安装必要的依赖。Bootstrap...
VUE-cli中使用jquery
HanXiaoXi_yeal的博客
05-24 324
步骤： 全局安装： npm install jquery --save 组件内使用方法： 直接引用即可 import $ from 'jquery' 全局用法： main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ = $; 更改vue.config.js const webpack = require('webpack') configureWebpack: { plugins: [ new webpack
vue-cli中使用jquery
qq_39905409的博客
12-16 185
vue-cli3.x的目录结构很简单，去掉了2.x中的build目录和config目录，只有一个vue.config.js文件用于项目配置。 1、首先引入jquery npm install --save jquery 2、添加如下配置到vue.config.js const webpack = require('webpack') module.exports = { configu...
vue-cli项目中使用jquery
丽丽大神ing的博客
08-04 3109
第一种：绝对路径在index.html中直接引入，全局可用 提示：在index.html中引入的文件必须放在static下面 1.在index.html中引入jquery.js <script src="./static/jquery.js"></script> 注意：如果是在index.html引入的是自己写的全局的js,写在window.onload=f...
vue3中引入jquery
坚持原创
04-02 6509
cnpm i --save jquery@1.* 在跟目录下创建vue.config.js文件，内容如下： const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ ...
Vue3引入JQuery
java_for的博客
05-06 3057
1.npm引入JQuery： npm install --save jquery@1.* 2.npm引入社区提供的申明文件： npm install @types/jquery --save-dev 3.vue.config.js配置插件： const webpack=require('webpack'); configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jque.
Vue3引入jquery
qq_42724333的博客
12-05 949
vue项目中引入jquery
vue3 引入 jquery
solitude1128的博客
07-11 2646
vue3引入jquery
vue-cli 3.0引入jquery
weixin_34235135的博客
05-19 304
2019独角兽企业重金招聘Python工程师标准>>> ...
VUE-cli3中引入jquery
Anyz Notebook
06-09 670
项目需要在vue-cli3引入jquery库 1、安装jQuery npm install jquery --save 安装后在package.json会有jQuery的版本信息 2、修改 .eslintrc.js下env的值，一般会有node：true，需要把jQuery导入 3、修改vue.config.js的plugins配置 const webpack = require('webpack') 在module.exports中修改或者添加configureWebpack一项
使用vue.js+jquery的ajax从goods.json中获取商品, 并渲染到界面上。
最新发布
09-13
使用Vue.js结合jQuery的Ajax技术，可以从`goods.json`文件中动态加载数据并将其渲染到网页上，通常可以按照以下步骤操作： 1. **安装依赖**: 首先确保你已经在项目中安装了Vue和jQuery。如果没有，可以分别通过npm或yarn安装： ```bash npm install vue @vue/cli-plugin-jquery jquery --save ``` 2. **创建Vue实例**: 在HTML模板中引入Vue.js库，并在全局范围内创建Vue实例： ```html <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="@vue/cli-plugin-jquery/plugin.js"></script> <div id="app"> <!-- 商品列表将在这里显示 --> </div> ``` 3. **定义数据和组件**: 在Vue实例的data选项中定义一个数组，用于存储从JSON中获取的商品数据。创建一个简单的组件来展示商品： ```js // main.js (入口文件) new Vue({ el: '#app', data() { return { goods: [] } }, created() { this.fetchGoods(); }, methods: { fetchGoods() { $.getJSON('goods.json', (response) => { this.goods = response; // 或者直接设置响应的数据到this.goods this.$set(this, 'goods', response); }); } } }); ``` 4. **模板部分**: 在`<div id="app">`标签内，使用v-for指令遍历`goods`数组，渲染每个商品： ```html <template> <ul> <li v-for="(item, index) in goods" :key="index"> {{ item.name }} - {{ item.price }} </li> </ul> </template> ``` 5. **JSON文件示例** (`goods.json`): ```json [ {"name": "商品A", "price": "价格A"}, {"name": "商品B", "price": "价格B"} ] ``` 现在，当你刷新页面或者首次访问时，Vue会发起GET请求到`goods.json`，然后将接收到的数据渲染到对应的HTML元素中。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真·skysys

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值