如何將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非常卡住，一直都在努力，現在解決這個相當長的詭計內。提前致謝。

來源

2017-06-12 Morphasis

爲什麼你需要Vue內的jQuery？它被認爲是一個非常糟糕的做法，使用jquery + vue或jquery + angular。無論你在jQuery中能實現什麼，你都應該能夠在vue中寫出它 – Plankton

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

您可能會發現此鏈接有趣：http://vuetips.com/bootstrap – Arj

搜索後兩天。它的eslintrc.js

將此添加到以下內容，它將修復提供插件。

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

來源

2017-06-12 10:18:52 Morphasis

進入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 
    } 
})

來源

2017-06-12 10:17:56 John

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

來源

2017-07-03 19:10:03 codely

如何將jquery包含在vuejs webpack cli項目中？

回答

相關問題