用vue-cli脚手架工具构建项目成功后，如何引入jquery

最新推荐文章于 2022-04-28 17:05:58 发布
最新推荐文章于 2022-04-28 17:05:58 发布
阅读量219 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44093954/article/details/89295900
版权

用vue-cli脚手架工具构建项目成功后，如何引入jquery
1、首先在package.json里的dependencies加入”jquery” : “^3.2.1”
在这里插入图片描述
2、在终端里输入cnpm install jquery --save-dev 当然用npm 也是可以的（ps: jquery要小写,不然会提示 Please use ‘jquery’ (all lowercase)）
在这里插入图片描述
3、在build文件夹下的webpack.base.conf.js文件中添加：如下图红线部分
在这里插入图片描述
在module.exports里输入：如图代码
在这里插入图片描述
4、在入口文件main.js中输入：如图
在这里插入图片描述
5、在终端输入cnpm run dev （或npm run dev）
在这里插入图片描述
6、现在可以验证是否成功引入了jquery，试一下就ok了
在这里插入图片描述
看看效果！

GOT水獭
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-cli中如何引入jquery
10-23 159
前言 　　虽然vue不推荐直接操作DOM，而且也提供了操作DOM的方式。但是在某些时候还是要用到jquery(囧)，那么如何在使用vue-cli的时候引入jquery呢？ 安装 　　国内镜像 cnpm 安装 cnpm install jquery --save-dev 配置 　　webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的we...
vue脚手架项目中引入jquery
weixin_34246551的博客
03-15 1390
第一步：安装jquery npm i jquery -S 复制代码 找到脚手架build文件夹下的webpack.base.conf.js文件，在最上方添加： var webpack=require('webpack') 复制代码 找到脚手架build文件夹下的webpack.base.conf.js文件，module.exports中加入插件 plugins: [ new w...
VUE项目引入jquery--看后必然功力大增，哈哈哈
jingtian678的博客
01-03 259
既然写项目，那么少不了用jq，那我们就引入进来吧 1、因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery 打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。  dependencies:{ 　　"jquery":"^2.2.1" } 2、然后在命令行中cnpm install  大多人应该都是使用的淘宝镜像，所以...
vue-cli改为简单的JQuery项目
weixin_34148508的博客
08-13 196
以项目中需要index.html、detail.html为例， package.json需要添加的npm包 npm i html-loader -D 在config文件夹新建配置文件，定义需要webpack打包的html，js文件路径 build/base.conf文件 配置完成，npm run dev即可 转载于:h...
在Vue项目里正确地引用jQuery插件
热门推荐
HeliumLau的博客
04-20 3万+
正文1.安装jquery依赖npm install jquery --save2.修改两处配置文件module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], a
详解vue-cli快速构建项目以及引入bootstrap、jq
12-12
vue-cli脚手架工具快速构建项目架构： 。。首先默认了有已经安装了node。。。  npm install -g vue-cli 全局安装vue-cli  vue init webpack cnm 生成项目名为cnm的的项目模板，cnm自定义 npm install 到cnm...
vue-cli脚手架引入弹出层layer插件的几种方法
10-16
在Vue CLI创建的项目中，引入像layer.js这样的外部插件可能会遇到一些挑战，因为Vue通常依赖于模块化的导入方式，而layer.js可能并不直接支持这种导入方式。本文将详细介绍两种在Vue CLI项目中引入layer.js弹出层...
vue-cli+webpack在生成的项目中使用bootstrap实例代码
12-12
那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目（名字任意） vue init webpack vuestrap 在出现的各提示选项...
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
11-27
本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细...
vue引入JQ的方法
alifj9932的博客
03-18 801
在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ，可用以下方法： 1.首先在package.json里的dependencies加入"jquery" : "^3.2.1"， 2.在终端里输入npm install jquery --save-dev当然用 淘宝镜像cnpm也是可以的 注意：jquery 一定要小写 不然会提...
vue2.0脚手架中引入jquery
blue_5_3的博客
10-28 1217
第一步：安装jquery npm install jquery --save 检查是否安装成功 第二步：修改webpack配置文件 文件目录及名称：build/webpack.base.conf.js 在文件开头添加 const webpack = require('webpack') 然后在该文件后面的module.exports里面的alias中添加 'jquery':'jquery' 最后在module.exp...
脚手架引入jq
weixin_30329623的博客
04-17 337
package.json文件中 npm install webpack.base.conf.js中 main.js 中引入import $ from 'jquery' npm run dev重启 转载于:https://www.cnblogs.com/fanningwen/p/10724150.html
Vue Cli 中使用 jQuery
weixin_45257087的博客
04-28 2545
Vue Cli 中使用 jQuery 方式一： 1、安装 jquery npm install jquery 2、在想要使用 jQuery 的文件里面引入即可： import $ from 'jquery 注意：如果要在 main.js 文件里面引入 jQuery ，则需要这样加： import $ from 'jquery' window.$ = $ //原因：设置变量但未使用，编辑器会报错。 不要这样添加： 【import $ from ‘jquery’ Vue.use（$）】，否则出现
vue-cli4最新版中怎么引入jQuery
weixin_45000814的博客
06-12 5586
我们要在vue-cli4最新版中引入jquery主要有以下三个步骤 1.安装jquery 2. 添加vue.config.js文件 3. 引入jquery 首先第一步先安装jQuery npm install jquery --save 或者 npm i jquery --save 第二步添加vue.config.js文件 因为最新版的vue-cli脚手架创建的项目文件夹中没有build文件夹，同时也没有webpack.base.config.js配置文件，但是我们可以在项目根文件目录下创建一个v
vue-cli脚手架项目通过VS Code直接运行及build，无需敲打命令
Stavin Li的博客
08-16 6556
1. 点击 调试，选择添加配置 2.选择环境Node.js 3.编辑文件launch.json，替换为一下内容 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version&am
使用Vue-cli脚手架工具构建Vue项目
sisi_chen的博客
09-11 242
1.首先安装node.js，到node.js官网进行下载 可参照：https://www.runoob.com/nodejs/nodejs-install-setup.html 2.搭建vue项目，选择文件夹打开命令行 //全局安装 vue-cli $ npm install -g vue-cli //创建一个基于“webpack”模板,名为myDemo的新项目 $ vue init we...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
weixin_34128501的博客
01-06 650
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli vue/cli 3.x 已经发布，如果使用 3.x 构建项目，请参考《Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目》 一、 安装 node.js 首先需要安装node环...
webpack4.0搭建单页/多页脚手架：JQuery, React, Vue, TypeScript
"本文主要介绍如何使用webpack 4.0构建单页和多页应用的脚手架，涉及jQuery、React、Vue和TypeScript。webpack是一个静态模块打包工具，通过构建依赖图并生成bundle来处理现代JavaScript应用。在webpack 4.0中，可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值