Question

大家。

我对制作vue组件有一个小小的疑问。

我不想使用 browserify 或 webpack ，因为我在django工作，它在静态文件中有大部分模板虽然我读过this，但它确实描述了如何兼顾两者（但在其他日子也是如此）。

问题：

我正在制作一个单个文件组件，我必须使用我的路由器导入和使用它，但我不能，因为导入不会发生。

我的 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>

我在 index.html 文件本身，没有其他 .js 文件，

<script>
    import Hello from '@/components/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: '/', component: dashboard },
          { path: '/profile', component: profile },
          { path: '/hello', component: Hello }
        ]
    });
    new Vue({
      router : router,
    }).$mount('#app');
</script>

我所做的一切：

1。<script src="../components/Hello.js" type="module"></script>并按照建议here

删除导入语句

用以下代码替换我的 Hello.js 代码：export const Hello = { ...
制作 Hello.js 文件并按此import Hello from '../components/Hello.js';

错误：

** Mozilla（Quantum 57.0.4 64 bit）**：SyntaxError: import declarations may only appear at top level of a module
** Chrome（63.0.3239.108（官方版）（64位））**：Uncaught SyntaxError: Unexpected identifier

Answer 1

不是Vue.js大师，但这里有一些可能对你有用的观点。

模块加载仍然是not supported on modern browsers by default，您需要设置特殊标志才能启用它（您的应用用户可能不会这样做）。
如果您坚持使用import和export，则需要使用Webpack。而且大多数肯定是Babel（或任何其他ES6转录程序，例如Buble）。
如果您更喜欢module.exports，那么您需要Browserify。它支持在浏览器环境中支持CommonJS。
如果两者都不可行，那么最好的办法就是在全球范围内定义Vue组件。您可以将它们拆分为单独的文件，并分别使用<script>导入每个文件。绝对不是最干净的方法。
单个文件组件通常位于.vue个文件中，但无论哪种方式，它们都需要vue-loader，可以使用捆绑器添加和配置（再次）。
最后一个选项是只使用现有的设置，如果有的话（是吗？）。如果您已经安装了RequireJS，UMD或类似的东西，请调整组件以使其适合。否则，请使用<script> s。

Answer 2

你正在尝试做一些不可能的事情。 Web浏览器不支持Vue单个文件组件作为原始组件文件。应该编译单个文件组件。

请查看此内容以获取更多信息： https://vuejs.org/v2/guide/single-file-components.html

在Webpack中，每个文件在被包含在包中之前都可以被“加载器”转换，而Vue提供了vue-loader插件来转换单个文件（.vue）组件。

vue单个文件组件首先被“翻译”（编译）为纯javascript代码，浏览器可以使用它。

导入单个文件组件VueJS

问题：

我所做的一切：

错误：

2 个答案: