Cannot connect third-party libraries in vue.js

main.js

... require('jquery') import Vue from 'vue' import VueMdl from 'vue-mdl' import App from './App' import Auth from './views/user/Auth' import Index from './views/Index' import VueRouter from 'vue-router' import VueResource from 'vue-resource' Vue.use(VueRouter) Vue.use(VueMdl) Vue.use(VueResource) const AppComponent = Vue.extend(App) new AppComponent({ router, el: '#app', template: '<App/>', components: { App } })

RegisterModal.vue

 <template> ... </template> <script> export default { name: 'register', data () { return { msg: 'Register' } }, methods: { open () { this.$refs.register.open() }, close () { this.$refs.register.close() }, submit () { var data = $('form').serialize() // '$' is not defined console.log(jQuery) // 'jQuery' is not defined console.log(data); } } } </script>

Connection in webpack config also does not work

 plugins: [ new webpack.ProvidePlugin({ $ : "jquery", jQuery : "jquery", }) ],

Tell me, maybe I missed something?

    1 answer 1

    It helped me to throw jQuery what I clearly indicated, which ones would be captured at the same time

      var webpack = require('webpack'); ...... plugins:[ new webpack.ProvidePlugin({ $: "jquery/dist/jquery.min.js", jQuery: "jquery/dist/jquery.min.js", "window.jQuery": "jquery/dist/jquery.min.js", })]

    Well, actually you need to make sure that jquery is in the node_modules nearby. And also check that your path to node_modules is correctly defined.

    • Alas, but it did not work, in RegisterModal.vue I get 'jQuery' is not defined - LANSELOT
    • Have you tried to use chunk and make some kind of common file with dependencies (i.e. only jQuery, babel and other external files in one file) and connect it explicitly in a vue file? You can also try require assign a variable and prokidyd in vue as a component (ie, var $ = require ('jquery'); ) - alexoander
    • Here you can also try to independently procreate a jquery through the resolve-alias webpack.imtqy.com/docs/configuration.html#resolve-alias - alexoander
    • I did it after I specified env: [jquery: true] in .eslintrc . jQuery is already defined there, as I understand it. The question is how then to globally connect other npm packages. - LANSELOT
    • one
      eemmm eslingtrc is a linter. Just a linter that will verify that you are writing normal code. Your line just showed the linter that $ or jQuery does not require the declaration in the current file, since it can be defined globally and the linter will not swear at $ in the code. Apparently in vue, the linter blocks the collector / compiler on error. Then in your case it will be useful to read how the linter works and how to write the rules for the rest of the packages into it. Those. in fact, the static analyzer says that you do not have access, although in the assembled version there will be access. - alexoander