美文网首页
ant-sime-pro发布了,支持vue3.0,react,a

ant-sime-pro发布了,支持vue3.0,react,a

作者: attitudeLife | 来源:发表于2021-01-21 13:14 被阅读0次

    简介

    ant-simple-pro 是一款支持vue3.0reactangulartypescript等多框架支持的中台前端解决方案,ui使用antd实现的,它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,响应式设计,开箱即用,它可以帮助你快速搭建企业级中后台产品原型,不管你是vue开发者,还是react,或者angular,都能在这里找到你想要的版本。

    为什么要写ant-simple-pro???

    答:技术太菜了,以及自已是一个小码渣,有时候想系统的学习一个好点的项目,但是都是单框架技术栈的,像ui组件库就有3大框架的支持,但是却不适合新手和中级开发人员的学习,源码难度有点高,然后在看网络上也大部分是单个技术栈的项目,就算有多个的,也不是很全,因此为了锻炼自已和更好的学习前端,于是在空余时间,代码撸起来,ant-simple-pro(1.0)就诞生了。

    为什么要选用ant-design做为UI???

    • 生态,生态,生态,重要的事情说三遍,antd的生态可以说是国类UI组件生态中最强大的代表,如果当你打开antd的官网的时候,你会发现有很多相关资源,pc,桌面,mobile,自动化全部有。
    • 强大的背景 - antd的团队可以说是国类很厉害的团队之一,能进antd团队的人,实力非常的强,而且antd团队开发的产品,服务了阿里成百个项目,可以说在前端领域很有经验,在一个就是团队资金雄厚,毕竟背靠支付宝,人人都得用花呗。
    • 社区 - 可能大部分人第一次使用antd,是来至于对react的学习和了解,而且antd本身就是以react为首的UI组件,如果你没听过antd,那么一定听过react,大部分react开发者都会使用antd做为UI组件库,因为功能丰富且强大。
    • UI漂亮 - 当然这个是我个人的看法,我觉得antd比element ui要漂亮些。

    提醒

    本人并未给antd-design打广告,只是自已真心觉得比较好用,当然,element,vant等UI组件也是非常的棒的。

    前序准备

    你需要在本地安装 nodegit,异步请求数据用axios,所有的异步接口均采用node+typescript+mysql+docker实现的,本项目技术栈基于vue3.0,react,angular,typescrpt,antd等技术,所以最好先了解如下知识:

    vue

    • vue3.0的新语法,如setup,hooks等合成api
    • vue-cil,vue-router,vuex等全家桶

    react

    • react基本语法,如hooks,class创建组件,函数式创建组件等
    • react全家桶要熟悉,如react-router-dom,create-react-app,react-transition-group等
    • react数据状态库,redux,redux-saga,reselect,react-redux等
    • react在typescript下的FC模式等

    angular

    • angular的基本语法,如html模板,指令,组件等
    • angular的全家桶,如angular-cil,Rx等
    • typescript的基本语法


      搜狗截图20210108215813.png

    运行

    # 克隆项目
    git clone https://github.com/lgf196/ant-simple-pro.git
    
    # 进入项目目录
    cd ant-simple-pro
    
    # 选择你喜欢的版本
    
    # 安装依赖
    npm install
    
    # 启动服务
    npm run dev
    

    详细内容请查看文档ant-simple-pro-document

    服务端

    ant-simple-pro的服务端接口并未采用mock来模拟异步数据的,而是采用ts+node+mysql+docker等技术来自已写服务端接口的,由于ant-simple-pro的服务端接口暂时不是很复杂,所以并未采用orm框架来操作数据库,而是直接原生sql语句来写,服务端虽然不是很复杂,但是涉及到了常见业务60%以上的需求,,,,分页token,图片上传exec文档下载

    ├── public                     # 存放静态资源文件
    ├── src                        # 源代码
    │   ├── config                 # 数据库配置文件
    │   ├── controllers            # 业务层,控制器
    │   ├── interface              # ts接口
    │   ├── middleware             # 中间件
    │   ├── routes                 # 路由
    │   ├── types                  # 全局类型声明
    │   ├── utils                  # 工具函数
    │   └── index.ts               # 入口文件
    ├── .gitignore                 # git提交忽略文件
    ├── tsconfig.json              # 项目全局ts配置文件
    └── package.json               # package.json
    

    详细内容请查看文档ant-simple-pro-document

    后期版本

    • 现在的版本是1.0版本,也是一个初创版本,肯定会有很多常见的功能没有,我们会在后期的版本中不断的更新进来,像代码的质量,本项目的整体布局,我们也会在后面的版本中进行优化和修改,还希望小伙伴们不要急,耐心的等待,本项目会一直维护下去的,不用担心没人维护的问题,该项目的 bug ,大家可以去issues上题问,我们会在一个星期内,回复大家的反馈。

    • 后期版本中,ant-simple-pro的生态会新增桌面端,移动端,混合端ssr等,敬请期待。

    结语

    再次感谢永豪等为该项目做出的贡献,同时此项目虽然算不上很高大尚的项目,但是都是我们用心去编写和制作的,为了让更多的前端爱好者知道怎么去学习前端和使用最新的技术。

    创作不易,如果这个项目能帮助到你,还希望各位能去github,点个star,我们就很开心了。

    最后,祝福大家在2021年,新年快乐,牛年大吉。

    相关文章

      网友评论

          本文标题:ant-sime-pro发布了,支持vue3.0,react,a

          本文链接:https://www.haomeiwen.com/subject/zlrzaktx.html