intelligent-etmf-system-applet

智能ETMF系统小程序

基于 Vue3 + uni-app 开发的微信小程序项目。

技术栈

• 框架: Vue 3.4+ (Composition API)
• 构建工具: Vite 5
• 跨平台框架: uni-app
• 状态管理: Pinia
• 样式: SCSS
• Node 版本: >=18.0.0 (推荐 Node 22)
• 包管理器: npm >=9.0.0

项目结构

intelligent-etmf-system-applet/
├── pages/              # 页面目录
│   └── index/         # 首页
├── static/            # 静态资源
│   └── tabbar/       # 底部导航栏图标
├── App.vue            # 应用根组件
├── main.js            # 入口文件
├── manifest.json      # 应用配置
├── pages.json         # 页面路由配置
├── uni.scss           # 全局样式变量
├── vite.config.js     # Vite配置
└── package.json       # 依赖配置

开发环境要求

• Node.js: 18.0.0 或更高版本（当前项目基于 Node 22）
• npm: 9.0.0 或更高版本

验证版本:

node -v  # 应该显示 v22.x.x
npm -v   # 应该显示 9.x.x 或更高

开发指南

安装依赖

npm install

运行项目

开发微信小程序:

npm run dev:mp-weixin

开发H5:

npm run dev:h5

构建项目

构建微信小程序:

npm run build:mp-weixin

构建H5:

npm run build:h5

微信小程序配置

1. 在 manifest.json 中配置你的微信小程序 appid
2. 使用微信开发者工具打开 dist/dev/mp-weixin 目录
3. 开始调试和预览

注意事项

• 使用 Vue 3 Composition API 进行开发
• 遵循 uni-app 开发规范
• 静态资源放在 static 目录
• 全局样式变量定义在 uni.scss

开发建议

1. 组件化开发: 将可复用的UI组件放在 components 目录
2. 状态管理: 项目已集成 Pinia，适合 Vue 3 的现代状态管理方案
3. API管理: 建议创建 api 目录统一管理接口
4. 工具函数: 创建 utils 目录存放公共方法
5. npm 配置: 项目根目录的 .npmrc 文件包含 npm 配置，可根据需要调整镜像源

相关文档

• uni-app 官方文档
• Vue 3 文档
• 微信小程序文档