# mall_activity

**Repository Path**: llz888888/mall-activity

## Basic Information

- **Project Name**: mall_activity
- **Description**: 使用 vue3 + vite + pinia + typescript + vue-router + element-plus + mock 写一个商城系统中的营销活动
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-06
- **Last Updated**: 2023-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img src="https://img.shields.io/badge/Vue-3.3.1-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-4.3.5-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.3.6-blue.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
</p>
<p align="center">
 <a target="_blank" href="https://gitee.com/llz888888/mall-activity"><strong style="font-size: 40px">mall-activity</strong></a>  
</p>


## 项目介绍

本项目开发了拼团活动管理, 节日营销活动管理等功能, 是基于开源项目上开发的后台管理前端模板. 

项目有以下特性：
- 拼团活动管理, 节日营销活动管理均是使用本地 Mock 数据, 而权限系统功能是搭配有莱开源项目提供的后台系统api实现;
- 基于 Vue3 版本的  vue-element-admin + Element-Plus 无自定义封装，易上手，减少学习成本;
- 采用了主流的 Vite4 + TypeScript5 + Pinia 等最新主流技术栈;
- 项目还提供了基础设施支持，包括动态路由、按钮级别的权限控制、国际化支持、代码规范、Git 提交规范以及常用组件的封装，以便开发人员更高效地开发和维护项目。

## 项目预览

- **拼团活动-列表**

  ![拼团活动-列表](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/1.png)


- **拼团活动-编辑**

  ![拼团活动-编辑](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/2.png)


- **拼团活动-选择商品**

  ![拼团活动-选择商品-1](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/3.png)
  ![拼团活动-选择商品-2](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/4.png)

- **节日营销活动-列表**

  ![节日营销活动-列表](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/5.png)


- **节日营销活动-编辑**

  ![节日营销活动-编辑](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/6.png)
  ![节日营销活动-编辑-选择优惠卷](https://gitee.com/llz888888/static/raw/master/mall-activity/readme/7.png)

## 项目地址

| 项目 | Gitee                                                      |
|----| ---------------------------------------------------------- | 
| 前端 | [mall-activity](https://gitee.com/llz888888/mall-activity) |

## 体验地址

该项目暂时没有部署到云服务器, 但只需要按照下列步骤克隆代码到本地, 直接运行它即可(本地不需要再启动任何后端项目)

## 环境准备

| 环境                 | 名称版本                                                     | 备注                                                                                        |
| -------------------- | :----------------------------------------------------------- |-------------------------------------------------------------------------------------------|
| **开发工具**         | VSCode                                                       | [下载地址](https://code.visualstudio.com/Download)                                            |
| **运行环境**         | Node 16+                                                     | [下载地址](http://nodejs.cn/download)  (推荐使用NVM管理Node版本)                                      |
| **VSCode插件(必装)** | 1. `Vue Language Features (Volar) ` <br/> 2. `TypeScript Vue Plugin (Volar) `  <br/>3. 禁用 Vetur | ![vscode-plugin](https://foruda.gitee.com/images/1687755823108948048/d0198b2d_716974.png) |


## 项目启动

```bash
# 克隆代码
git clone https://gitee.com/llz888888/mall-activity.git

# 切换目录
cd mall-activity

# 查看node版本
node -v
# 切换到合适的node版本 18.0.0 (使用nvm)
nvm list
# 如果没有18版本的node, 就通过NVM安装一个
nvm install 18.0.0
nvm use 18.0.0
node -v

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm run dev
```

## 注意事项
- **项目组件、函数和引用爆红(ESLint代码检测插件的有时候会发生奇怪的问题)**

	重启 VSCode 尝试

## 提交规范
执行 `pnpm run commit` 唤起 git commit 交互，根据提示完成信息的输入和选择。

## 特别鸣谢
[有来开源组织](https://gitee.com/youlaiorg/vue3-element-admin.git)

[vue3-element-admin](https://juejin.cn/post/7228990409909108793)