开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）： 总结项目技术点（前端技术）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11561
总结项目技术点（前端技术）
内容介绍：
一、总结在线教育项目技术点
二、模块化简介
三、CommonJS 模块规范
四、ES6模块化规范
一、总结在线教育项目技术点
1.在线教育项目采用后端分离开发
后端写接口，前端写页面，页面中调用接口得到数据，然后得到显示，完成功能，此为前后端分离开发。
2.项目使用前端技术
（1）vue：主要用到 vue 中的基本语法与相关的指令。
指令常见的有 v-bind（单向绑定）、v-model（双向绑定）、v-if（做出判断）、v-for(做循环判断与操作)、v-html（将标签内容做出显示）。绑定事件表示为 v-on-click 或者@click。
（2）生命周期有两种常用的方法：created（）和mounted（），created（）表示在页面渲染之前执行，mounted（）表示在页面渲染之后执行。其中运用ES6进行规范。
（3）Elment-ui：做页面效果、列表功能（包括表单部分）都是运用Elment-ui。
（4）nodejs：是一个 JavaScript 运行环境，不需要浏览器直接运行js代码，模拟服务器效果。而现在前端代码都是在nodejs 中运行。
（5）NPM：NPM 可以理解为包管理工具，类似于 Maven。在 NPM 中常见的命令有 npm init（初始化命令）、npm install（依赖名称）。
（6）Babel：Babel 是转码器，可以把 ES6代码转换成 ES5代码。ES6代码在一些浏览器中无法使用，而 ES5没有，所以把 ES6代码转换成 ES5代码来进行执行。
Babel 简介
Babel 是一个广泛使用的转码器，可以将 ES6代码转为 ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6编写程序，而不用担心现有环境是否支持。
Babel 安装
安装命令行转码工具
Babel 提供 babel-cli 工具，用于命令行转码。它的安装命令如下:
npm install --global babel-cli
#查看是否安装成功
babel --version
（7）前端模块化：
通过一个页面或者一个 js 文件去引入另一个 js 文件，调用另一个 js 文件的方法即为模块化。
在前端模块化中，ES6的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5后再执行。Webpack 是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
相关代码如下：
</template>
<script>
//引入调用 teacher.js 文件
import teacher from '@/api/edu/teacher
export default {
//写核心代码位置
// data:{
// }，
data(){//定义变量和初始值
return {
list;null,//查询之后接口返回集合
page:1,//当前页
limit:10,//每页记录数
total:0,//总记录数
teacherQuery:{}//条件封装对象}
},
created(){ //页面渲染之前执行，一般调用 methods 定义的方法
（8）后台系统使用 vue-admin-template：基于 vue+Element-ui 的基础上运行
（9）前台系统使用 Nuxt：基于 vue 的基础上运行。在此基础上要了解服务端渲染技术。
（10）Echarts：Echarts 为图表工具。
二、模块化简介
1.模块化产生的背景
随着网站逐渐变成“互联网应用程序”，嵌入网页的 Javascript 代码越来越庞大，越来越复杂。
Javascript 模块化编程，已经成为一个迫切的需求。理根情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块，但是，Javascript不是一种模块化编程语言，它不支持”类"(class)，包(package)等概念，更遑论”模块"(module)了。
2.什么是模块化开发
传统非模块化开发有如下的缺点:
（1）命名冲突
（2）文件依赖
模块化规范:
（3）CommonJS 模块化规范
ES6模块化规范
三、CommonJS 模块规范
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
1.创建“module”文件夹
2.导出模块
创建 common-js 模块化/四则运算 js
代码如下：
// 定义成员:
const sum = functlon(a,b){
return parseInt(a)+parseInt(b)
const subtract- function(a,b)(
return parseInt(a)-parseInt(b)7 }
const multiply. function(a,b)
return parseInt(a)*parseInt(b)10}
const divide - function(a,b)(
return parseInt(a)/parseInt(b)
3.导出模块中的成员
代码如下：
// 导出成员:
module.exports ={
sum:sum，
subtract:subtract,
multiply: multiply,
divide: divide
//简写
module.exports ={
sum,
subtract,
multiply,
divide
}
4.导入模块
创建 common-js 模块化/引入模块 js
//引入模块，注意:当前路径必须写./
const m-require("./四则运算.js”) console.log(m)
const result1 =m.sum(1,2)
const result2m m.subtract(1,2)
node common-js模块化/引入模块.js
CommonJS 使用 exports 和 require 来导出、导入模块。
四、ES6模块化规范
ES6使用 export 和 import 来导出、导入模块
1.导出模块
创建 es6模块化/userApi.js
export function getList(){
console.log("获取数据列表")
}
expont functlon savel
2.导入模块
创建 es6模块化/userComponentjs
代码如下：
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save ) from "./userApi.js" getList()4 save()
注意:这时的程序无法运行的，因为ES6的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5后再执行。
3.运行程序
代码如下：
node es6模块化-dist/userComponent.js
