最近在學習VUE的過程中，需要引用第三方外掛jquery，我們在使用jquery時，可以直接通過script標籤引入，但是這種方法並不是全域性方式，需要在每一個vue元件都去引用才可以生效，為了使用簡單，我們現在可以通過以下方式來配置全域性的jquery使用。

1、首先，安裝jquery外掛

npm install jquery -g –save

-g：表示全域性安裝
-save：表示安裝到package.json檔案的dependencies下
–save-dev：表示安裝到package.json檔案的devDependencies下

2、配置檔案：build/webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  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'),
      'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'
 
)
    }
  }, 
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

主要程式碼：
1、’jquery’: path.resolve(__dirname, ‘../node_modules/jquery/src/jquery’)//需要解析的jquery的路徑，dirname的前邊是兩個英文的下劃線
2、plugins: [//為jquery命名
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
“window.jQuery”: “jquery”
})
]

3、使用示例

<template>
  <div id="tree" class="ztree"></div>
</template>
<script>
  import ztree from 'ztree'
  export default {
    name: 'hello',
    data () {
      return {}
    },
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
        jQuery('#tree').css({
          width: '100px',
          height: '200px',
          backgroundColor: 'red'
        })
         $('#tree').css({
          width: '100px',
          height: '200px',
          backgroundColor: 'red'
        })
     } 
  }
</script>