Appearance
介绍
开发技术
本项目需要了解以下前端基础知识：
完全基于 vue3 SFC 写法,不支持 vue2
客户端支持
完全支持
| H5 | 安卓 APP | IOS APP | 微信公众号 | 微信小程序 |
|---|
同时也支持以下小程序，但是由于不是太过于主流，并未对登录授权、支付等做深度集成；且并未完成完整测试
| 支付宝小程序 | 字节跳动小程序 | QQ小程序 | 360小程序 | 快手小程序 | 飞书小程序 | 钉钉小程序 | 京东小程序 |
|---|
获取客户端代码
前往 授权&下载中心 下载后台代码。
目录结构
txt
├─ src
│ ├─ api
│ │ ├─ article 文章接口
│ │ ├─ base 基础接口
│ │ ├─ channel 升级接口
│ │ ├─ home 首页接口
│ │ ├─ member 用户接口
│ │ ├─ pay 支付接口
│ │ ├─ share 商学院接口
│ │ └─ shop 商城接口
│ ├─ assets 静态资源
│ ├─ components 组件
│ ├─ core
│ │ ├─ config 客户端配置
│ │ └─ utils 核心功能类
│ ├─ enums 枚举
│ ├─ hooks 钩子
│ ├─ pages 页面
│ │ ├─ common
│ │ ├─ distribution
│ │ ├─ guide
│ │ ├─ login
│ │ ├─ main
│ │ ├─ marketing
│ │ ├─ notFound
│ │ ├─ notice
│ │ ├─ order
│ │ ├─ product
│ │ ├─ public
│ │ └─ user
│ ├─ settings 设置
│ ├─ state 状态管理
│ ├─ static 静态文件
│ ├─ types 类型文件
│ ├─ utils 工具类
│ ├─ App.vue 系统入口
│ ├─ main.ts 入口类
│ ├─ manifest.json uni-app配置
│ ├─ pages.json 页面配置
│ └─ uni.scss 全局样式
├─ .env
├─ .env.development 开发环境配置
├─ .env.production 生产环境配置
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc.js
├─ favicon.ico
├─ index.html
├─ package.json
├─ README.md
├─ tsconfig.json
├─ unocss.config.js
└─ vite.config.ts开发工具
CLI模式
推荐使用vscode，并安装以下工具来提高开发效率：
- Vetur - vue 开发必备
- ESLint - 脚本代码检查
- JavaScript (ES6) code snippets - ES6语法智能提示
- Prettier - 代码格式化
- Stylelint - css 格式化
- DotENV - .env 文件 高亮
IDE模式
使用HbuilderX，根据需要安装插件。
开发环境
本地环境需要安装 Node.js、pnpm。
安装Node.js
获取Node.js并安装。
安装完以后可以执行以下代码验证：
bash
# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。
安装pnmp
bash
# 全局安装pnpm
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功安装依赖
在项目根目录下，打开命令窗口，或者在VsCode项目终端下执行以下命令：
bash
# 安装依赖，耐心等待执行完成
pnpm i运行项目
使用HbuilderX开发可直接运行或打包各端。
CLI模式开发可打开命令窗口，或者在VsCode项目终端下执行以下命令：
bash
pnpm dev:h5 #运行H5
pnpm build:h5 #打包H5其它运行或打包命令在 package.json 中查看。