模块化开发
传统开发模式的主要问题
1.命名冲突 2.文件依赖
解决方案：
模块化就是把单独的一个功能封装到一个模块(文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
模块化开发的好处:
方便代码的重用，从而提升开发效率，并且方便后期的维护
ES6模块化规范中定义:
- 每个js文件都是一个独立的模块
- 导入模块成员使用import关键字
- 暴露模块成员使用export关键字
一、默认导出导入
1.1、默认导出
默认导出语法：export default 默认导出的成员
1.2、默认导入
默认导入语法：import 接收名称 from '模块标识符'
注意：
1、这里的接收名称可以任意声明
2、一个文件中只能有一个默认导出
二、按需导出导入
2.1、按需导出
按需导出语法实例：export let a = 10;
let b = 11; export {b};
2.2、按需导入
按需导入语法实例：import {a} from '模块标识符'
2.3、起别名
使用as起别名
注意：
1、这里的导入名要和导入名称一致。
2、导出导入要使用{}
3、可以使用多次按需导出
三、直接导入并执行模块的代码
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。
没有什么需要暴露的成员，想在模块化形式下直接使用
import '模块标识符'
Vue单文件组件
一、传统组件的问题和解决方案
问题 ：
- 全局定义的组件必须保证组件的名称不重复
- 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的
- 不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏
- 没有构建步骤限制，只能使用HTML和ES5 JavaScript,而不能使用预处理器（如:Babel)
解决方案 针对传统组件的问题，Vue提供了一个解决方案——使用Vue单文件组件。
二、Vue单文件组件的基本用法
2.1、单文件组件的组成结构
- template组件的模板区域
- script业务逻辑区域
- style样式区域
<template>
<!-- 这里用于定义Vue组件的模板内容 -->
</template>
<script>
// 这里用于定义组件的业务逻辑
export default {
//私有数据
data(){
return {}
},
methods:{
//处理函数
}
}
</script>
<style scoped="scoped">/* 这里用于定义组件的样式
scoped防止组件之间的样式冲突*/
</style>