学习到这里,我体会到了一寸光阴一寸功。
就是之前学 Vue 的时候,一些 npm 相关的学习,如果我知道怎么操作,那么到这里其实我就不用重复学习了,继续往下学,学习还是靠积累。
✔1.node.js初体验windows ✔2.commonjs-回顾ES6模块化 |
|
commonjs的语法介绍 commonjs和ES6 Module的区别 为何要使用模块化(离组件化学习还有一段距离,加油) |
|
ES6 Module的模块化
export ... 或 export default ... import ... from ... 一般用于前端开发
上面这些内容我之前在看公司前端的代码时见过,混了个脸熟,但具体是怎么用的,我没用过,下文可能会讲。
演示 ES6 Module
npm i @vue/cli -g vue create es6-module-test # 后面一路回车 cd es6-module-test npm run serve
启动服务访问首页:
文件位置:…/jyb-code/es6-module-test/src/utils.js
function sum(a,b){ return a + b } export default sum
文件位置:…/jyb-code/es6-module-test/src/App.vue
... import sum from './utils' export default { name: 'App', components: { HelloWorld }, mounted(){ const res = sum(10,20) console.log(res) } }
运行结果:
上面代码解读:
通过 export default来输出内容。然后通过import的方式来去引用这个内容。
玩法升级:
文件位置:…/jyb-code/es6-module-test/src/utils.js
export function sum(a,b){ return a + b } // export default sum export function test(){ console.log('和只是为了好玩一起在慕课网学习') }
文件位置:…/jyb-code/es6-module-test/src/App.vue
... import {sum,test} from './utils' export default { name: 'App', components: { HelloWorld }, mounted(){ const res = sum(10,20) console.log(res) test() } }
运行结果:
到这里,通过编码,我明白了 export 和 import 是怎么玩的。