vue.js - Vue-CLI 组件错误：您正在使用仅运行时构建的 Vue，其中模板编译器不可用

Question

VueJS 新手，正在阅读教程。这是我做的步骤

• 使用 VUE CLI 创建项目

• 尝试使用此代码创建组件。

   var data = {
      items: [{ text: 'Bananas', checked: true },
          { text: 'Apples', checked: false }
          ],
      title: 'My Shopping List',
      newItem: ''
          }; 
  
  Vue.component('items-component', {
      data: function () {
          return data;
      },
      template: `
  <div class="blog-post">
    <span>sample</span>
  </div>
  `
  });
  

• 将此添加到 App.vue 模板部分。

    <items-component></items-component>
  

但是我收到了这个错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

问题

• 有没有一种方法可以在 Vue Cli 项目中在一个文件中创建多个组件，或者多个文件是创建组件的唯一方法？

• 使用 CLI 手动编辑 webpack 是一个不错的选择吗？如果是这样，是否有任何好的链接。

请告诉我

标签： vue.jsvuejs2vue-componentvue-loader

Answer 1

我的项目也有同样的错误。我通过以下方式解决了它：

1. 创建一个新文件：vue.config.js

2. 并补充说：

   module.exports = {
     runtimeCompiler: true
   }
   

关于您的问题，即使我可能无法给出最佳答案，我也会尝试回答：

有没有一种方法可以在 Vue Cli 项目中在一个文件中创建多个组件，或者多个文件是创建组件的唯一方法？

人们总是为组件创建多个文件。

我希望这有帮助