Javascript 需要vue.js中的其他库（jquery或其他库）

我无法将第三方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 }
})

不太管用

---

如何解决我的问题并使组件中的任何库可用？

我认为可能还需要全局声明

jQuery

，如下所示：

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

或：

---

我认为可能还需要全局声明

jQuery

，如下所示：

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

或：

---

1.在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>

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

---

1.在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>

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

---

在面对同样的问题时，我遇到了这样的问题

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

他解释说

因为所有组件都从Vue原型继承了它们的方法 对象这将使力矩在任何和中自动可用 没有全局变量或任何要手动执行的操作的所有组件 进口。它可以在任何实例/组件中从 这一刻

在做了一些小动作之后，我让它很好地为我工作，例如，在子

组件中使用
道具

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

{{$moment（registration.eventBookings[0].bookable.startTime）.格式（“HH:mm”）}

因此，作者的荣誉
 在面对同样的问题时，我遇到了同样的问题，这表明

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

他解释说

因为所有组件都从Vue原型继承了它们的方法
对象这将使力矩在任何和中自动可用
没有全局变量或任何要手动执行的操作的所有组件
进口。它可以在任何实例/组件中从
这一刻

在做了一些小动作之后，我让它很好地为我工作，例如，在子
组件中使用
道具

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

{{$moment（registration.eventBookings[0].bookable.startTime）.格式（“HH:mm”）}

因此，作者的荣誉