项目场景：

vue项目怎么引入jquery  使用jq的时候报错$ is not defined
在main.js中引入后，组件内使用$报$未定义，只有在组件中import $ from 'jquery'才可以太麻烦
配置都可以的直接看解决方案，没配置的从头来
首先看有无配置webpack
package.json里面搜索webpack，没用的话安装
webpack npm install webpack --save-dev(在本地安装)
配置的有weibpack，但是没有webpack.base.conf文件
先在根目录创建build目录，目录下新建webpack.base.conf.js文件
文件内容：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack')  //这里引入webpackfunction resolve (dir) {return path.join(__dirname, '..', dir)
}module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),// 如果是自己下载的jq文件，则用下面方式修改为存放目录// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),// 如果使用NPM安装的jQuery，则直接引入即可'jquery': 'jquery' }},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},node: {// prevent webpack from injecting useless setImmediate polyfill because Vue// source contains it (although only uses it if it's native).setImmediate: false,// prevent webpack from injecting mocks to Node native modules// that does not make sense for the clientdgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'},
//在最后添加一个plugins配置plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"})],
}

# 原因分析：原因是没有引入

解决方案：

先配置jq，
npm 安装 npm install jquery --save-dev
然后 main.js里面
import $ from ‘jquery’
window.jquery = window.$ = $
这样全局配置就好了
其他页面无需再次引入

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

Vue项目中如何引入Toast插件
Vue项目中如何引入Toast插件安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...
css引入报错,vue项目通过import引入外部css报错怎么办
vue项目通过import引入外部css报错的解决办法:首先在[webpack.config.js]中添加相关内容,添加后重新npm run dev:然后json文件中查看是否存在[css-loade ...
vue项目全局引入jquery
1.全局安装jquery 安装命令: npm install jquery --save 2.vue-cli3项目没有webpack.base.conf.js文件根目录新建vue.config.js ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&ty ...
vue项目添加全局水印或某个指定页面水印源码
vue项目的页面添加水印,效果如图 index.vue import watermark from "./watermark"; mounted() {watermark.set( ...

vue项目怎么全局引入jquery

项目场景：

解决方案：

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

最新文章

热门文章