如何将jquery包含在vuejs webpack cli项目中？

问题描述：

你好，我曾经vuejs cli生成一个项目（https://github.com/vuejs/vue-cli）。 cli使用webpack和im在使用vue文件内部的jquery时遇到了麻烦。我总是得到一个。如何将jquery包含在vuejs webpack cli项目中？

http://eslint.org/docs/rules/no-undef '$' is not defined

我试图编辑我webpack.dev.config为包括提供插件模块如下：

var utils = require('./utils') 
var webpack = require('webpack') 
var config = require('../config') 
var merge = require('webpack-merge') 
var baseWebpackConfig = require('./webpack.base.conf') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 

// add hot-reload related code to entry chunks 
Object.keys(baseWebpackConfig.entry).forEach(function (name) { 
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 
}) 

module.exports = merge(baseWebpackConfig, { 
    module: { 
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 
    }, 
    // cheap-module-eval-source-map is faster for development 
    devtool: '#cheap-module-eval-source-map', 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': config.dev.env 
    }), 
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    // https://github.com/ampedandwired/html-webpack-plugin 
    new HtmlWebpackPlugin({ 
     filename: 'index.html', 
     template: 'index.html', 
     inject: true 
    }), 
    new FriendlyErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $ : "jquery", 
     jQuery : "jquery" 
    }) 
    ] 
})

但是，当试图使用jquery我遇到同样的问题一次又一次。我不反对使用CDN为此我真的不能得到这个想法包括jquery，无论我尝试。

如果VUE文件是有帮助的我尝试CONSOLE.LOG $像这样的脚本块

<script> 
export default { 
    name: 'how_can_we_help_you', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    } 
} 
console.log($) 
</script>

请帮IM非常卡住，一直都在努力，现在解决这个相当长的诡计内。提前致谢。

为什么你需要Vue内的jQuery？它被认为是一个非常糟糕的做法，使用jquery + vue或jquery + angular。无论你在jQuery中能实现什么，你都应该能够在vue中写出它 – Plankton

@Plankton不是真的。有些操作更容易与jquery – John

您可能会发现此链接有趣：http://vuetips.com/bootstrap – Arj

答

搜索后两天。它的eslintrc.js

将此添加到以下内容，它将修复提供插件。

env: { 
    browser: true, 
    jquery: true 
},

答

进入main.js并做

window.$ = window.jQuery = require('jquery')

或

Vue.use({ 
    install: function(Vue, options){ 
     Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project 
    } 
})

答

我找到了我的解决方案。我把我的更改放在webpack.dev.conf.js中，而不是webpack.dev.config和eslintrc.json，而不是eslintrc.js。

如何将jquery包含在vuejs webpack cli项目中？

相关推荐