ES6模块开发+单文件组件

模块化开发

传统开发模式的主要问题

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>