目标:
能够知道有哪些模块化的相关规范
能够使用webpack
能够使用Vue单文件组件
能够使用Vue脚手架
能够使用Element-UI
目录:
模块化相关规范
webpack用法
Vue单文件组件
Vue脚手架
Element-UI的基本使用
1、模块化相关规范
1.1、模块化概述
传统开发模式的主要问题
命名冲突
文件依赖
通过模块化解决上述问题
模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。
模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。
1.2、浏览器端模块化规范
AMD
Require.js(http://www.require.cn/)
CMD
Sea.js(https://seajs.github.io/seajs/docs/)
1.3、服务器端模块化规范
Commonjs
模块分为单文件模块与包
模块成员导出:module.exports和exports
模块成员导入:require('模块标识符')
1.4、大一统的模块化规范-ES6模块化
在ES6模块化规范诞生之前,JavaScript社区已经尝试提出了AMD、CMD、Commonjs等模块化规范。
但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
AMD和CMD适用于浏览器端的JavaScript模块化
Commonjs适用于服务器端的JavaScript模块化
因此,ES6语法规范中,在语言层面上定义了ES6模块化规范,式浏览器与服务器通用的模块化开发规范。
ES6模块化规范中定义:
每个js文件都是一个独立的模块
导入模块化成员使用import关键字
暴露模块化成员使用export关键字
1.5、ES6模块化的基本语法
默认导出与默认导入
默认导出语法export default默认导出的成员
//当前文件模块为ml.js //定义私有成员a和c let a = 10 let c = 20 //外界访问不到变量d,因为它没有暴露出去 let d = 30 function show(){} //将模块中的私有成员暴露出去,供其他模块使用 export default{ a, c, show }
默认导入语法import 接收名称 from '模块标识符'
//导入模块成员 import ml from './ml.js' console.log(ml) //打印输出结果为: //{a:10,c:20,show:[Function:show]}
注意:每个模块中,只允许使用唯一的一次export default,否则会报错!