前端基础（ES6 模块化）

目录

前言

复习

ES6 模块化导出导入

解构赋值

导入js文件

export default

全局注册

局部注册

---

前言

前面学习了js，引入方式使用的是

js文件

const content = "模块化";
const learner = "MRJJ_9";
function learn()
{
    console.log(`${learner}在学习${content}`);
}

ES6 模块化导出导入

先导出js文件

export const content = "模块化";
export const learner = "MRJJ_9";
export function learn()
{
    console.log(`${learner}在学习${content}`);
}

简单写法，也可以写成下面这样的

解构赋值

import * as mrjj from './learn.js' 

重命名为mrjj

导入js文件

 

export default

导出一个完整的对象 export default

只能有一个export

export default{
    content : "模块化",
    learner : "MRJJ_9",
    learn()
    {
        console.log(`${this.learner}在学习${this.content}`);
    }
}

import mrjj_lr from './learnDefault.js'

需要取别名才能导入 

但在浏览器中不能使用

全局注册

局部注册

const asideVM=asideApp.mount("#aside");

先在需要导入其他组件的文件里导入组件

import Counter from './Counter.js';

在export default添加components

export default{

    components:{Counter}}