Vue系列——在vue项目中使用jQuery及其第三方插件
来源:互联网 发布:非农历史数据统计 编辑:程序博客网 时间:2024/06/05 10:29
最近学习Vue.js做一个后台管理系统,采用 vue-cli 脚手架搭建,Element作为UI框架。然后想在项目中自定义滚动条,舍弃浏览器原生滚动条,成熟的现成插件也只找到了jQuery的,所以不得不引入jQuery,下面介绍下jQuery的引入及其第三方插件的引入:
引入jQuery
通过npm安装依赖引入
1、安装
```npm install jquery -S```
2、修改webpack配置文件
build/webpack.base.conf.js
...var webpack = require("webpack") // 1. 确保引入 webpack,后面会用到module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // 2. 定义别名和插件位置 'jquery': 'jquery' } }, plugins: [ // 3. 配置全局使用 jquery new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ]}
手动载入
手动下载jquery 放在static 目录下,如:static/js/jquery.min.js
和npm不同的只是在第二步定义别名和插件位置:
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // 2. 定义别名和插件位置 "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') }
引入jquery第三方插件
可以通过npm安装的插件
这种引入第三方插件的方法和上一节种引入echarts的方法是一样的
手动引入
未完待续。。。
0 4
- Vue系列——在vue项目中使用jQuery及其第三方插件
- Vue系列——在vue项目中使用echarts
- Vue系列——在vue项目中使用echarts
- 在typescript项目中使用第三方插件(以在vue+typescript项目中使用hightcharts为例)
- webpack构建VUE项目使用jquery及其插件 expose-loader
- 在vue项目中使用jquery
- 如何在 Vue.js 中使用第三方库
- 在 Vue.js 中使用任意 JavaScript 第三方库
- 在 Vue.js 中使用任意 JavaScript 第三方库
- 如何在 Vue.js 中使用第三方库
- VUE引入第三方插件
- vue项目中使用jQuery
- 在vue中使用插件
- 在vue中使用jquery
- [译]怎样在Vue.js中使用jquery插件
- 怎样在Vue.js中使用jquery插件
- [译]怎样在Vue.js中使用jquery插件
- 在Vue项目中使用easyScroll滚动条插件
- SpringBoot中使用Redis实现缓存
- 为何安全专家都厌恶 SOA
- httpGet()中拼接请求URL
- 技术管理序列1 -- “不确定性”&风险把控
- Android ContentResolver 内容解析者(解析器)----重新认识Android(11)
- Vue系列——在vue项目中使用jQuery及其第三方插件
- Majority Element
- 在Clion中调试ROS程序
- 关于Segmentation fault (core dumped)几个简单问题
- Java泛型内部原理
- Go语言学习之encoding/json包(The way to go)
- 第3章 深入理解SystemServer
- DB2数据库跟踪死锁事件
- TensorFlow莫烦 placehoder (三)