javascript - How to import JS script in vue loader component? - Stack Overflow

admin管理员组

文章数量:1023251

I have a vue-ponent

vue-poennt (vue-loader)

<template>
  <p>This is a template</p>
</template>
<script>
  require('main.js')
  huha()
</script>

And I have

main.js

 var huha = function(){
      alert("this is huha");
    }; 
alert("this is simple alert");

Here I get the 'simple alert' but in assessing huha() it is showing reference error. Can someone please help me to understand why is this happening?

Edit

I am trying to use testimonial.js as following and I am getting reference error.

    <template>
      <p>This is a template</p>
      <div id="testimonial-slider"></div>
    </template>
    <script>
      require('testimonial/testimonial.js')
      require('testimonial/testimonial.css')
      var testimonial = new Testimonial('#testimonial-slider');
    </script>
    <style>
      p{
         color: red;
        }
    </style>

It is giving "reference error: Testimonial is not defined"

I have a vue-ponent

vue-poennt (vue-loader)

<template>
  <p>This is a template</p>
</template>
<script>
  require('main.js')
  huha()
</script>

And I have

main.js

 var huha = function(){
      alert("this is huha");
    }; 
alert("this is simple alert");

Here I get the 'simple alert' but in assessing huha() it is showing reference error. Can someone please help me to understand why is this happening?

Edit

I am trying to use testimonial.js as following and I am getting reference error.

    <template>
      <p>This is a template</p>
      <div id="testimonial-slider"></div>
    </template>
    <script>
      require('testimonial/testimonial.js')
      require('testimonial/testimonial.css')
      var testimonial = new Testimonial('#testimonial-slider');
    </script>
    <style>
      p{
         color: red;
        }
    </style>

It is giving "reference error: Testimonial is not defined"

• javascript
• webpack
• babeljs
• vue.js

Share Improve this question Follow edited Dec 27, 2015 at 2:31 loganfsmyth 162k3131 gold badges346346 silver badges258258 bronze badges asked Dec 9, 2015 at 15:33 Ashvini KumarAshvini Kumar 10711 gold badge33 silver badges77 bronze badges 4

• Can I see your ponent code? – Yauheni Prakopchyk Commented Dec 9, 2015 at 17:23
• Actually i am using vue-loader webpack in this app. So in vue-ponent we write html, script and style in same file with extension '. vue-ponent' so i haven't defined a separate ponent. My ponent is 'vue-ponent' – Ashvini Kumar Commented Dec 9, 2015 at 17:44
• module.exports only works with a pilar, like browserify. Whats your build process? – notANerdDev Commented Dec 10, 2015 at 4:58
• 1 I am using webpack. I am also using vue-loader – Ashvini Kumar Commented Dec 10, 2015 at 5:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You need to export a function like so:

module.exports = {
    huha: function(){
      return alert("this is huha");
    }
}; 

And then in you ponents file:

<template>
  <p>This is a template</p>
</template>
<script>
  var main = require('main.js')
  main.huha()
</script>

I have a vue-ponent

vue-poennt (vue-loader)

<template>
  <p>This is a template</p>
</template>
<script>
  require('main.js')
  huha()
</script>

And I have

main.js

 var huha = function(){
      alert("this is huha");
    }; 
alert("this is simple alert");

Here I get the 'simple alert' but in assessing huha() it is showing reference error. Can someone please help me to understand why is this happening?

Edit

I am trying to use testimonial.js as following and I am getting reference error.

    <template>
      <p>This is a template</p>
      <div id="testimonial-slider"></div>
    </template>
    <script>
      require('testimonial/testimonial.js')
      require('testimonial/testimonial.css')
      var testimonial = new Testimonial('#testimonial-slider');
    </script>
    <style>
      p{
         color: red;
        }
    </style>

It is giving "reference error: Testimonial is not defined"

I have a vue-ponent

vue-poennt (vue-loader)

<template>
  <p>This is a template</p>
</template>
<script>
  require('main.js')
  huha()
</script>

And I have

main.js

 var huha = function(){
      alert("this is huha");
    }; 
alert("this is simple alert");

Here I get the 'simple alert' but in assessing huha() it is showing reference error. Can someone please help me to understand why is this happening?

Edit

I am trying to use testimonial.js as following and I am getting reference error.

    <template>
      <p>This is a template</p>
      <div id="testimonial-slider"></div>
    </template>
    <script>
      require('testimonial/testimonial.js')
      require('testimonial/testimonial.css')
      var testimonial = new Testimonial('#testimonial-slider');
    </script>
    <style>
      p{
         color: red;
        }
    </style>

It is giving "reference error: Testimonial is not defined"

• javascript
• webpack
• babeljs
• vue.js

Share Improve this question Follow edited Dec 27, 2015 at 2:31 loganfsmyth 162k3131 gold badges346346 silver badges258258 bronze badges asked Dec 9, 2015 at 15:33 Ashvini KumarAshvini Kumar 10711 gold badge33 silver badges77 bronze badges 4

• Can I see your ponent code? – Yauheni Prakopchyk Commented Dec 9, 2015 at 17:23
• Actually i am using vue-loader webpack in this app. So in vue-ponent we write html, script and style in same file with extension '. vue-ponent' so i haven't defined a separate ponent. My ponent is 'vue-ponent' – Ashvini Kumar Commented Dec 9, 2015 at 17:44
• module.exports only works with a pilar, like browserify. Whats your build process? – notANerdDev Commented Dec 10, 2015 at 4:58
• 1 I am using webpack. I am also using vue-loader – Ashvini Kumar Commented Dec 10, 2015 at 5:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You need to export a function like so:

module.exports = {
    huha: function(){
      return alert("this is huha");
    }
}; 

And then in you ponents file:

<template>
  <p>This is a template</p>
</template>
<script>
  var main = require('main.js')
  main.huha()
</script>

本文标签： javascriptHow to import JS script in vue loader componentStack Overflow