Das Front-End Web 快速上手

步骤总览

使用vite创建开发仓库

代码入口引入@das-fe/web来创建应用

vite配置文件引入@das-fe/cli的插件配置

使用@das-fe/cli增加自定义调试和打包脚本

调试

添加业务模块（页面）

打包

嵌入达实AIoT平台

示例项目仓库地址：https://github.com/das-fe/web-example.git

示例项目在线预览：https://das-fe-web-example.vercel.app

一、使用vite创建开发仓库

搭建项目总体项目的技术栈为：pnpm+vite+vue3.3+typescript5，创建项目时需要注意选项。

打开 https://vitejs.dev/guide 查看指引，这里使用pnpm来创建项目；打开命令行键入：

$ pnpm create vite

选择最后如下：

二、代码入口引入@das-fe/web来创建应用

项目创建完成之后，创建的为SPA单页应用，代码入口路径是src/main.ts。在代码入口文件修改创建应用的方式，引入@das-fe/web来创建引用。可以安装依赖后，再修改代码入口。

安装依赖，命令行依次键入以下两行代码：

pnpm i

pnpm add @das-fe/web @das-fe/ui vue-router

修改入口代码，创建das-fe的应用，修改后的代码如下

修改App.vue增加router-view标签为后续增加路由页面做准备，App.vue template中增加的标签如下：

...
<router-view></router-view>
...

为了整体es module能正常使用，package.json中设置type属性为module。

三、vite配置文件引入@das-fe/cli的插件配置

项目创建完成之后，项目根目录下会有一个vite.config.ts文件，我们需要修改这个文件，可以把项目变成das-fe的微前端子应用或者独立部署。修改之前需要安装@das-fe/cli来支持修改。

安装依赖，命令行键入以下代码：

pnpm add @das-fe/cli

修改vite.config.ts文件，修改后的代码如下：

四、使用@das-fe/cli增加自定义调试和打包脚本

das-fe的前端应用需要一些自定义脚本收集代码内如来增加开发的体验，例如类型提示和css变量提示等；对于大型项目，碎片化的代码收集加上vite的按需加载会导致调试编译缓慢，增加自定义脚本也能加快调试速度。

创建脚本之前需要安装一些依赖，命令行键入以下代码：

pnpm add @das-fe/cli concurrently -D

在项目中创建das-fe调试脚本，路径为scripts/dev/das-fe.js。脚本内容为：

在项目中创建调试脚本，路径为scripts/dev/index.js。脚本内容为：

在项目中创建das-fe打包脚本，路径为scripts/build/index.js。脚本内容为：

在package.json中完善dev和build命令。修改后的内容如下：

五、调试

代码入口和vite配置以及自定义脚本都配置好可以启动调试。命令键入以下代码即可启动调试服务：

pnpm run dev

启动成功后如下图：

调试服务启动成功之后，接下来可以开始按照das-fe的模块开发规范来增加模块（业务页面）。

六、添加业务模块（页面）

模块规范

为了业务模块的开发更顺畅，并且符合整体框架“高内聚、低耦合、可插拔”的设计思路，需要遵循一定的模块开发规范。规范制定过程中框架也做了很多封装，使得业务模块的开发会更简单高效，并且可插拔，说人话就是，即使把这个模块整个删除拿掉，也不会对系统的整体运行造成影响。要实现这个“高内聚、低耦合、可插拔”的要求，模块开发规范如下：

模块的存放位置：规定为src/views下的一级子文件夹，如：scr/views/demo

模块的路由配置：规定为模块目录下的router.ts文件，内容遵循vue-router的路由记录配置，详情见：https://router.vuejs.org/zh/guide/。先创建一个路由挂载的文件，例如app.vue，完整的配置例子如下：

模块的国际化配置：规定为模块目录下的i18n/*.ts文件，内容格式为{ [key: string] {'zh-CN': string, en: string} }。例如：

模块的主题配置：规定为模块目录下的theme/*.ts文件，内容格式为{ [key: ] {light: string, dark: string} }。例如：

模块路由配置完成后，浏览器输入你的路由配置url，即可访问此模块。例如配置了path: '/demo'，那么浏览器输入http://localhost:5173/demo即可访问。

模块国际化和主题的切换

在添加完模块之后，我们可以依赖das-fe创建应用的能力快速进行国际化和主题的切换。以下是示例代码：

完整的代码可以参照示例项目，示例项目中会有更详细的用法。

七、打包

业务模块都开发好后。命令键入以下代码即可启动打包服务：

pnpm run build

打包完成后的文件存放路径为根目录下的dist文件夹

八、嵌入达实AIoT平台

如果开发后希望嵌入达实的AIoT平台，因为是使用das-fe的插件包并且按照das-fe的模块规范进行开发，可以很方便的进行嵌入。

打包完成后得到的dist文件夹中会包含nginx.conf文件，这个文件的内容符合达实运维团队的部署规范。把整个打包后的dist文件夹提供给达实研发团队即可。

总结

此快速上手指南适用于达实AIoT平台web端的融合式应用开发。如果需要移动端的融合式应用开发，只需要把上述依赖的@das-fe/web、@das-fe/cli引入的脚本改写为移动端即可，模块开发规则同样适用。例如@das-fe/mobile，import { dasMobileDev, dasMobileBuild } from '@das-fe/cli'。此文档仅供快速上手，细节未提及的地方需要参考更详细的完整开发手册。（ps：此指南使用的依赖包并非完全跟生产使用的包一致，最终解释权归达实研发部）

前端Web指南

Das Front-End Web 快速上手#

步骤总览#

一、使用vite创建开发仓库#

二、代码入口引入@das-fe/web来创建应用#

三、vite配置文件引入@das-fe/cli的插件配置#

四、使用@das-fe/cli增加自定义调试和打包脚本#

五、调试#

六、添加业务模块（页面）#

模块规范#

模块国际化和主题的切换#

七、打包#

八、嵌入达实AIoT平台#

总结#