§ Fox3.0前端框架-IDE使用手册

§ 前言

Fox IDE是在VS Code的基础上进行了扩展,除了保留VS Code的优点外,还专门针对Fox前端开发提供更多便利的支持

§ 工程模板

Fox IDE提供了工程模板商店,在新建一个工程时可以选择相应的模板进行创建

enginer_template

§ 更新工程模板

点击相应的模板工程,可以进行更新或者卸载操作,如果当前版本与最新版本的版本号不一致,则会显示更新的按钮。

提示

目前在公网可以访问工程模板商店的服务,如有新的工程模板需求,项目组可以通过内网访问服务器进行上传

update_template

§ 新建工程

Fox IDE提供了图像化的脚手架,可以通过向导,选择PC、Pad和Phone模版生产基础工程

§ 步骤一:新建

new_project.png

§ 步骤二:选择工程路径,输入工程名、路由前缀、并选择模版,建立工程

  • 下图中的模板列表是从模板商店中下载出来的

  • 下图中的模板版本号与模板商店中的当前版本号是一致的

  • 路由前缀:微前端子工程时有效,路由信息中自动添加路由前缀

new_details.png

§ 初始化工程

新建工程后,我们还需要为新工程安装依赖库

在任意工程目录上,右键->安装依赖

install.png

§ 新建模块

在src/page目录上,点击右键打开菜单,选择新建模块

new_module.png

§ 新建页面

在模块目录或者业务组目录上,点击右键打开新建页面新导。

必须是在模块目录或者业务组目录上点击右键才能打开新建页面向导

new_page1.png

§ 注释备注

由于页面的目录都是英文命名,随着工程页面增多,或者长时间后,容易造成不便。因此我们提供了为模块、页面添加备注的功能,即新建页面中的页面描述字段。

new_page.png

remarks.png

§ 调试工程

在任意目录上点击右键,选择调试工程,即可将工程运行起来

debug_pro.png

§ 打包工程

在任意目录上点击右键,选择打包操作进行打包,结果输出到dist目录下

prod_pro.png

最后更新于: 4/18/2022, 3:21:38 PM