javascript - Importing single file components VueJS - Stack Overflow

admin管理员组

文章数量:1420519

everyone.

I have a trivial doubt on making vue ponents.

I don't want to use browserify or webpack , cause I am working in django and it has most of it's templates in static files , although I read this , which does describe how to take in account both ( but that's for some other day ).

Problem :

I am making a single file ponent which I have to import and use, using my router but I can't, as the import just doesn't happen.

My Hello.vue

<template>
 Some HTML code here.
</template>
<script>
module.exports = {
  data() {
    return {
      coin : []
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get('my-django-rest-api-url')
    .then(response => {
      next(vm => {
        vm.data = response.data
      })
    })
  }
}
</script>

I have it in the index.html file itself , no other .js file,

<script>
    import Hello from '@/ponents/Hello.vue'
    Vue.use(VueRouter);
    const dashboard = {template:'<p>This is the base template</p>'};
    const profile = {
      template: '#profile_template',
      data () {
        return {
          profile_details: []
        }
      },
      beforeRouteEnter (to, from, next) {
        axios.get('my-api-url')
        .then(response => {
          next(vm => {
            vm.profile_details = response.data
          })
        })
      }
    }
    const router = new VueRouter({
    routes: [
          { path: '/', ponent: dashboard },
          { path: '/profile', ponent: profile },
          { path: '/hello', ponent: Hello }
        ]
    });
    new Vue({
      router : router,
    }).$mount('#app');
</script>

---

What all I've tried :

1.<script src="../ponents/Hello.js" type="module"></script> and removing the import statement as suggested here

2. Replacing my Hello.js's code with this : export const Hello = { ...
3. Making a Hello.js file and importing it like this import Hello from '../ponents/Hello.js';

Error :

1. **Mozilla ( Quantum 57.0.4 64 bit ) ** : SyntaxError: import declarations may only appear at top level of a module
2. **Chrome ( 63.0.3239.108 (Official Build) (64-bit) ) ** :Uncaught SyntaxError: Unexpected identifier

P.S. : I have tried these in various binations

everyone.

I have a trivial doubt on making vue ponents.

I don't want to use browserify or webpack , cause I am working in django and it has most of it's templates in static files , although I read this , which does describe how to take in account both ( but that's for some other day ).

Problem :

I am making a single file ponent which I have to import and use, using my router but I can't, as the import just doesn't happen.

My Hello.vue

<template>
 Some HTML code here.
</template>
<script>
module.exports = {
  data() {
    return {
      coin : []
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get('my-django-rest-api-url')
    .then(response => {
      next(vm => {
        vm.data = response.data
      })
    })
  }
}
</script>

I have it in the index.html file itself , no other .js file,

<script>
    import Hello from '@/ponents/Hello.vue'
    Vue.use(VueRouter);
    const dashboard = {template:'<p>This is the base template</p>'};
    const profile = {
      template: '#profile_template',
      data () {
        return {
          profile_details: []
        }
      },
      beforeRouteEnter (to, from, next) {
        axios.get('my-api-url')
        .then(response => {
          next(vm => {
            vm.profile_details = response.data
          })
        })
      }
    }
    const router = new VueRouter({
    routes: [
          { path: '/', ponent: dashboard },
          { path: '/profile', ponent: profile },
          { path: '/hello', ponent: Hello }
        ]
    });
    new Vue({
      router : router,
    }).$mount('#app');
</script>

---

What all I've tried :

1.<script src="../ponents/Hello.js" type="module"></script> and removing the import statement as suggested here

2. Replacing my Hello.js's code with this : export const Hello = { ...
3. Making a Hello.js file and importing it like this import Hello from '../ponents/Hello.js';

Error :

1. **Mozilla ( Quantum 57.0.4 64 bit ) ** : SyntaxError: import declarations may only appear at top level of a module
2. **Chrome ( 63.0.3239.108 (Official Build) (64-bit) ) ** :Uncaught SyntaxError: Unexpected identifier

P.S. : I have tried these in various binations

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Jan 15, 2018 at 19:03 jamejame 32844 silver badges1111 bronze badges 8

• 1 How are you using all these ES6 implementations with transpiling to begin with? – Ohgodwhy Commented Jan 15, 2018 at 19:11
• Neither ES6 import/export, nor CommonJS module.exports can work in any browser. You need Webpack + Babel for the former and Browserify for the latter. – Alex Commented Jan 15, 2018 at 19:15
• Plus, I don't see any single file ponents here, you just have regular ponents so far. If you did have them, you'd definitely need Webpack with the proper loader. – Alex Commented Jan 15, 2018 at 19:17
• @Alex that's what I don't want to use, cause I have django backend and it uses static files/folders for all these – jame Commented Jan 15, 2018 at 19:17
• 2 @jame "piling" is the work of webpack or browserify or tools like them. Your asking for opposite things. You cannot have a single file ponent and not use a webpack or the like. You'll have to register your ponents programatically and then include them using a script tag. – etchesketch Commented Jan 15, 2018 at 19:29

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

Not a Vue.js guru, but here are a few perspectives that might help you.

• Module loading is still not supported on modern browsers by default, and you'd need to set special flags in order to enable it (which the users of your app probably won't do).
• If you insist on using import and export, you'd need Webpack. And most certainly Babel (or any other ES6 transpiler, e.g. Buble) as well.
• If you prefer module.exports, then you'd need Browserify. It enables support for CommonJS in browser environments.
• If neither is doable, then your best bet is defining Vue ponents in global scope. You can split them across separate files, and import each with a <script> individually. Definitely not the cleanest approach.
• Single file ponents typically go inside of .vue files, but either way they require vue-loader which can be added and configured (again) with a bundler.
• Last option is to just use an existing setup in place, if there is any (is there?). If you already have RequireJS, UMD, or something similar in place, adjust your ponents to fit that. Otherwise, use <script>s.

You are trying to do something which is not possible. Vue Single file ponents are not supported as raw ponent file by web browsers. The single file ponent is supposed to be piled.

Please see this for more: https://v2.vuejs/v2/guide/single-file-ponents.html

In Webpack, each file can be transformed by a “loader” before being included in the bundle, and Vue offers the vue-loader plugin to translate single-file (.vue) ponents.

A vue single file ponent is first "translated" (piled) to pure javascript code which is use-able by browsers.

本文标签： javascriptImporting single file components VueJSStack Overflow