alex5e
@alex5e

Как подключать сторонние библиотеки (например jquery, form-serializer и т.д.) в vue.js?

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

Подскажите, может я упустил чего?
  • Вопрос задан
  • 3144 просмотра
Пригласить эксперта
Ответы на вопрос 4
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
пропустили то что там из коробки есть подключение jquery + bootstrap + lodash
Ответ написан
AppFA
@AppFA
Frontend developer at Yandex
Дак вы в самом RegisterModal.vue явно пропишите импорты, то что вы прописали импорт jquery в main.js, дак он только и будет виден в области видимости этого файла:
<script>
import $ from 'jquery';

export default {
    name: 'register',
    ...
}
</script>
Ответ написан
@shelomanovd
в index.html подключать локально. Или в index.js имопортировать
Ответ написан
Комментировать
gennadiy403
@gennadiy403
Достаточно в index.html прописать
script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2...."
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы