Vue2.x 使用webpack脚手架 引入全局jquery

vue-cli2 中全局引入jquery

1、使用npm install --save-dev jquery 安装jquery 相关的组件

2、修改 webpack.base.conf.js 配置文件，内容如图

 

3、直接在vue文件中使用$即可，$代表的是jquery对象

 

在vue-cli3中引入全局jquery

在配置文件 vue.config.js 文件中添加 configureWebpack 属性

// vue.config.js
const webpack = require("webpack");

module.exports = {
  transpileDependencies: ["vue-echarts", "resize-detector"],
  configureWebpack: {
    //支持jquery
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ]
  },
  publicPath: "./"
};

 

引入jquery的目的是为了DOM 节点查找，则可以不用引入jquery

1. 查找节点的目的是为了操作或者修改节点的属性
2. vue 的双向绑定“能力” ，导致我们在绝大部分情况下不需要找DOM 节点直接改变数据，提高效率
3. 如果某些节点没有被“双向绑定”，则可以使用 document.querySelector 和 document.querySelectorAll 两个内置函数

 

参考 

• Element.querySelector()
• document.querySelector()