专栏首页前端之攻略vue中引入Jquery

vue中引入Jquery

之前我是在main.js直接引入的jQuery 

//import './assets/js/jQuery-2.1.4.min.js

后来不知为什么页面总是提示$ undefind 

后来就换成安装jquery  

第一步:npm install jquery @2.1.4

第二步:配置插件

vue.config.js

const path = require('path');
const webpack = require('webpack')
function resolve (dir) {
  return path.join(__dirname,  dir)
}
 
module.exports = {
  publicPath: '/', // 根路径 /pages/dist/
  //publicPath: '/pages/dist',
  productionSourceMap: false,
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录
  lintOnSave: false, // 是否开启eslint保存检测,有效值:true || false || 'error'
  devServer: {
    open: false, // 项目运行后是否自动打开浏览器
    host: 'localhost',
    //host: 'ip',
    //port: 8081,
    https: false,
    hotOnly: false, // 热更新
    proxy: {
      // 配置跨域
      '/api': {
        //target: 'http://localhost:8080', 
        wx: true,
        changeOrigin: true,
        pathRewrite: {
          //'^/api': '/mock'
          '^/api': '/appi'
        }
      }
    },

  },
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",

          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
      ]
    },
  configureWebpack: config => {
    config.resolve = {
      extensions: ['.js', '.vue', '.json',".css"],
      // 配置路径别名
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'styles': resolve('src/assets/styles')
      }
    }
  }
};

在需要的.vue页面引入,如果能正常打印$ 说明安装成功

import $ from 'jquery'

mounted () {

console . log ( $ )

  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuex-state 原

         每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分      的状态 (state)。V...

    tianyawhl
  • ionic2-list 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • vue中使用Echart

    在main.js引用主题JS  --    import  'echarts/theme/shine.js' 使用方法 -- let myChart = th...

    tianyawhl
  • 自制全息伦敦地铁站数据可视化

    爱德华·图夫特(Edward Tufte)在他的“展望信息”(Envisioning Information)一书中谈到了视觉形象被捕获在屏幕和纸张的二维平原中...

    代码医生工作室
  • vue中axios处理http发送请求的示例(Post和get)

    axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlenc...

    晓歌
  • Silverlight单元测试

    默认情况下,vs2010并不能创建"Silverlight的单元测试"项目,不是vs2010做不到,只是MS没有推出模板而已。没关系,在联机模板里下载一个,如下...

    菩提树下的杨过
  • LeetCode——Two Sum

    Given an array of integers, find two numbers such that they add up to a specific...

    zhaozhiyong
  • LeetCode——Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a spec...

    zhaozhiyong
  • 腾讯开源项目Angel从LF AI基金会毕业,成为世界顶级AI项目

    北京时间12月20日,Linux基金会旗下面向AI领域的顶级基金会——LF AI基金会(Linux Foundation Artificial Intelli...

    腾讯开源
  • 腾讯开源项目Angel从LF AI基金会毕业

    12月20日,Linux基金会旗下面向AI领域的顶级基金会——LF AI基金会(Linux Foundation Artificial Intelligence...

    AI研习社

扫码关注云+社区

领取腾讯云代金券