导入单个文件组件 VueJS答案

【问题标题】：Importing single file components VueJS导入单个文件组件 VueJS
【发布时间】：2018-06-24 10:50:55
【问题描述】：

每个人。

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

我不想使用 browserify 或 webpack ，因为我在 django 工作，它的大部分模板都在静态文件中，尽管我读过 @987654321 @ ，它确实描述了如何同时考虑两者（但那是其他日子）。

问题：

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

我的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（量子 57.0.4 64 位）**：SyntaxError: import declarations may only appear at top level of a module
**Chrome ( 63.0.3239.108 (官方版本) (64-bit) ) ** :Uncaught SyntaxError: Unexpected identifier

附言: 我已经尝试过各种组合

【问题讨论】：

你是如何使用所有这些 ES6 实现和转译开始的？
ES6 import/export 和 CommonJS module.exports 都不能在任何浏览器中工作。前者需要 Webpack + Babel，后者需要 Browserify。
另外，我在这里没有看到任何single file components，到目前为止你只有常规组件。如果您确实拥有它们，那么您肯定需要带有适当加载器的 Webpack。
@Alex 那是我不想使用的，因为我有 django 后端，它对所有这些都使用静态文件/文件夹
@jame “编译”是 webpack 或 browserify 或类似工具的工作。你要求相反的东西。你不能有一个单一的文件组件而不使用 webpack 或类似的东西。 You'll have to register your components programatically 然后使用脚本标签包含它们。

标签： javascript vue.js vuejs2

【解决方案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。

【讨论】：

只是把我的想法放在一起（从我通过你的回答和 webpack 的网站了解到的），我应该使用 webpack 或 browserify ，因为他们简化事情，最后他们将这些整个 js 文件和（不要忘记）组件编译成“bundle.js”文件或类似的东西。我对么？完成了，因为现代浏览器仍然不支持 js 模块，对吗？
@jame 是的。不过，您需要添加配置（Vue templates 已经包含）。然后你可以缩小和丑化你的代码以用于生产构建，也许添加vue-loader 以启用单文件组件，也许拉入 babel 以启用跨浏览器 ES6 支持......无论哪种方式，你都可以更轻松地进行分离来自 Python 模板的 JS 代码。

【解决方案2】：

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

请参阅此内容以了解更多信息： https://vuejs.org/v2/guide/single-file-components.html

在 Webpack 中，每个文件都可以在包含在包中之前由“加载器”进行转换，并且 Vue 提供了 vue-loader 插件来翻译单文件 (.vue) 组件。

vue 单文件组件首先被“翻译”（编译）为可供浏览器使用的纯 JavaScript 代码。

【讨论】：