Vue的组件文件由三部分组成：
<template>：HTML代码
<script>：业务逻辑
<style>：样式
在<script>标签内部暴露组件的属性及方法：
<template>
<div>
<h1>登录组件{{msg}}</h1>
</div>
</template>
<script> export default { // 组件中的data必须为一个方法 data() { return { msg: "Hi" }; }, methods:{ sayHello() { console.log("Hello"); } } } </script>
<style> </style>
暴露成员：
Webpack可识别两套导入模块及暴露成员的方式
一套是ES6的语法 另一套是Nodejs的语法 此两种方式不能混用
即 要么使用Node语法 要么使用ES6语法
Node语法：
在Node中 可以使用var 名称=require(“模块标识符”)来导入模块
使用module.exports和exports这两个关键词来暴露成员
ES6语法：
在ES6中通过规范的形式规定了在ES6中如何导入模块
import 模块名 from "模块标识符" 或 import "标识路径"
使用export default和export这两个关键词来向外暴露成员
例：
export default{
name:"陈涛",
age:18
}
除了直接暴露之外 还可用任意变量来接收
var info={
name:"陈涛",
age:18
}
export default info
在一个模块中 export default只允许向外暴露一次
否则会报错
除了export default之外
export也可暴露成员：
var info={
name:"陈涛",
age:18
}
export default info
export var title="Rabbit"
export var content="This is a Rabbit"
且在一个模块中 既可以使用export 也可同时使用export default来暴露成员
此举的目的是 为了能在一个模块中暴露出多个成员
因为export可以暴露多个成员 但export default只能暴露一个成员
接收成员：
只能通过花括号的形式来接收以export暴露的成员
且接收的名称必须和暴露时的名称严格对应(否则这么多成员怎么知道是哪一个…)
但以export default暴露的成员在接收的时候可以任意起名 因为default的只有一个
此方式叫做【按需导出】 即 按照需要导出成员
其意义在于：若不需要某些成员 则不在花括号中定义即可不导入
多个花括号里的成员之间用逗号分隔
import info,{title,content} from "./test.js"
console.log(info)
console.log(title)
console.log(content)
还可给花括号中的名称起别名：
import info,{title as t,content as c} from "./test.js"
console.log(info)
console.log(t)
console.log(c)
但export default的名称不能起别名
总结：
为方便记忆 可以将export default看作是一个特殊的暴露成员的关键字
export default只能有一个 并且在接收的时候名称是默认的(default) 因此不能起别名
而export可以有很多个 放置于花括号内 且能起别名
