1. Oinone社区Home
  2. 前端

【前端】移动端工程结构最佳实践（v4/v5）

nation • • 前端 • 2207 views

阅读之前

你应该：

  • 了解node与npm相关内容
  • 了解lerna包管理工具的相关内容
  • 了解git仓库的相关内容
  • 了解rollup的相关内容

工程结构包示例

Vue项目结构包下载-v4.7.x
Vue项目结构包下载-v5.2.x

工程结构详解

工程结构
├── packages
│   ├── kunlun-mobile-boot
│   │   ├── package.json
│   │   ├── public
│   │   │   ├── favicon.ico
│   │   │   └── index.html
│   │   ├── src
│   │   │   ├── main.ts
│   │   │   └── shim-vue.d.ts
│   │   ├── tsconfig.json
│   │   └── vue.config.js
│   ├── kunlun-module-mobile-demo
│   │   ├── scripts
│   │   │   ├── postpublish.js
│   │   │   └── prepublish-only.js
│   │   ├── src
│   │   │   ├── index.ts
│   │   │   └── shim-vue.d.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── rollup.config.js
│   │   └── tsconfig.json
│   └── kunlun-modules-mobile-demo
│       ├── scripts
│       │   ├── build.config.js
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── packages
│       │   ├── module-demo1
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   ├── module-demo2
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   └── module-dependencies
│       │       ├── index.ts
│       │       ├── package.json
│       │       └── src
│       │           └── dependencies.ts
│       ├── lerna.json
│       ├── tsconfig.json
│       └── package.json
├── lerna.json
└── package.json

壳工程

├── packages
│   └── ......
├── lerna.json
└── package.json

壳工程仅用于将多个包进行统一安装，并通过lerna包管理工具进行相关的软链接操作。

壳工程包含了除了node和npm外其他相关的安装依赖，如lerna、rimraf等。这样可以避免由于开发环境差异带来的一系列问题。

我们建议所有开发人员均使用相同的壳工程进行开发，因此，我们有必要将其提交并推送到git远程仓库进行共享。

在壳工程目录下执行npm install命令即可完成一系列安装操作。

需要注意的是，lerna.json中定义了所有需要统一安装的子工程路径，安装前需要确认是否满足当前需要，但这些修改都应该只在本地完成，而不应该推送到git远程仓库。

安装完成后，所有公共依赖均会安装在壳工程的node_modules目录下，每个子工程的node_modules中仅包含软链接目录。并且在壳工程的node_modules目录下不会出现本地已经存在的工程依赖。

单工程包管理

├── packages
│   └── kunlun-module-mobile-demo
│       ├── scripts
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── src
│       │   ├── index.ts
│       │   └── shim-vue.d.ts
│       ├── index.ts
│       ├── package.json
│       ├── rollup.config.js
│       └── tsconfig.json
├── lerna.json
└── package.json

作为一个独立的工程，它可以是一个项目的总工程，也可以是多个项目共同使用的子工程。这也是最常见的工程包结构。

通常情况下，kunlun-module-mobile-demo工程会使用一个独立的git仓库进行管理。

通过kunlun-module-mobile-demo打包生成的@kunlun/module-mobile-demo包，将可以被发布到npm仓库或其他地方，供其他工程或项目使用。

在启动工程中的package.json中添加"@kunlun/module-mobile-demo": "~1.0.0"相关依赖进行引入。并在入口文件main.ts中导入相关的js和css相关内容。

如示例中所示：

// 按需引入
import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo.css';

import '@kunlun/module-mobile-demo';

需要注意的是，在本地开发中，css文件相关内容应该是被临时注释的，因为通过import '@kunlun/module-mobile-demo';已经将相关内容引入，无需使用打包好的css文件。

多工程包管理

├── packages
│   └── kunlun-modules-mobile-demo
│       ├── scripts
│       │   ├── build.config.js
│       │   ├── postpublish.js
│       │   └── prepublish-only.js
│       ├── packages
│       │   ├── module-mobile-demo1
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   ├── module-mobile-demo2
│       │   │   ├── index.ts
│       │   │   ├── package.json
│       │   │   ├── rollup.config.js
│       │   │   └── src
│       │   │       ├── index.ts
│       │   │       └── shim-vue.d.ts
│       │   └── module-mobile-dependencies
│       │       ├── index.ts
│       │       ├── package.json
│       │       └── src
│       │           └── dependencies.ts
│       ├── lerna.json
│       ├── tsconfig.json
│       └── package.json
├── lerna.json
└── package.json

与单工程包管理类似，多工程包管理方案为了解决整体结构复杂，并且功能需要做最小化拆分的场景。在多工程包中提供的module-dependencies作为整个工程包的总入口向外提供功能。

如示例中所示：

// 视情况按需引入
// import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo1.css';
// import '@kunlun/module-mobile-demo/dist/kunlun-module-mobile-demo2.css';

import '@kunlun/modules-mobile-dependencies';

