单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X)
和模板中引用组件的方式尽可能的一致。然而,混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题,这也是横线连接命名同样完全可取的原因。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js组件</title>
</head>
<body>
<!-- 组件可以扩展 HTML 元素,封装可重用的代码。 -->
<!-- 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: -->
<div id='app'>
<!-- 组件命名横线连接(kebab-case) Or 首字母大写-->
<My-Item></My-Item>
<!--横线连接: <my-comp></my-comp>-->
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
//注册
Vue.component('MyItem', {
template: '<h1>自定义组件!</h1>'
})
//创建根实例
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
详细请参考Vue.js官方风格指南文档—>Vue.js