需要 Vue.js 中的其他库(jquery 等)

Question

我无法将第三方 js 库连接到 vue.js组件

主.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>

需要与网络包

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

也不起作用

如何解决我的问题并在组件中提供任何库？

Answer 1

我认为

可能还需要全局声明jQuery，如下所示：

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
});

或：

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

Answer 2

1.import $ in RegisterModal.vue

<script>
  import $ from 'jQuery';
</script>

2. 将externals配置添加到 webpack.config.js

externals: {
      jQuery: 'window.jQuery'
 }

Answer 3

在面对同样的问题时，我遇到了这篇有用的文章，它表明

在

Vue 中使用 Javascript 库的最干净、最健壮的方式 项目是将其代理到 Vue 原型对象的属性。 让我们这样做，将时刻日期和时间库添加到我们的项目中： （条目.js）

import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

他解释说，

由于所有组件都从 Vue 原型继承了它们的方法 对象，这将使时刻自动在任何和 所有组件没有全局变量或任何手动组件 进口。它可以简单地在任何实例/组件中访问 这.$moment

经过一番摆弄，我让它对我来说很好用，例如在儿童component中使用props

<p v-if="enrolment.eventBookings.length > 0">{{$moment(enrolment.eventBookings[0].bookable.startTime).format("HH:mm")}}</p>

所以向作者致敬！