我有一个非常基本的vueJS应用程序，我在网站上关注它.
Here's代码，为什么组件不呈现？
HTML
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<div>
<ol>
<todo-item></todo-item>
</ol>
</div>
JS
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Vue.component('todo-item', {
template: '<li>This is a list item</li>'
})
更好的是，可以使用Single File Components在另一个文件中定义todo-item组件:
app.vue
import TodoItem from './components/todo-item'
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
components: {
TodoItem
}
})
components/todo-item.vue
<template>
<li>This is a list item</li>
</template>
<script>
export default {
name: 'todo-item'
}
</script>
在许多Vue项目中，全局组件将使用
Vue.component来定义，然后使用new Vue({ el: '#container' })来针对每个页面主体中的容器元素.这对于中小型项目非常有效，因为JavaScript只用于增强某些视图.然而，在更复杂的项目中，或者当前端完全由JavaScript驱动时，这些缺点变得显而易见:
- Global definitions强制每个组件使用唯一的名称
- String templates缺少语法突出显示，多行HTML需要难看的斜杠
- No CSS support意味着虽然HTML和JavaScript被模块化为组件，但CSS明显被忽略了
- No build step限制我们使用HTML和ES5 JavaScript，而不是像Pug(以前是Jade)和Babel这样的预处理器
所有这些问题都可以通过扩展名为
.vue的单文件组件解决，这些组件可以通过Webpack或Browserify等构建工具实现.