vue-cli webpack 全局引用jquery
2024-10-15 07:43:09
一、初始化项目
首先,执行vue init webpack
F:\ZhaoblTFS\Zeroes\Document\代码示例\vue-cli-webpack-jquery>vue init webpack ? Generate project in current directory? Yes
? Project name vue-cli-webpack-jquery
? Project description A Vue.js project
? Author zhaobaolong <zbl131@.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No vue-cli · Generated "vue-cli-webpack-jquery". To get started: npm install
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
然后,执行npm install
最后,执行npm run dev 打开浏览器 http://localhost:8080
在浏览器控制台输入$
停止站点。
二、安装expose-loader和jquery
a.依次执行npm i expose-loader --save 和 npm i jquery --save,执行完会在package.json文件中增加两个依赖
b.修改webpack.base.conf.js文件,在module.rules 最后增加
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
c.修改main.js文件,增加var jquery = require('jquery');
修改后全部保存。
三、验证jquery
执行npm run dev,打开http://localhost:8080,控制台输入$和window.jQuery
webpack用的是2.7.0版本,还有种方式是ProvidePlugin。
参考链接
1.https://github.com/webpack-contrib/expose-loader
2. http://blog.csdn.net/lizixiang1993/article/details/52193724
3. https://webpack.js.org/guides/shimming/
4. http://www.cnblogs.com/pandabunny/p/5417938.html
5. http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/
6. https://segmentfault.com/a/1190000007020623 这个很全面
最新文章
- Thrift架构~动态Thrift插件的注入
- [Python模式]策略模式
- 基于NPOI导出Excel
- log4j打印参数
- 用分治法实现大数乘法,加法,减法(java实现)
- Oracle varchar 字段排序问题
- pm2安装及常用命令
- iphone6闪存检测
- Android 桌面生成快捷方式
- XML_PULL解析
- 5G关键技术研究方向
- 讨论MMU
- nodejs模板加载的问题
- itunes 备份导致C盘空间不足问题解决办法
- java笔记 -- GregorianCalendar和DateFormateSymbols 类方法
- Hibernate学习(四)———— 双向多对多映射关系
- Java框架之Struts2(三)
- OneAlert 携手 BearyChat(倍洽)快速构建 IT 运维 on-call 机制
- datagrid---columns列
- 会话(Session)与cookies