1. Oinone社区Home
  2. 前端

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

nation • • 前端 • 2432 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

相关推荐

  • oio-pagination 分页 组件

    oio-pagination 分页

    API 参数 说明 类型 默认值 版本 currentPage(v-model:currentPage) 当前页数 number – defaultPageSize 默认的每页条数 number 15 disabled 禁用分页 boolean – pageSize 每页条数 number – pageSizeOptions 指定每页可以显示多少条 string[] [’10’, ’15’, ’30’, ’50’, ‘100’, ‘200’] showQuickJumper 是否可以快速跳转至某页 boolean false showSizeChanger 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true boolean – total 数据总数 number 0 事件 事件名称 说明 回调参数 change 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 Function(page, pageSize) noop

    汤乾华's avatar 汤乾华
    2023年12月18日
    2.0K00
  • 从一个方法开始：浅析页面渲染流程 前端

    从一个方法开始：浅析页面渲染流程

    渲染前的准备 渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。 渲染的起步 OioProvider 方法是整个应用的入口，我们忽略掉一些配置方法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用， 渐入佳境 DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，1:提供 Mask 的渲染2:提供元数据上下文初始化 该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，在初始化后，会将获取到的数据注入到 MetadataViewWidget中， Mask 的渲染 关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中 数据的变更 当上面两件任务完成后，将开始主视图的渲染，上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染， MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新, 主视图的渲染 MultiTabContainerWidget继承自MetadataViewWidget，当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上， 渲染整个页面 当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息， const currentSlots = computed<Slots | undefined>( () => DslRender.fetchVNodeSlots(props.dslDefinition) || (Object.keys(context.slots).length ? context.slots : undefined) ); const renderWidget = createCustomWidget(InternalWidget.View, { …context.attrs, type: props.type || viewType.value, template: props.dslDefinition, metadataHandle: props.metadataHandle || metadataHandle.value, rootHandle: props.rootHandle || rootHandle.value, parentHandle: props.parentHandle || parentHandle.value, slotName: props.slotName, inline: inlineProp } as ViewWidgetProps); 生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数， export function createCustomWidget( widget: string, props: CustomWidgetProps ): RenderWidget | undefined public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]):…

    liji2's avatar liji2
    2025年3月19日
    1.0K00
  • oinone的rsql与传统sql语法对照表 前端

    oinone的rsql与传统sql语法对照表

    rsql sql 描述 field01 == "name" field01 = "name" 等于 field01 != "name" field01 != "name" 不等于 field01 =gt= 1 field01 > 1 大于 field01 =ge= 1 field01 >= 1 大于等于 field01 =lt= 1 field01 < 1 小于 field01 =le= 1 field01 <= 1 小于等于 field01 =isnull=true field01 is null 字段为null field01 =notnull= 1 field01 is not null 字段不为null field01 =in= ("foo") field01 in ("foo") 多条件 field01 =out= ("foo") field01 not in ("foo") 不在多条件中 field01 =cole= field02 field01 = field02 字段作为查询参数 field01 =colnt= field02 field01 != field02 字段作为查询参数 field01 =like="foo" field01 like "%foo%" 全模糊匹配，rsql语法中无需拼接通配符”%“ field01 =starts="foo" field01 like "foo%" 前缀模糊匹配，rsql语法中无需拼接通配符”%“ field01 =ends="foo" field01 like “%foo" 后缀模糊匹配，rsql语法中无需拼接通配符”%“ field01 =notlike="foo" field01 not like "%foo%" 全模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =notstarts="foo" field01 not like "foo%" 前缀模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =notends="foo" field01 not like “%foo" 后缀模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =has=(ENUM_NAME1, ENUM_NAME2) 有多值枚举中的几个值 field01 =hasnt=(ENUM_NAME1,ENUM_NAME2) 没有多值枚举中的几个值 field01 =bit=ENUM_NAME1 有二进制枚举中的单个值 field01 =notbit=ENUM_NAME1 没有二进制枚举中的单个值 前端代码中使用工具类拼接rsql 该工具类在oinone的前端基础框架中提供 import { Condition } from '@kunlun/dependencies'; const rsqlCondition = new Condition('field01').equal('foo') .and(new Condition('field02').in(['bar'])) .and(new Condition('field03').notIn(['foo'])) .or(new Condition('field04').greaterThanOrEuqalTo(12)) .or(new Condition('field05').like('foo')) .or(new Condition('field06').notStarts('bar')) .or(new Condition('field07').isNull()) .or(new Condition('field08').notNull()) .and(new Condition('field09').bitEqual('BIT_ENUM_1')) .and(new Condition('field10').bitNotEqual('BIT_ENUM_2')) .and(new Condition('field11').has('ENUM_NAME_1')) .and(new Condition('field12').hasNot(['ENUM_NAME_2', 'ENUM_NAME_3'])); const rsqlStr = rsqlCondition.toString();…

    oinone's avatar oinone
    2023年11月1日
    4.6K00
  • 如何通过浏览器开发者工具提高调试效率 前端

    如何通过浏览器开发者工具提高调试效率

    1.通过vue devtool查看vue组件和oinone组件的信息 平台字段、动作、视图组件都是以Widget结尾的，可以通过关键字快速找到组件 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后，可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑

    nation's avatar nation
    2024年9月9日
    2.6K00
  • 如何自定义表格单元格样式 低无一体

    如何自定义表格单元格样式

    介绍 OinOne的表格是基于Vxe-Table实现的，我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义，通过设置 cellClassName、headerCellClassName、rowClassName …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 单元格动态样式 行的动态样式、单元格动态样式，表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 示例代码 这里仅演示cellClassName和cellStyle，其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览

    nation's avatar nation
    2024年10月30日
    1.7K00

Leave a Reply

Please Login to Comment