现在距离我刚开始接触vue，已经将近有一年了。刚开始是自己摸索着写仿站写项目，对vue的理解不深，使用的也不够熟练，水平仅限于会用。经过Iot Paas这个项目，才可以说熟练使用vue。对于使用vue的同学来说，其官方文档就是最好的学习资料。你所能遇到的问题几乎都能在文档中找到原因或解决方案。但是，文档更适合于通读学习或者有针对性的查问题，并没有一个基于单文件组件的，以实际工程为例的视角。因此，我尝试开的这个详解vue系列，试图以实际工程为例，详述vue工程实践的一些经验。本系列假设你已经通读过官方文档，对vue的基本思路和用法有一些理解，文中就不再重复官方文档中已有的内容了。由于之前短暂的用过react，这里也会时不时的对比react的特性。

本节我们讲的是，一个vue的单文件组件一般长什么样子。

参考资料：vue官方文档

一个.vue的结构

与react的一切皆为js的思路不同，vue的单文件组件的结构是由前端三要素HTML，JS，CSS组成的。一个.vue单文件组件就是一个独立的私有作用域，你可以在其中写入所有改组件特有的标签，方法，样式。
以下就是一个单文件组件的基本格式

<template>
	<div class="wrapper">hello world</div>
</template>
<script>
	export defalut {};
</script>
<style>
	.wrapper {
		font-size: 14px;
	}
</style>
```	
```<template>```中，结合vue指令写HTML；```<script>```中，写JS；```<style>```中写CSS。
虽然写起来的感觉确实在分开写前端三要素，但实际上```<template>```中写的HTML还是JS。具体原因请谷歌template标签的作用。
## template中的HTML
在```<template>```中，我们既可以按照原始的HTML规则写，也可以结合vue指令写。

vue指令的用法请查文档，这里就不再详述了。
vue在底层是将```<template>```编译成虚拟DOM渲染函数的。同时它也支持直接在```<script>```中编写渲染函数，让我们可以无需使用```<template>```，用react的方式写HTML。
在一些场景中，直接编写渲染函数确实是独特的优势，但是在同一个项目中同时使用两类语法，会让代码整体的风格，可读性，易维护性都受到影响，并且丧失一些vue的特性。因此，在实践中对于渲染函数的使用，我的态度是能不用就不用。后续计划会单独开一篇文讲如何用render函数写vue组件，这里还是基于```<template>```叙述。
## script中的JS
一个单文件组件中的script结构如下

1
2

```import```导入外部依赖，```export```导出一个对象。是的并没有什么特别，一个单文件组件最终就是导出一个对象。
vue已经为我们预先指定好了这个对象的选项（属性和方法），我们在实践中可以按需使用：

1	此外，既然它是个普通对象，当然我们也可以为它自定义属性用以满足更多需求：

这么分析来，vue帮我们做了很多事情，以至于写一个组件就像写一个填空题。我们只要搞清楚对象的每个属性的用法，然后按需填进去就好了。本文就只先将基础结构，后面会有单独的文分享填空经验～
## style中的CSS
### 可以结合sass,less等预编译语言一起使用。

1	### 可以封闭作用域

1
2

实践中，一般会将通用样式提到全局，单文件组件中的style用scope指定该组件使用的独有样式，不对外共享。
这里需要注意的是，scope只能运用在```<template>```中显式存在的tag上。

//data.js export defalut 'I'm a span';

1 2	对于上面的栗子，color-red类中的样式将不会运用到```<span>```上。 # 一个静态组件栗子

```