1

Не получается подключить сторонние библиотеки в 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>

Подключение в конфиге webpack тоже не работает

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

Подскажите, может я упустил чего?

1 ответ 1

2

Мне помогло прокинуть jQuery то, что я четко указал, какие либы при этом захватятся

    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",
    })]

Ну и собственно нужно убедиться что jquery есть в node_modules рядом. А также проверьте, что у вас верно определены пути до node_modules

6
  • Увы, но это не сработало, в RegisterModal.vue получаю 'jQuery' is not defined
    – LANSELOT
    11 янв 2017 в 20:46
  • А вы пробовали использовать chunk и сделать какой-то общий файл с зависимостями (т.е. только в одном файлике будет jquery, babel и другие внешние либы) и подключить его явно в vue файле ? Так же можно попробовать require присвоить переменной и ее прокидывать в vue как компонент (т.е. var $ = require ('jquery');)
    – alexoander
    12 янв 2017 в 8:33
  • Вот еще можно попытаться самостоятельно зарезолвить прокидываение jquery через resolve-alias webpack.github.io/docs/configuration.html#resolve-alias
    – alexoander
    12 янв 2017 в 8:36
  • У меня получилось после того как я указал в .eslintrc env: [jquery: true]. jQuery там уже определен, как я понимаю. Вопрос в том, как тогда глобально подключить другие npm пакеты.
    – LANSELOT
    12 янв 2017 в 11:36
  • 1
    ээммм eslingtrc это же линтер. Просто линтер, котороый проверят то, что вы пишете нормальный код. Ваша строчка просто показала линтеру, что $ или jQuery не требует объявления в текущем файле т.к. он может быть определен глобально и линтер не будет ругаться на $ в коде. Видимо в vue линтер блокирует сборщик/компилятор при ошибках. Тогда в вашем случае будет полезно почитать как работает линтер и как в нее прописать правила для остальных пакетов. Т.е. фактически статический анализатор говорит, что у вас нет доступа, хотя в собраном варианте доступ будет.
    – alexoander
    12 янв 2017 в 12:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.