0.0.6 • Published 11 months ago
linepatrol-mobile-client v0.0.6
af-linepatrol-mobile-web
af-linepatrol-mobile-web 是基于v4架构和react-base-client脚手架的移动端巡线项目。
关于 开发规范 请查看 开发规范
主要功能
- web前端项目示例
主要引用框架
https://ant.design/index-cn https://mobile.ant.design/zh https://umijs.org/
af-example-mobile-web模块
af-example-mobile-web
.
├── docs //项目文档
├── config
│ └── config.ts //基础配置,非必要请勿修改,https://umijs.org/docs/api/config
├── dist //打包文件输出目录
├── src
│ ├── .umi //项目启动后生成,勿动
│ ├── .umi-production //项目打包时生成,勿动
│ ├── layouts //基础布局 https://umijs.org/docs/guides/routes#%E5%85%A8%E5%B1%80-layout
│ ├── models //全局数据 https://umijs.org/docs/max/data-flow#%E5%88%9B%E5%BB%BA-model
│ ├── pages //页面
│ │ ├── index.less
│ │ └── index.tsx
│ ├── utils 工具类
│ ├── services // 推荐目录
│ ├── app.(ts|tsx) //入口文件
├── package.json
├── tsconfig.json
└── typings.d.ts
页面请放在pages目录下,建立文件夹
如何构建
- 使用最新的nodejs,npm和pnpm版本 af-example-mobile-web 使用 pnpm 来构建,最快的使用方式是将本项目 clone 到idea,然后执行以下脚本
pnpm install
pnpm run dev
如何使用
最快的使用方式是在本项目的gitlab主页点击派生
按钮,即可复制一份本项目结构
1.修改AppConfig.tsx
{
path: 'example',
key: 'example',
routes: [
{
key: 'example-testpage',
path: 'testPage',
component: '../pages/testPage',
page: page: React.lazy(()=>import('./pages/testPage')),,
},
],
};
example改为自己项目 例如
{
path: 'safecheck',
key: 'safecheck',
routes: [
{
key: 'safecheck-testpage',
path: 'testPage',
component: '../pages/testPage',
page: page: React.lazy(()=>import('./pages/testPage')),,
},
],
};
2.修改ImageConfig.ts用来设置每个页面的图标 没有可不设置 最外层页面图标必须设置
export default {
example: {
testPage: require('./assets/icon/流程监控.png'),
},
};
example改为自己项目 例如
export default {
safecheck: {
testPage: require('./assets/icon/流程监控.png'),
},
};
3.修改index.ts
export default {
ExampleAppConfig: AppConfig,
ExampleImageConfig: ImageConfig,
};
修改名称,仅为区分在打包项目中的引入
export default {
SafeCheckAppConfig: AppConfig,
SafeCheckImageConfig: ImageConfig,
};
4.修改package.json中模块名称