如何在vue 2组件中加载外部.js文件

Question

我正在vue 2 js上工作，并且卡在js部分上。 我想在我的posts.vue文件中使用general.js文件，任何人都可以帮助我，非常感谢:)

这是我的代码：

    <template>
        <div>
            <p> {{message}} </p>
        </div>
    </template>

    <script>
        import axios from 'axios';
        import _ from 'lodash';

        export default {
            data() {
                return {
                    message : 'Here is my HTML'    
                }
            }
        }
    </script>

Answer 1

如果尚未这样做，则需要使用webpack提供插件首先包含jQuery本身。

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

此处更多信息： https : //webpack.js.org/plugins/provide-plugin/

---

我一直试图避免将jquery与vue一起使用，但是我在组件中非常有限的基础上使用jquery的一种方法如下。

假设我有一个非常基本的jquery插件alertText.js定义如下。

//define the plugin
$.fn.alertText = function() {
   this.css( "color", "red" );
};

然后在我的component.vue文件中，可以像在任何页面中一样包含jQuery插件。

<template>
  <div>
     <p class="alert-me">this text will be changed to red</p>
  </div>
</template>

<script type="text/javascript" src="alertText.js"></script>

<script>
    $('.alert-me').alertText(); // call the plugin on 'alert-me' class
</script>

<script>
    // define your component script
    export default {
         data():{
              //...
          }
     }
</script>