vue项目全局引入jquery

1、全局安装jquery

安装命令：

npm install jquery --save

2、vue-cli3项目没有webpack.base.conf.js文件

根目录新建vue.config.js文件

输入以下代码

// vue.config.js
const webpack = require("webpack");
const path = require("path");
function resolve(dir) {return path.join(__dirname, dir);
}
module.exports = {chainWebpack: (config) => {//路径配置config.resolve.alias.set("assets", resolve("src/assets")).set("styles", resolve("src/assets/styles"));},// webpack-dev-server 相关配置devServer: {// 调试端口// port: 8989},//其他配置....configureWebpack: {plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery",}),],},
};

3、根目录新建.eslintrc.js文件

输入以下代码

module.exports = {root: true,env: {node: true},'extends': ['plugin:vue/essential','eslint:recommended'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-undef': 'off','vue/no-unused-vars': 'off','vue/require-v-for-key': 'off','no-unused-vars': 'off','vue/no-unused-components': 'off'},parserOptions: {parser: 'babel-eslint'}
}

4、main.js中全局引入

import $ from "jquery";
window.jQuery = $;
window.$ = $;

项目中就可以随意使用jquery代码了！

vue项目全局引入jquery相关推荐

在vue项目中引入JQuery
1.安装 npm install jquery --save 2.配置 1.首先在package.json里的dependencies加入"jquery":"^3.6.0 ...
Vue项目如何引入JQuery详细步骤
用vue-cli脚手架工具构建项目成功后如果需要引入JQ,步骤如下: 1.在Jquery官网下载:https://jquery.com/download/ 2.首先在项目中找到在package.js ...
vue项目怎么全局引入jquery
项目场景: vue项目怎么引入jquery 使用jq的时候报错$ is not defined 在main.js中引入后,组件内使用$报$未定义,只有在组件中import $ from 'jquery ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...
创建Vue项目以及引入Iview
创建Vue项目以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue i ...
vue 项目中使用 jquery
在 vue 项目中使用 jquery,具体步骤如下 1.npm 安装 jquery 命令如下,@ 后边指定安装的 jquery 版本 npm install jquery@3.2.1 不加 @ 会安装 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue项目安装引入css-loader - cmd篇
vue项目如何引入安装css-loader? 步骤如下: cmd指令: npm install --save-dev css-loader 以上就是关于" vue项目安装引入css-load ...

vue项目全局引入jquery

vue项目全局引入jquery相关推荐

最新文章

热门文章