这个是我的本科毕业设计,也算是对自己的大学前端知识的一个汇总。毕业快乐!
介绍
ibag是一个可视化的、快速的、可定制化的前端脚手架!目前已支持React
和Vue
。
为什么要用ibag
对于很多前端开发者,创建一个React/Vue项目后,需要引入一些其他辅助库,如ESlint、Mocha等等,在安装完依赖后,还需要根据相应地文档创建某些配置文件或写相关脚本等等,ibag将以上的流程整合自动化起来,开发者可以自由地根据自己的需求,在可视化的Web页面上勾选辅助库的选项,剩下的就交给ibag吧!
特性
- 可视化:拥有一个独立的Web UI界面,且支持多语言。
- 快速的:大量节省开发者频繁安装依赖和修改代码的过程。
- 可定制化的:在配置项中可自由地选择自己需要的依赖库。
- 兼容性:支持
Mac OS
、Windows
系统。 - 多功能:支持引入UI库、路由、状态管理工具、单元测试框架、端到端测试框架、代码格式化工具等。
演示
截图:
视频:
https://1heng-files.oss-cn-beijing.aliyuncs.com/ibag_guide_video.mp4
安装
安装全局依赖
ibag需要gatsby
运行Web页,concurrently
可以更清晰地显示当前的运行过程。
npm i concurrently gatsby -g
安装ibag
npm i ibag -g
如果安装成功,可以通过命令ibag -h
看到提示信息。
使用
恭喜安装完成!现在开始使用ibag吧!
执行下面的命令会弹出一个网页,然后按照跟着引导一步步构建你的初始化项目吧!
cd my-project
ibag init
当点击"开始生成"按钮后,终端的执行目录下会输出一个"output"目录。
祝贺!你已经得到了您定制的初始化项目了!然后按Ctrl+C或Command+C两次退出当前的两个进程。
如果网页没有弹出来,请手动从终端中复制URL到浏览器中,某些命令会被一些安全软件拦截,如果弹出相关提示请允许执行。
!> 如果需要重复运行ibag init
,尽可能请先删除当前的output目录,能够最大程度保证ibag正常执行。作者认为,删除这种"危险"的操作,不应该由脚本程序进行执行,以防止造成不可挽回的损失。
启动您构建的项目
react
cd output
npm i
npm run start
vue
cd output
npm i
npm run serve
你也可以在package.json
里找到其他脚本的执行方式。例如,如果你选装了eslint
,则script
属性里会有一个代码格式化的命令lint
。
协议
MIT