216 lines
6.7 KiB
Markdown
216 lines
6.7 KiB
Markdown
# 大妈集市商户端平台开发文档
|
||
|
||
## 项目简介
|
||
|
||
**项目名称**: 大妈集市商户端
|
||
|
||
**版本**: 2.0.0
|
||
|
||
**描述**: 大妈集市商户端
|
||
|
||
**作者**: objstudio
|
||
|
||
## 项目结构
|
||
|
||
### 主要目录
|
||
|
||
- `src/`: 源代码目录，包括所有 Vue 组件和相关资源。
|
||
- `build/`: 构建脚本和配置文件。
|
||
- `public/`: 静态资源目录。
|
||
- `node_modules/`: 项目依赖包目录。
|
||
|
||
### 关键文件
|
||
|
||
- `package.json`: 项目配置和依赖管理文件。
|
||
- `vue.config.js`: Vue CLI 配置文件。
|
||
- `babel.config.js`: Babel 配置文件。
|
||
- `.eslintrc.js`: ESLint 配置文件。
|
||
|
||
## 脚本命令
|
||
|
||
### 开发和构建
|
||
|
||
- `serve`: 启动开发服务器。
|
||
```sh
|
||
npm run serve
|
||
```
|
||
- `build:prod`: 进行生产环境构建。
|
||
```sh
|
||
npm run build:prod
|
||
```
|
||
- `build:stage`: 进行阶段环境构建。
|
||
```sh
|
||
npm run build:stage
|
||
```
|
||
|
||
### 代码检查和修复
|
||
|
||
- `lint`: 运行 ESLint 进行代码检查。
|
||
```sh
|
||
npm run lint
|
||
```
|
||
|
||
### 预览
|
||
|
||
- `preview`: 启动预览服务器。
|
||
```sh
|
||
npm run preview
|
||
```
|
||
|
||
## 代码质量控制
|
||
|
||
### Husky
|
||
|
||
配置了 `husky` 来管理 Git 钩子，保证代码在提交前经过检查。
|
||
|
||
- `pre-commit`: 在提交前运行 `lint-staged`。
|
||
|
||
### Lint-Staged
|
||
|
||
使用 `lint-staged` 在提交前自动修复和添加代码。
|
||
|
||
```json
|
||
"lint-staged": {
|
||
"src/**/*.{js,vue}": [
|
||
"eslint --fix",
|
||
"git add"
|
||
]
|
||
}
|
||
```
|
||
|
||
## 依赖管理
|
||
|
||
### 生产依赖
|
||
|
||
项目使用了多种前端依赖来实现不同的功能。以下是主要的生产依赖：
|
||
|
||
- `vue`: Vue.js 框架。
|
||
- `axios`: HTTP 请求库。
|
||
- `element-ui`: 组件库。
|
||
- `vue-router`: 路由管理。
|
||
- `vuex`: 状态管理。
|
||
- 其他库如 `dayjs`, `echarts`, `quill`, `xlsx` 等，用于日期处理、图表绘制、富文本编辑、Excel 文件处理等功能。
|
||
|
||
### 开发依赖
|
||
|
||
主要用于开发环境的工具和插件：
|
||
|
||
- `@vue/cli-plugin-babel`: Babel 插件。
|
||
- `@vue/cli-plugin-eslint`: ESLint 插件。
|
||
- `eslint`: 代码检查工具。
|
||
- `sass` 和 `sass-loader`: 用于处理 Sass 样式。
|
||
- `vue-loader`, `vue-template-compiler`: Vue 文件编译工具。
|
||
|
||
## 浏览器兼容性
|
||
|
||
项目设置了浏览器兼容性配置，以确保在主流浏览器上正常运行。
|
||
|
||
```json
|
||
"browserslist": [
|
||
"> 1%",
|
||
"last 2 versions"
|
||
]
|
||
```
|
||
|
||
## 运行环境
|
||
|
||
项目要求的 Node.js 和 npm 版本：
|
||
|
||
```json
|
||
"engines": {
|
||
"node": ">=8.9",
|
||
"npm": ">= 3.0.0"
|
||
}
|
||
```
|
||
|
||
## 版本控制
|
||
|
||
项目的代码托管在 Git 仓库中
|
||
|
||
## 关键词
|
||
|
||
为了方便搜索和分类，项目添加了以下关键词：
|
||
|
||
```json
|
||
"keywords": [
|
||
"vue",
|
||
"admin",
|
||
"dashboard",
|
||
"element-ui",
|
||
"boilerplate",
|
||
"admin-template",
|
||
"management-system"
|
||
]
|
||
```
|
||
|
||
确实，有一些依赖没有详细介绍。下面是对所有依赖项的详细说明。
|
||
|
||
### 生产依赖
|
||
|
||
- **@micro-zoe/micro-app**: 用于微前端架构的解决方案，支持在主应用中加载和运行多个子应用。
|
||
- **@riophae/vue-treeselect**: Vue 组件，用于实现树选择功能。
|
||
- **axios**: 用于处理 HTTP 请求。
|
||
- **clipboard**: 操作剪贴板的库。
|
||
- **compressorjs**: 用于图片压缩的 JavaScript 库。
|
||
- **core-js**: 提供 JavaScript 标准库的 polyfill。
|
||
- **crypto-js**: 提供加密算法的 JavaScript 库。
|
||
- **dayjs**: 轻量级的日期处理库。
|
||
- **echarts**: 强大的图表绘制库。
|
||
- **element-ui**: 基于 Vue 的组件库。
|
||
- **file-saver**: 用于保存文件的库。
|
||
- **fuse.js**: 轻量级的模糊搜索库。
|
||
- **highlight.js**: 用于代码高亮显示的库。
|
||
- **js-beautify**: 用于美化 JavaScript、HTML 和 CSS 代码的库。
|
||
- **js-cookie**: 用于操作 cookies 的简单 API。
|
||
- **jsencrypt**: 用于实现 RSA 加密解密的库。
|
||
- **mockjs**: 用于生成随机数据和拦截 Ajax 请求。
|
||
- **nprogress**: 轻量级的进度条库。
|
||
- **obj-table-plus**: 高度自定义的数据表格组件。
|
||
- **quill**: 强大的富文本编辑器。
|
||
- **screenfull**: 用于全屏操作的库。
|
||
- **signature_pad**: 用于签名绘制的库。
|
||
- **sortablejs**: 强大的拖拽排序库。
|
||
- **video.js**: 用于播放视频的库。
|
||
- **vue**: Vue.js 框架。
|
||
- **vue-amap**: Vue 组件，用于高德地图集成。
|
||
- **vue-cookie**: 用于操作 Vue 应用中的 cookies。
|
||
- **vue-count-to**: 用于实现数字滚动效果的 Vue 组件。
|
||
- **vue-cropper**: 用于图像裁剪的 Vue 组件。
|
||
- **vue-meta**: 用于管理 Vue 应用的 meta 信息。
|
||
- **vue-router**: Vue 的路由管理库。
|
||
- **vuedraggable**: 用于实现拖拽功能的 Vue 组件。
|
||
- **vuex**: Vue 的状态管理库。
|
||
- **vxe-table**: 高性能的 Vue 表格组件。
|
||
- **xe-utils**: 实用工具库，提供一系列实用函数。
|
||
- **xlsx**: 用于解析和编写 Excel 文件的库。
|
||
|
||
### 开发依赖
|
||
|
||
- **@vue/cli-plugin-babel**: Vue CLI 的 Babel 插件，用于编译 ES6+ 代码。
|
||
- **@vue/cli-plugin-eslint**: Vue CLI 的 ESLint 插件，用于代码检查。
|
||
- **@vue/cli-service**: Vue CLI 的核心服务，用于构建和开发。
|
||
- **autoprefixer**: 自动为 CSS 规则添加浏览器前缀的插件。
|
||
- **babel-eslint**: 用于解析 Babel 代码的 ESLint 解析器。
|
||
- **babel-plugin-dynamic-import-node**: 用于在 Node.js 中解析 `import()` 语法。
|
||
- **chalk**: 用于终端字符串样式的库。
|
||
- **compression-webpack-plugin**: 用于压缩资源文件的 Webpack 插件。
|
||
- **connect**: 用于创建服务器中间件的库。
|
||
- **eslint**: JavaScript 代码检查工具。
|
||
- **eslint-plugin-vue**: 用于检查 Vue 代码的 ESLint 插件。
|
||
- **lint-staged**: 在提交代码前检查暂存文件的工具。
|
||
- **postcss**: 用于转换 CSS 的工具。
|
||
- **runjs**: 用于运行 JavaScript 脚本的命令行工具。
|
||
- **sass**: 用于编译 Sass/SCSS 代码。
|
||
- **sass-loader**: 用于在 Webpack 中加载和编译 Sass/SCSS 代码。
|
||
- **script-ext-html-webpack-plugin**: 用于增强 HTML Webpack 插件功能的扩展插件。
|
||
- **svg-sprite-loader**: 用于将 SVG 图标打包成雪碧图的 Webpack 插件。
|
||
- **tailwindcss**: 一个功能类优先的 CSS 框架。
|
||
- **vue-loader**: 用于加载和编译 Vue 组件的 Webpack 插件。
|
||
- **vue-style-loader**: 用于处理 Vue 组件中的样式的 Webpack 插件。
|
||
- **vue-template-compiler**: 用于编译 Vue 模板的库。
|
||
|
||
通过上述详细说明，可以帮助开发者更好地理解项目的依赖项及其作用。
|
||
|
||
---
|
||
|
||
本开发文档旨在帮助开发者快速了解项目结构、依赖管理和主要脚本命令。通过上述信息，开发者可以更高效地进行开发和维护工作。 |