与单工程包唯一的区别在于启动工程的导入方式有所不同，仅需通过import '@kunlun/modules-mobile-dependencies';导入所有功能即可。在总入口处将对所有子工程包进行统一的导出并且包含了对应的css相关内容。

特别的是，如果多个工程间的css样式出现冲突，但又需要依赖js文件时，css相关内容将不能在总入口处进行导入，需要放在对应的启动工程中进行导入处理。原则上，我们应该避免这种情况的发生。

启动工程

├── packages
│   └── kunlun-mobile-boot
│       ├── package.json
│       ├── public
│       │   ├── favicon.ico
│       │   └── index.html
│       ├── src
│       │   ├── main.ts
│       │   └── shim-vue.d.ts
│       ├── tsconfig.json
│       └── vue.config.js
├── lerna.json
└── package.json

作为vue项目的启动工程，它应该仅用于工程组合，即选择性的使用某几个工程进行启动。

rollup脚本简述

通过package.json构建所需工程名称

const buildName = (name) => {
  const libraryName = name.replace('@', '').replace('/', '-');
  const pathName = libraryName.substring(packagePrefix.length);
  const camelCaseName = libraryName.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
  return { libraryName, pathName, camelCaseName };
};

使用方法：

import pkg from './package.json';

const res = buildName(pkg.name);
const libraryName = res.libraryName;

转换结果：@kunlun/module-mobile-demo -> kunlun-module-mobile-demo.esm.js

多工程包构建脚本的使用

方法签名
function rollupConfig(name = '', external = [], hasSCSS = true, extendPlugins)
示例脚本
import pkg from './package.json';
import rollupConfig from '../../scripts/build.config.js';

