Ice飞冰
文章平均质量分 73
前端imber
我是imber,一名前端开发工程师
展开
-
微前端 icestark《理论篇》
微前端 icestark框架应用#通过模板快速创建一个微前端的框架应用:$ npm init ice icestark-framework @icedesign/stark-layout-scaffold$ cd icestark-framework$ npm install$ npm start如果不是通过模板创建,添加插件 build-plugin-icestarknpm i --save-dev build-plugin-icestark应用入口 src/app.ts 中配置框架应原创 2021-08-18 15:02:42 · 1144 阅读 · 0 评论 -
Ice飞冰页面配置&菜单配置&日志打印&环境配置《六》
页面配置框架为页面级组件提供了一些特殊的配置项,让页面级组件可以快速拥有一些能力。页面滚动#scrollToTop:用于渲染页面前是否需要将当前页面滚动至顶部,这个配置用于嵌套路由的应用场景。const HomePage = () => { return ( // jsx code... )}HomePage.pageConfig = { scrollToTop: true}pageConfig可以配置权限菜单配置headerMenuConfig 和 a原创 2021-08-18 10:16:04 · 922 阅读 · 0 评论 -
Ice飞冰《配置总结》
根据公司项目使用的配置对应着官网做一个总结,下面复制部分公司项目用作学习及参考应用入口:app.tsx中appConfig中appapp: { rootId: 'ice-container', addProvider: ({ children }) => ( <LocaleProvider locale = {locale} > {children} < /LocaleProvider>), getInitialData.原创 2021-08-17 15:47:58 · 1564 阅读 · 0 评论 -
Ice编写组件&样式方案&数据请求&状态管理《五》
编写demo组件:React Hooks#在编写组件过程中,我们会经常用到 React Hooks,除了 React 内置的 useState, useMemo 等 Hooks,我们结合大量实践沉淀了一套 ahooks 的解决方案,可以减少很多重复编码工作。比如当我们需要监听并操作 url query,就可以直接使用 useUrlState 这个 hooks:import React from 'react';import { useUrlState } from 'ahooks';expor原创 2021-08-17 15:47:18 · 407 阅读 · 0 评论 -
Ice飞冰目录结构&应用入口&工程配置&路由配置《四》
建一个icestark微前端项目的情况下,来看这些配置(搬官网)目录结构:├── .ice/ # 运行时生成的临时目录├── build/ # 构建产物目录├── mock/ # 本地模拟数据│ ├── index.js├── public/│ ├── index.html # 应用入口 HTML│ └── favicon.png # Favicon├── src/ # 源码│ ├── components/ # 自定义业务组件│ ├── layouts/ # 布局组件│ ├─.原创 2021-08-10 14:33:25 · 1600 阅读 · 4 评论 -
Ice飞冰注意问题和可视化组件《三》
Ice飞冰注意问题和可视化组件:这篇文章先说点坑,最后讲Ice可视化最主要的两功能明确个东西:Fusion与Ice更配注意:可视化配置组件功能已被删除(个人觉得,每个项目需求不一样,具体配置这个功能虽然强大,但没必要这么复杂),使用区块组装页面这个功能就够用了注意:react-router一定要下载注意:ESlint太严格、Prettier - Code formatter和我自己使用的Beautify冲突,所以ESlint和Beautify这两个插件都被我禁用了注意原创 2021-08-09 15:31:01 · 544 阅读 · 0 评论 -
Ice飞冰初始化《二》
GUI初始化项目:下载好AppWorks创建应用也可以自己新建物料寻找物料、以及自己开发物料如:https://appworks.site选择了PC WEB练手填好名称和目录、然后完成创建项目或者cli初始化项目:配置history路由:注意,虽然配置文件为build.json,但是配置history在app.tsx里面const appConfig: IAppConfig = { app: { rootId: 'ice-containe原创 2021-08-07 11:30:25 · 494 阅读 · 0 评论 -
Ice飞冰理解《一》
定位:基于 React 的渐进式研发框架特性 ????#???? 开箱即用的工程能力:TypeScript/Webpack5/样式方案/Mock/…???? 贴合业务的最佳实践:目录规范、代码规范、路由方案、状态管理、数据请求等???? 多种应用模式:支持 SPA、MPA,同时完备支持服务端渲染(SSR)???? 强大的插件能力:官方所有能力都通过插件实现,业务可以通过插件扩展各种能力???? 丰富的领域方案:微前端解决方案 icestark、Serverless 一体化方案、React Ho原创 2021-08-07 11:22:25 · 605 阅读 · 0 评论