企业公众号怎么制作,济南seo优化外包服务,网站建设与管理相关工作岗位,详情页尺寸Bigfish 企业级前端开发框架#xff0c;与常见的前端框架和工具不同#xff0c;它从工程角度集成了各类功能#xff0c;从初始化开发到最终上线整套技术方案#xff0c;解决了前端开发经常遇到的前端技术栈整合配置麻烦、开发联调麻烦、前端资源发布上线麻烦三大痛点。
Bi…Bigfish 企业级前端开发框架与常见的前端框架和工具不同它从工程角度集成了各类功能从初始化开发到最终上线整套技术方案解决了前端开发经常遇到的前端技术栈整合配置麻烦、开发联调麻烦、前端资源发布上线麻烦三大痛点。
Bigfish主要具备以下功能
基于 umi 整合了前端工具链整合了 Ant Design、Dva、Ant Design Pro 技术栈最小化成本开发
简化开发联调提供前端 http 接口的代理在开发过程中随时切换 mock 和联调接口方便自测和联调
一站式发布部署从工程初始化到研发迭代管理到一键发布静态资源及页面渲染
安装 想要使用bigfish首先需要安装版本正确的NodeJS和tnpm然后到我们要创建bigfish的目录执行
tnpm install 通过这样安装我们就可以使用bigfish的命令来开发和调试了他的命令都存放在一个package.json文件中
命令 我们使用bigfish从开发到调试基本都是通过命令行来实现的所以下面介绍一些常用的命令
tnpm run dev : 启动本地开发模式并启动应用通过这种方式启动项目在修改文件之后不需要重复启动除非你是修改了modelconfig等配置文件
tnpm run devs : 启动前后端联调模式通过config.js中的配置找到后端的服务器进行前后端的联调
tnpm run test : 执行单元测试
tnpx bigfish -v : 查看当前正在执行的bigfish的版本
配置 bigfish中我们通过config/config.js这个文件进行配置我们在本地的时候可以设置config/config.local.js它会覆盖上一个文件起到本地调试的配置作用。为了让下面的介绍更加直观我们直接看配置文件的例子并给出注释
import pageRoutes from ./router.config; import defaultSettings from ../src/defaultSettings; export default { // 应用类型有三个可添项 // console 控制台中台应用从 bigfish 1.0 迁移过来的应用请填写该项 // h5移动端 h5 应用 // site静态站点类应用 appType: console, // 部署模式有下面多个可添项 // bigfishweb通过 site 对内站点应用bigfishweb部署 // assets适配 Basement 中的 标准前端应用assets 应用类型 // sofa适配 Bigfish 的 SOFA 集成部署模式 // chair适配 Bigfish 的 Chair 集成部署模式 // offline离线 h5 应用的部署模式 // online在线 h5 应用的部署模式 // custom自定义部署模式该模式下只会把产物构建到 dist 目录后续操作可以自定义 deployMode: sofa, // 你可以通过该配置配合 BIGFISH_ENV 满足部分一套代码多处部署的差异性需求 userConfig: { // ... } // 用于配置接口的代理, target 是指后台服务地址 proxy: { dev: { api/: { target: http://xxx.alipay.net, headers: { Host: xxx.alipay.net, } } }, test: { api/: { target: http://xxx.alipay.net } }, pre: { api/: { target: ningzhen } } }, // 路由配置 // 路由配置参考如下示例基于 react-router 实现支持路由嵌套 // 这个 exports.router 是一个 jsoncomponent 对应的字符串是 src/page/\* 的文件夹名称 routes: { path: /, component: LayoutPage, indexRoute: { component: IndexPage }, childRoutes: [ { path: /userlist, component: UserListPage }, { path: /user/:id, component: UserPage }, { path: /user2/:id, redirect: /user/:id }, ], }, // 主题 theme: { primary-color: defaultSettings.primaryColor, }, // 国际化配置 locale: { enable: true, }, // 设置 html 的 favicon url 地址 favicon: https://xxx.alipayobjects.com/zos/rmsportal/uLsFenYjfFtKMzBaUpeS.png, // 默认是 false设置为 true 之后发出的请求都会默认带上 ctoken。 // 注意前提是你必须使用 bigfish 内置的网络请求的方案 alipay/bigfish/sdk/fetch 或者 alipay/bigfish/sdk/request。 ctoken: true, // 通过 script 和 externals 配置提高构建速度和减小构建产物的体积 // 如果你没有用到图表中的 data-set 可以去掉下面相关代码 // 原 assets 应用因为没有引入 bigfish 的 html所以需要手动添加 script 到 vm 中 //推荐升级 assets 到新版直接引入 bigfish 的方案解决 script: [https://xxx.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js], externals: { antv/data-set: DataSet, }, // 在有的浏览器中因为浏览器的原因有些 JS 的特性可能没有 // 比如 IE 不支持 Promise这样可能会导致项目运行时出错 // 但是你的项目有兼容性的需求需要支持该部分浏览器 // 那么你可以通过配置 targets 来添加相关的 polyfills 用以支持更多浏览器 // 下文表示额外支持ie11 targets: { ie: 11, } }; 路由 路由是一个数组数组中每一个对象是一个路由信息路由会从前到后匹配
可以在路由中使用属性routes继续用嵌套的方式匹配其他的路由
使用属性indexRoute将当前的路径默认设置为展示某个component。或者在属性indexRoute中可以使用redirect重定向属性指向某一个路径
使用history.push的方法在组件中跳转到指定路由
组件中可以通过props的属性params和location获取路由相关的参数
可以通过Link标签在html中进行页面跳转外部链接使用a标签
history.push(/your/url/path); // 跳转到指定路由‘ // 带参数跳转到指定路由 history.push(/list?ab); history.push({ pathname: /list, query: { a: b, }, }); history.goBack(); // 跳转到上一个路由 /path/:id /path/123?typetest this.props.params { id: 123 } this.props.location { pathname: /path/123, search: ?typetest } import { Link } from alipay/bigfish/sdk/router; Link to/your/pathlink name/Link 转载https://blog.csdn.net/QuinnNorris/article/details/84852231
