Question

我想编写如下代码：

index.html-

<html>
  <div id="app1">
     <button @click="product-list">Click me</button> 
  </div>
  <div id="app2">
    <button @click="group-list">Click me</button>
  </div>

  <script>
     import product-list from '../components/items.vue'
     import group-list from '../components/groups.vue'
  </script>
</html>

items.vue-

<template id="product-list">
</template>

<template id="add-product">
</template>

<template id="delete-product">
</template>

<template id="edit-product">
</template>

<script>

</script>

我想调用包含所有必需模板的外部.vue文件，并且它是

单个文件中的vue实例。尝试执行此操作的想法是分割

用于在多开发人员团队环境中进行编码的代码，其中的代码为

易读且多个编码人员也可以继续进行各自的工作

分配的代码。

例如：- items.vue -有多个模板，我想分别维护。添加产品，删除产品，编辑产品等等。

groups.vue -有多个模板，我想分别维护。添加组，删除组，编辑组等等。

Answer 1

.vue文件是单个文件组件（SFC），这意味着它们只能包含一个组件（一个<template>和/或一个<script>和/或一个<style>）。

此外，您不应该将vue代码放入index.html中，因为它不是有效的html。

您可以简单地使用/ groups和/ items等子文件夹，然后创建多个.vue文件，例如ProductList.vue，AddProduct.vue等。

仅供参考，在import product-list from '../components/items.vue'行中，product-list不是有效的JavaScript变量名称（不能包含连字符）。

拆分VUE代码以简化多开发人员团队环境

1 个答案: