aec-loader

#AE.JS-极致优雅的前端框架

• 简介

  想必你也不喜欢ref(),.value...
  如果我猜对了,你一定会喜欢AE.JS的
  它兼具alins的优雅格式,vue的响应式,aguilar的组件化编程,react的JSX模板 语法和springboot的声明结构
  原生支持路由
  自带ajax库

• 快速上手

  目前AE.JS只上传到了npm仓库
  使用cli工具:
  npm install -g aec-cli
ae cli create
  由于技术问题,可能创建失败

• 语法

  AE.JS使用JSX描述界面
  一个计数器的实例

  const name='组件名'
  var count=0
  function counts(){
      count++
  }
  <button onclick="count()">{{count}}</button>

  之后只需要通过如下方法注册到AE.JS中

  import Ae from 'aets'
  import 组件名 from '你的组件.jsx'
  var app=new Ae.core.AE()
  app.addComponent(组件名,路径)
  app.start(端口)

• jsx编译产物

  计数器实例的编译产物

  import Ae from 'aets'
  var count=Ae.core.ref(0)
  function counts(){
      count.value++
  }
  var $='<button onclick="count()">{{count}}</button>'
  export default {
      name: '组件名',
      data:{
          count: ref(0),
          counts: ()=>{
              count.value++
          }
      },
      $: $
  }

• 优点

  快、集众家之所长、去众家之所短、写法优雅、集成ajax和路由

• 缺点

  由学生制作、更新较慢、无法及时修复BUG ###实现原理

• 如何解析jsx

  通过webpack loader实现， 在用户import jsx文件时，loader这些文件， loader首先会获取文件的代码， 获取jsx中的html标签。 ###如何搭建本地服务器