[TOC] # 3.1传统组件的问题和解决方案 1.问题 1.全局定义 的组件必须保证组件的名称不重复 2.字符串模板缺乏语法高亮， 在HTML有多行的时候，需要用到丑陋的 3.不支持 CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏 4.没有构建步骤限制， 只能使用HTML和ES5 JavaScript,而不能使用预处理器(如: Babel) 2.解决方案 针对传统组件的问题，Vue 提供了一个解决方案——使用Vue单文件组件。 # 3.2 Vue单文件组件的基本用法: 单文件组件的组成结构 ~~~ ● template 组件的模板区域 ● script 业务逻辑区域 ● style 样式区域 ~~~ ~~~ <template> <!--这里用于定义vue组件的模板内容--> </template> <script> //这里用于定义vue组件的业务逻辑 export default { data: () { return {} }，//私有数据 methods: {} //处理函数 //... 其它业务逻辑 } </script> <style scoped> /★这里用于定义组件的样式*/ </style> ~~~