在vue中配置jQuery环境
vue以及jQuery版本使用的都既是当前最新的版本一、如何配置?两种方法进行配置。1.在main.js中进行配置2.修改配置文件vue.config.js进行配置(个人推荐第二种,配置完成即可全局使用,第一种有时候还会报错)二、配置步骤1.使用第一种main.js方法引入代码如下(示例):import $ from "jquery"Vue.use($);main.js完整代码如下import V
·
vue以及jQuery版本
使用的都既是当前最新的版本
一、如何配置?
两种方法进行配置。
1.在main.js中进行配置
2.修改配置文件vue.config.js进行配置
(个人推荐第二种,配置完成即可全局使用,第一种有时候还会报错)
二、配置步骤
1.使用第一种main.js方法引入
代码如下(示例):
import $ from "jquery"
Vue.use($);
main.js完整代码如下
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import $ from "jquery"
Vue.use($);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
2.修改配置文件应用
首先找到在文件根目录找到vue.config.js 这个文件,如果没有可以自行创建(记得创建编写完重启项目)
代码如下:(直接复制粘贴即可使用)
const webpack = require("webpack");
module.exports = {
chainWebpack: config => {
config.plugin("provide").use(webpack.ProvidePlugin, [
{
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}
]);
}
};
三、测试一波
<template>
<div id="div">
</div>
</template>
<script>
export default {
mounted () {
$("#div").html("hello world")
},
}
</script>
效果如下:
非常perfect!!!
更多推荐
已为社区贡献3条内容
所有评论(0)