jquery在vue脚手架中的使用方式
来源:互联网 发布:阿里巴巴淘宝城地址 编辑:程序博客网 时间:2024/05/17 09:27
1:在各个vue文件中使用
<script>import '../assets/js/jquery-1.10.2.min.js'export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, },}$(document).ready(function(){ $('.span123').click(function(){ alert('123') })})</script>
这种方式不会影响原来VUE文件中的$的使用,完全可行;但是需要每个vue文件都引入一遍;
2:在入口文件app.vue中整体引入,不会报错
3:在main.js中整体引入,
4:在index.html中整体引入
以上3中方法经过亲测,不会报错,但是VUE文件中的JS也不会执行,不可行;
下面的方法经过亲测,完全可行;
通过npm安装依赖引入
1:通过npm安装依赖引入
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: [ .. ], alias: { ... // 2. 定义别名和插件位置 'jquery': 'jquery' } }, plugins: [ // 3. 配置全局使用 jquery new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ]}
手动载入
手动下载jquery 放在static 目录下,如:static/js/jquery.min.js
alias: { ... // 2. 定义别名和插件位置 "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') },plugins: [ // 3. 配置全局使用 jquery new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ]
阅读全文
0 0
- jquery在vue脚手架中的使用方式
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- 使用vue-cli脚手架
- vue脚手架安装和使用
- vue脚手架使用及问题
- 使用vue-cli脚手架搭建vue项目
- Vue之使用脚手架搭建Vue工程
- 在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法
- vue-cli脚手架 webpack中引入jquery
- Vue.js学习---脚手架方式搭建vue项目
- 在vue里使用 jquery
- 在vue中使用jquery
- 使用vue-cli脚手架搭建项目
- 如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
- vue-router 在模块化 vue中的使用
- 不全局安装vue-cli使用vue脚手架
- 使用vue脚手架工具搭建vue-webpack项目
- 04:填空:类型转换1
- jdk和jre的区别
- ReclyView详解
- VUE 引入JQ
- B数 /B-数 / B+数
- jquery在vue脚手架中的使用方式
- 二分查找
- C++构造函数和编译器自动生成代码的陷阱
- 数据库事务中的隔离级别和锁
- 小白文科生眼中的Linux系统
- POJ2004-Mix and Build
- DLL编程一一对应头文件约定
- LeetCode Weekly Contest 47解题思路
- |与||,&与&&区别