如何在 vue 项目里正确地引用 jquery 插件

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码


// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve
module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),
          // webpack 使用 jQuery,如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery' 
      }
   },
   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],
   // 其他代码...
}

这样就可以正确的使用jQuery了,比如我要引入Bootstrap,我们在vue的入口js文件src/main.js开头加入


// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
这样Bootstrap就正确的被引用并构建。
在比如使用toastr组件,只需要在需要的地方import进来,或者全局引入css在需要的地方引用js,然后直接使用
// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'
toastr.success('Hello')



vue-cli webpack全局引入jquery

首先在package.json里加入,

dependencies:{
 "jquery" : "^2.2.3"
}

然后 nmp install

在webpack.base.conf.js里加入

var webpack = require("webpack")

在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

然后一定要重新 run dev

在main.js 引入就ok了

import $ from 'jquery'





修改时间 2016-10-20

真诚赞赏,手留余香
赞赏
随机推荐
Audio对象的属性
Flex 布局 space-between 最后一行左对齐最佳实践
FTP over TLS加密传输 Filezilla
PHP 为什么会引入 Trait
npm国内镜象设置的三种方法
Apache ModSecurity 基础介绍
unserialize(): Error at offset出现的原因分析以及解决方法
windows下安装expressjs
SQLite目前还不支持drop column
Nodejs base64编码与解码