5.单文件组件

传统组件的问题和解决方案

问题：

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\
3. 不支持css意味着当HTML和JS组件化的时候，css明显被遗漏
4. 没有构建步骤限制，只能使用HTML和ES5 javaScript，而不能使用预处理器（如：babel)

单文件组件的组成结构

/*
	template组件的模板区域

	script业务逻辑区域

	style 样式区域

*/

<template>
	//这里定义vue组件的模板内容
</template>

<script>
	//这里定义vue组件的业务逻辑
    export default {
        data: () {return ()} //私有数据
        methods: {} //处理函数
    }
</script>
<style scoped> //scoped防止样式之间的冲突
	//这里定义组件的样式
</style>

在webpack项目中使用vue

1. 运行npm i vue -S安装vue
2. 在src->index.js入口文件中，通过import Vue from ‘vue’ 来导入vue构造函数
3. 创建vue的实例对象，并指定要控制的el区域
4. 通过render函数渲染app根组件