vue 单文件组件

在很多vue项目中，我们使用vue.component来定义全局组件，紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素

这种方式在很多中小规模的项目中运作的很好，在这些项目里javascript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全有javascript驱动的时候，下面这些缺点将变得特别明显：

• 全局定义强制要求每个component组件中的命名不能重复
• 字符串模板缺乏语法高亮，在html有多行的时候，需要用到丑陋的/
• 不支持css意味着当html和javascript组件化时，css明显被遗漏
• 没有构建步骤限制只能使用HTML和es5javascript，而不是用预处理器，如pug(formerly jade)和babel

文件扩展名为.vue的single-file components(单文件组件)为以上所有问题提供了解决办法，并且还可以使用webpack和browserify。

下面是一个名为hello.vue的简单实例：

<template>

<p>{{greetimg}} world!</p>

</template>

<script>

module.export = {

data:function(){

return {

greeting:'hello'

}

}

}

</script>

<style scoped>

p{

font-size:2em;

text-align:center;

}

</style>

现在我们获得

• 完整语法高亮
• CommonJs模块
• 组件化的CSS

正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如pug,babel,和stylus.

<template lang = 'jade'>

div

p{{greeting}} world!

other-component

</template>

<script>

import OtherComponent from './OtherComponent.vue'

export default {

data(){

return {

greeting:'hello'

}

},

components:{

OtherComponent

}

}

</script>

<style lang = 'stylus' scoped>

p

font-size:2em

text-align:center

</style>

这些特定的语言只是例子，你可以只是简单的使用Babel，TypeScript,scss,PostCSS或者其他任何能帮助你提高生产的预处理器，如果搭配vue-loader使用webpack，它也是把CSSmodules当做第一公民来对待。

怎么看待关注点分离

一个重要的事情值得关注，关注点分离不等于文件类型分离。在现代ui开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来。

把他们划分为松散耦合的组件再将其组合起来更合理一点。在一个组件中，其模板，逻辑，样式是内部耦合的，并且把他们搭配在一起实际上使得组件内部更加内聚并且更可维护。

即便你不喜欢单文件组件，你仍然可以把javascript，css分离成独立的文件然后做到热重载和预编译

<!--my-component.vue-->

<template>

<div>This will be pre-compiled</div>

</template>

<script src="./component.js"></script>

<style scr="./component.css"></style>

起步

针对刚接触javascript模块开发系统的用户

有了.vue组件，我们就进入了高级javascript应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：

• node package manager
• modern javascript with es2015/16

在你花一些时日了解这些资源之后，我们建议你参考webpack-simple。只要遵循指示，你就能很快地运行一个到.vue组件，es2015和热重载的vue项目

这个模块使用webpack，一个能将多个模块打包成最终应用的模块打包工具。

在webpack中，每个模块被打包到bundle之前都由一个响应的loader来转换。vue也提供vue-router插件来执行.vue单文件组件的转换。