Vue学习----第三天_模块化开发【6.4】

一、为什么需要模块化
1.JavaScript原始功能

Vue学习----第三天_模块化开发【6.4】_第1张图片

2.匿名函数的解决方案

Vue学习----第三天_模块化开发【6.4】_第2张图片
Vue学习----第三天_模块化开发【6.4】_第3张图片

3.使用模块作为出口

Vue学习----第三天_模块化开发【6.4】_第4张图片

二、CommonJS(了解)

依赖于node环境,若不是node环境,无法运行
导出:module.exports
导入:require
Vue学习----第三天_模块化开发【6.4】_第5张图片

三、ES6的export(导出)指令
1.export基本使用

Vue学习----第三天_模块化开发【6.4】_第6张图片

2.导出函数或类

Vue学习----第三天_模块化开发【6.4】_第7张图片

3.export default

注:同一模块中,只允许有一个
Vue学习----第三天_模块化开发【6.4】_第8张图片

四、ES6的import(导入)指令
1.import使用

Vue学习----第三天_模块化开发【6.4】_第9张图片

注:有的时候使用export和import会报错说要跨域,解决方案:

错误如图:
Access to script at xxx from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
aaa.js:1 Failed to load resource: net::ERR_FAILED
Vue学习----第三天_模块化开发【6.4】_第10张图片
1.安装live server插件
Vue学习----第三天_模块化开发【6.4】_第11张图片
2.在index.html中右击点击open with live server
Vue学习----第三天_模块化开发【6.4】_第12张图片

内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.4

你可能感兴趣的:(Vue,vue,vue.js,web,无监督学习)