export default rollupConfig(pkg.name, [
  'vue',
  'lodash-es',
  'vant',
  '@ant-design/icons-vue',
  '@kunlun/mobile-dependencies',
  '@kunlun/vue-ui-mobile-vant'
], false);
  • pkg.name：通过当前路径的package.json获取name属性。
  • external：打包时排除当前工程中导入的第三方包，原则上需要全部排除，否则会出现内存变量不一致的问题。
  • hasSCSS：是否进行scss编译。当使用scss时，必须开启。
  • extendPlugins：扩展插件。

Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/49.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
nation's avatarnation数式员工
0 0
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • 在前端视图添加自定义的区域块 前端

    在前端视图添加自定义的区域块

    添加自定义区域块 平台提供了一系列默认的视图布局，可以帮助开发人员快速构建出复杂的企业应用系统。当然，我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。 自定义区域块概述 平台视图布局都是通过XML配置实现的。在视图布局中，我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块，就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块，来扩展页面功能。 视图类型及相关元素 视图类型分为表格（TABLE）、表单（FORM）、画廊（GALLERY）、树形（TREE）等。不同类型的视图布局，包含的元素也有所不同。 下面是几种视图类型及其对应的元素： 表格：搜索区域、表格主体，其中表格主体包含了表格上面的动作、表格区域等部分。 表单：表单区域，包含了表单动作、表单区域等部分。 画廊：动作、卡片详细信息。 在表格页面添加自定义区域块 以下是一个示例，演示如何在表格页面顶部添加自定义区域块。 1. 修改视图布局XML 首先，我们需要修改表格视图的XML布局，添加自定义区域块元素标签。 <view type="TABLE"> <!– 这是搜索区域 –> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <!– 这是表格主体 –> <pack widget="group" slot="tableGroup"> <!– 在这里添加自定义区域块元素标签 –> <element widget="MyCustomElement"></element> <!– 这是表格上面的动作 –> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <!– 这是表格区域 –> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 在上述代码中，我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。 2. 创建自定义Vue组件 接下来，我们需要创建一个Vue组件，并将其指定为自定义元素标签MyCustomElement的模板。 <template> <div> <!– 在这里编写自定义区域块的内容 –> <p>Hello, world!</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ components: { }, props: [], setup(props) { return {}; } }); </script> 在上述代码中，我们定义了一个非常简单的Vue组件，它在页面上显示一个“Hello, world!”的文本信息。 3. 创建自定义Element Widget 为了使自定义Vue组件与XML布局文件关联起来，我们需要创建一个对应的Element Widget。 import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies'; import MyCustomElement from './MyCustomElement.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' })) export class MyCustomElementWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props) this.setComponent(MyCustomElement) return this } } 在上述代码中，我们继承了BaseElementWidget类，并在其中指定了Vue组件MyCustomElement。这样，XML布局文件中的元素标签就能够正确地与Vue组件关联起来。 4. 注册视图布局 最后，我们需要将上述代码配置注册。具体而言，我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" />…

    oinone's avatar oinone
    2023年11月1日
    3.0K00
  • Oinone平台之Router扩展 前端

    Oinone平台之Router扩展

    问题描述 在Oinone平台内置路由中，默认了三种路由 /login //默认登录页 /page //默认主逻辑页 / //根页面，会自动发起查询优先级最高的应用，并跳转 在实际的业务迭代中，我们通常有以下三种需求： 我要覆盖默认的登录页，页面我不喜欢，登录逻辑满足不了； 我要在平台上加个帮助中心； 这个路径不符合我司规范，我要自定义加前缀 接下来，我将在Oinone平台中满足以上场景 覆盖默认路径 以登录页为例 在项目目录src/main.ts下，添加自定义router import 'ant-design-vue/dist/antd.css'; import 'element-plus/dist/index.css'; import '@kunlun/vue-ui-antd/dist/kunlun-vue-ui-antd.css'; import '@kunlun/vue-ui-el/dist/kunlun-vue-ui-el.css'; import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; import interceptor from './middleware/network-interceptor'; import './field'; import './view'; import './actions'; VueOioProvider( { http: { url: location.origin, callback: interceptor }, browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, router: [{ path: '/login', widget: 'CustomLogin'}] // 用CustomLogin覆盖默认登录页 }, [] ); 定义CustomLogin, 定义方式同书籍中的自定义表单和自定义表格类似，精简版的代码为： import { RouterWidget, SPI } from "@kunlun/dependencies"; @SPI.ClassFactory(RouterWidget.Token({ widget: 'CustomLogin' })) // SPI注册，router得widget和此处的widgetshi对应的 export class CustomLogin extends RouterWidget { public initialize(props) { super.initialize(props); this.setComponent('定义的vue文件'); return this; } } 增加新的访问路径 同覆盖登录页 在router中增加路由 router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}] 定义Help，同覆盖登录页 定义个性化路径 需要再所有访问路径前统一加标识，比如添加Oinone;在项目目录下新建.env文件(若存在，可以复用)，在env文件中添加： BASE_PATH=/Oinone 修改后重启工程即可，访问/Oinone/login即可 结语 以上就是Oinone平台路由的扩展能力，在Oinone平台中，通过自定义Router达到扩展路由的能力，并通过采用env等通用配置的能力，解决批量修改路由的目的。

    oinone's avatar oinone
    2023年11月1日
    60.8K00
  • TableWidget 与 FormWidget 浅析 前端

    TableWidget 与 FormWidget 浅析

    前言：本文主要聚集于 TableWidget和 FormWidget，对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同，TableWidget与 FormWidget有着明确的目的，比如 TableWidget就是作为一个表格视图，这种名称中可以看得出来。其将表格的一系列能力聚拢，如单元格，行列选择排序，翻页等等； TableWidget 我们使用表格到底是在使用什么？ 在我们讲述渲染流程前，我们需要提一个问题，在我们使用表格组件时，我们在使用什么，换而言之，我们对表格组件中关注的是什么？应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题，让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable，如 allowRowClick,rowClickMode等等，这些值会作为 Props 传递给 DefaultTable，DefaultTable则一定意义上充当了一个桥接层，主要做了两件事，处理 Props， 处理 Slot，TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合，创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot，比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后， props与 slot会进一步交给 OioTable进行渲染，OioTable则会进一步聚合处理，比如如果没有 defaultSlot则进行空值的渲染，如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构，而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget，其负责组装 DefaultTableColumn渲染所需要的 props，然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态，不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合， Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后，不可避免的会有数据交互，比如分页，排序，过滤等，这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等，TableWidget会将事件作为 props 向下注入，当事件被调用，TableWidget会进行处理，比如发起请求，或者对内部数据排序等。而除了数据的展示，还有一些动作，即 Action ,Action 被触发时会按照内部的配置进行工作，比如编辑时，将获取 activeRecord，随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样，也是作为一个渲染模块，但是它与 TableWidget不同的是，FormWidget是作为一个表单视图，其将表单的一系列能力聚拢，如表单提交，表单校验，表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别，比如 FormWidget没有提供翻页，排序，过滤等能力，因为这些能力属于表格的能力，而 FormWidget则更关注于表单的能力。提供了数据的存储，提交，校验等能力 Form 在渲染时流程与 Table 大同小异，其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染，不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西，当页面上的控件发生变化，其变更的值会被收集到 FormData 中，并在后续中使用。同时在编辑已有数据场景下，Form 会将数据加载到 FormData，随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出，Table 侧重于数据的查询展示，Form 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

    liji2's avatar liji2
    2025年3月25日
    1.1K00
  • oio-empty-data 空数据状态 组件

    oio-empty-data 空数据状态

    何时使用 当目前没有数据时，用于显式的用户提示。 初始化场景时的引导创建流程。 API 参数 说明 类型 默认值 版本 description 自定义描述内容 string | v-slot – image 设置显示图片，为 string 时表示自定义图片地址 string | v-slot false imageStyle 图片样式 CSSProperties –

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.8K00
  • 列表页内上下文无关的动作如何添加自定义上下文 低无一体

    列表页内上下文无关的动作如何添加自定义上下文

    场景 在界面设计器，可以配置当前列表页从上个页面带的上下文参数，现在需要传递这个上下文到下个页面，设计器没有配置入口，我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文，手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }

    nation's avatar nation
    2024年8月20日
    2.3K00

Leave a Reply

Please Login to Comment