⑤ vue-cli

111

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

1 单文件组件

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

编译：webpack

2 vue-cli【规范化代码】

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

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

1. 创建项目

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

3. webpack

4. 支持 commonjs

5. 支持 ESModule

2.3 安装脚手架 vue-cli

• npm i -g @vue/cli

2.4 创建项目

• vue create myName

3 模块化开发规范：ESModule ES6

3.1 基本特点

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

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

3. 通过 export 导出模块，通过 import 导入模块

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

3.2 前端模块化开发

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

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

1. 往模块对象中写入属性

2. as 关键字： 重命名 export { show as showName };

3. * 作为中转模块导出，把某个模块的所有属性|方法导出 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 仅支持相对路径|绝对路径】

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

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

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

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

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

4 单文件组件

4.1 编译原理

1. .vue 就是一个组件

2. 文档中的 <template> 直接绑定在组件中，编译时直接写入组件 render 函数中

3. 组件名即文件名

4. 引入时仅引入配置参数

4.2 export default {}

• defaule 允许改名，引入的组件注册为局部组件

4.3 写在组件的 data 要是函数类型 ---> 复用

4.4 如何实现事件总线：新创建文件

• tip: TodoList

• 在每个 vue 文件中，导入模块之后，要将其添加到当前组件的局部组件中

<template>
  <div id="app">
    <TodoList></TodoList>
  </div>
</template>
<script>
//导入组件
import TodoList from './components/TodoList.vue';
// 导出当前组件配置选项
export default {
  name: 'app',
  data(){
    return {
      username:'David'
    }
  },
  components: {
    TodoList
  }
}
</script>
<!-- 设置具有组件作用域的样式 -->
<style scoped>
  h1 { color: #58bc58; }
</style>

tip: vue-cli 不能使用 console.log()
变量声明未使用会报错 --> 修改配置环境 rules