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、使用示例


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

你可能感兴趣的:(VUE)