VUE全局安装第三方插件

最近在学习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>

参考文章：http://blog.csdn.net/cly153239/article/details/53067433