② vue-cli

如何把每个组件分离到具体的文件中：模块化开发

1 单文件组件

001 后缀名 .vue【文件包含html+css+js】浏览器不支持.vue文件和es6的模块化开发

002 编译：webpack

2 vue-cli【规范化代码】

2.1 vue-cli是一个vue的脚手架，可以快速构造项目结构

2.2 vue-cli本身集成了很多项目模板

• 001 创建项目

• 002 热更新：当文件有修改时，页面会自动刷新，是因为websocket的作用

• 003 webpack

• 004 支持commonjs

• 005 支持ESModule

2.3 安装脚手架vue-cli

• npm i -g @vue/cli

2.4 创建项目

• vue create myName

3 模块化开发规范：ESModule ES6

3.1 基本特点

• 001 每一个模块只加载一次，并执行一次，再次加载同一文件，直接从内存读取；

• 002 每一个模块内部声明的变量都是局部变量，不会污染全局变量；

• 003 通过export导出模块，通过import导入模块

• 004 ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export

3.2 前端模块化开发

3.2.1 导出 export function | var | let | const | class | default | {}

• default为模块指定默认输出，这样就可以在使用import的时候，不必知道所要加载的变量名或函数名

• 001 往模块对象中写入属性

• 002 as关键字： 重命名　　export { show as showName };

• 003 *作为中转模块导出，把某个模块的所有属性|方法导出　　export * from './md.js'

var myName = 'David';
var age = 18;
// 多次export
export { myName };
export let gender = 'man';
export function show() {
  console.log(666);
}

3.2.2 导入import xx from <url> 【url仅支持相对路径|绝对路径】

• 001 从模块对象中读取属性 import { myName } from './base.js';

• 002 as关键字：修改变量名 import { myName as username } from './base.js';

3.2.3 在ESModule中有一个重要的模块对象

• export ---> 写入 ---> 模块对象 ---> 读取 ---> import

3.3 如何查看模块对象： import * as all from

4 单文件组件

4.1 编译原理

• 001.vue就是一个组件

• 002 文档中的