这个 Vue.js CLI 代码中的 name: 'app' 行有什么作用？答案

【问题标题】：What does the name: 'app' line do in this Vue.js CLI code?这个 Vue.js CLI 代码中的 name: 'app' 行有什么作用？
【发布时间】：2017-09-21 12:25:12
【问题描述】：

name: 'app' 在以下 Vue.js CLI 代码中有什么功能？

我了解export default 用于

"创建 JavaScript 模块以导出函数、对象或来自模块的原始值，以便其他程序可以使用它们带有 import 语句" (docs)

我知道该模块是 template 元素中的内容，但我看不到它被导入的位置。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我也看不到 name: 'app' 究竟做了什么，因为如果我更改名称，Vue.js。代码仍然有效，直到您在非 CLI Vue.js 中更改它，例如

new Vue({
  el: '#app',
  ...
});

如果您更改了“#app”，那么代码将不会引用该元素并且它将不再工作。

【问题讨论】：

也许这会对你有所帮助：vuejs.org/v2/api/#name
要点似乎是它在其模板中递归调用自身的组件，但我可以更改名称并且它仍然有效。另一个优点似乎是通过提供名称选项，您将获得信息量更大的组件树。我什至可以删除它，或者就此而言，删除整个 export default 块并且代码仍然有效。

标签： vue.js

【解决方案1】：

在使用 vue cli webpack 模板生成的项目中，Vue 组件的 name 属性并不是真正需要的。在您的情况下，组件名称在其他地方设置（因为您使用 vue-router: 在src/router/index.js 中），因此在*.vue 文件的export default 中技术上不需要它。

如果您在没有 vue-router 的情况下生成 vue cli webpack 模板，您也不必提供组件名称，因为您的 <script> 块看起来像这样：

<script>
import Hello from './components/Hello'

export default {
      ...
      components: {
        Hello
      }
    }
</script>

components: {Hello} 是 EcmaScript 6 中 components: {'Hello': Hello} 的简写。在这种情况下，这是设置组件名称的位置。

话虽如此，在*.vue 文件的export default 对象中设置组件名称被认为是一种很好的风格，因为您的组件将在整个项目中统一命名，因此更易于调试。如果您将import Hello from .... 更改为import HelloComponent from ....，它将在vue-devtools 和警告消息中显示为HelloComponent。您现在还必须在您的<template> 中将其引用为<hello-component></hello-component>。由于您希望组件名称一致，尤其是在编写您打算可重用的组件时，您应该一劳永逸地在您的 vue 组件中设置 name 属性。

【讨论】：