# MallChatWeb: the Vue 3 front end for a chat-plus-shopping reference backend

> MallChatWeb is the C-end front end of MallChat, a project whose stated goal is an e-commerce system that also does instant messaging, built on Vue 3, Pinia, Element Plus, Alova, and Vite. It ships a full local-and-CI deployment path, and it is a teaching project paired with a separate Java backend.

**Evansy/MallChatWeb** — mallchat的前端项目，是一个既能购物又能聊天的电商系统。以互联网企业级开发规范的要求来实现它，电商该有的购物车，订单，支付，推荐，搜索，拉新，促活，推送，物流，客服，它都必须有。持续更新ing

- Repository: https://github.com/Evansy/MallChatWeb
- Website: https://mallchat.cn
- Stars: 1,247 · Forks: 519
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/evansy-mallchatweb

## A front end that only makes sense next to its backend

MallChatWeb is the front-end project of MallChat, described as an e-commerce system that can both shop and chat, aiming to be a best practice example of an enterprise grade internet project. The feature list it claims to cover is the standard e-commerce surface: shopping cart, orders, payment, recommendations, search, user acquisition, engagement, push notifications, logistics, and customer service.

The important thing to understand first is that this repository is the C-end front end, and it is only half of a pair. The backend lives in a separate repository, MallChat, and the connection between them is a websocket established by the backend through netty. The front end's own summary lists what it contains: WeChat scan login, a member list, online and offline animations, a message list, and message interactions, plus a set of small shared utilities the project calls wheels, such as an AOP logging annotation, a distributed lock annotation, a rate control annotation, and IP location resolution.

That tells you what kind of repository this is. It is a worked example, not a product and not a library. The scope statement in the project description is the giveaway: it is built to enterprise development standards, and it is updated continuously. There is a live deployment at mallchat.cn, a Bilibili channel with the build recorded, a large Chinese tutorial on a documentation platform, and a community group.

The last push to the repository was on 2026-06-24, and the project has no GitHub releases, so there is no versioned artefact to install. You clone it and run it.

## Node 16 and pnpm 8 are the floor, and that floor is now dated

The package.json states the runtime requirements directly:

```json
"engines": {
  "node": ">=16.16.0",
  "pnpm": ">=8.4"
}
```

The project documentation says the same thing in prose, with node 16.18 or newer, and adds the instruction to install pnpm globally with `npm i pnpm -g` after installing node.

The choice of pnpm is explained rather than asserted. Installing with pnpm avoids failures caused by the network, where npm is said to error out, and the documented workaround for npm users is to add the `--ignore-scripts` parameter. That is a concrete symptom of a large dependency tree and a restrictive registry network, and it is the kind of detail that only appears in a project its authors actually set up on a daily basis.

The floor is worth flagging for anyone picking this up today. Node 16 is an old release line, and the dependency versions in package.json are correspondingly dated: Vue 3.3.4, Vite through the @vitejs/plugin-vue 4.4.0 line, Element Plus 2.3.14, ESLint 8.51. The code is a snapshot of a 2023-era stack that has been maintained since. It will still run on a current machine in most cases, since the engines field is a floor rather than a ceiling, but you are picking up an older dependency tree and the security and tooling trade-offs that come with it.

The project also records the environment configuration the backend needs, in `application.yml` and `application-test.properties`, which is a reminder that the interesting half of the system is the Java side.

## Alova and Vite are the two decisions that shape the codebase

The technology selection table lists the front-end stack with a reason for each entry, and two of those choices are worth more attention than the rest.

Alova is described as a lightweight request strategy library, easier to carry than axios, and the dependency list shows it used through a scene adapter, `@alova/scene-vue` at 1.2.0, alongside `alova` itself at 2.13.1. The word strategy in the description is the interesting part. Alova is not simply an axios replacement; it models requests as declarative strategies with associated states and events, which is why a Vue adapter with the scene pattern is needed. For a chat application, that model fits, because a message stream and a member list are not the same kind of request as a product list.

Vite is the build tool, and the scripts show it used properly rather than as a wrapper. There are separate configuration files for development and production, `config/vite.config.dev.ts` and `config/vite.config.prod.ts`, and the dev script passes `--host` so the app is reachable from other devices on the network, which is what you need when you are testing on a phone. The `dev:https` script runs vite with the plain config and `--host`, which suggests a separate configuration path for serving over HTTPS.

The rest of the stack is the conventional Vue 3 set. Vue 3.3.4 with vue-router 4.2.5, Pinia 2.1.6 for state management with `pinia-plugin-persistedstate` for persistence, TypeScript, Element Plus 2.3.14 with the icon package, dayjs for dates, lodash, and `mitt` for event bus. `qrcode.vue` is there for the WeChat scan login QR code, and `@imengyu/vue3-context-menu` provides a context menu, which fits a member list where you right click a person to do something to them.

## The build runs a type check before it bundles

The scripts block contains a detail that separates a serious project from a demo, and it is in the build script:

```json
"build": "run-p type-check build-only",
"build-only": "rimraf dist && vite build --config ./config/vite.config.prod.ts",
"type-check": "vue-tsc --noEmit",
"report": "rimraf dist && vite build"
```

The default build runs the type check and the bundle in parallel with `run-p`, so a type error fails the build. The separate `build-only` script skips the check, and there is a `report` script that cleans and builds without the check, presumably for a faster look at the output. That structure, the fast path and the strict path both present and named, is a workflow with a real use behind it.

The linting setup is equally deliberate and unusually complete for a front-end repository. There is a `lint` script that runs across `.vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts` with `--fix`, an `eslintrc.cjs` configuration with an `.eslintignore`, and a `lint:style` script that fixes css, scss, and vue files with a `stylelintrc.cjs` config. Prettier has its own script and ignore file. The ESLint config extends the Vue and TypeScript presets, and there is a `rushstack/eslint-patch` dependency, which is the standard way to make eslint's TypeScript parser work with type-aware rules.

Then there are the commit hooks. `husky` is installed through the `prepare` script, `lint-staged` runs from a config in `.husky/lintstagedrc.js`, and `commitlint.config.js` with the conventional config is present. The combination means a commit is linted, formatted, and validated against a commit message convention before it lands. The `.husky/` directory is at the top level of the tree, next to `.env.development`, `.env.production`, and the two tsconfig files.

## Deployment is a dist folder and an nginx config, plus a GitHub Actions workflow

Two deployment paths are documented, and they differ in how much you have to do.

The manual one is a build and a copy. You run `pnpm build`, and once it finishes you put the `dist` folder on the server and configure nginx to serve it. That is the whole local deployment, and it is a fair description of how a Vite single page application is deployed when there is no server rendering involved.

The automated one uses GitHub Actions. The workflow file is `.github/workflows/deploy.yml`, and the documentation says that after code is pushed to GitHub the build and deployment to the server happen automatically. The badge for that workflow is in the project header, alongside badges for commit activity and issues, which is a reasonable amount of signal for a project whose main artifact is a running site.

The environment files at the root, `.env.development` and `.env.production`, are how the two modes get different API endpoints. Vite reads those at build time, which is why there is a separate production config file rather than a runtime environment lookup, and it is worth knowing before you point the app at your own backend: the URL is baked into the bundle when you build.

The live site is at mallchat.cn, and there is a mirror of the repository on Gitee for faster access from China, which tells you something about where the audience for this project is. The tutorial material is hosted on a Chinese documentation platform and is described as more than a hundred thousand characters, covering environment setup, core features, infrastructure wheels, interface load testing, and a problem log.

## What you get from the front end, and what you do not

The honest evaluation of this repository comes from its structure, not from its feature list.

You get a front end written to enterprise conventions with the full quality toolchain wired in, which is genuinely useful as a reference for how a team is supposed to configure type checking, linting, formatting, commit hooks, and a separated dev and prod build. The `config/` directory with two Vite configs, the `.husky/` hooks, and the `run-p` in the build script are the parts most worth copying. The Chinese-language tutorial that goes with it is a separate artefact hosted off the repository, described as covering environment setup, core features, performance work, event tracking, a problem log, and project highlights, so the repository alone is not the whole lesson.

You do not get a reusable component library. There is no publishable package here, the version in package.json is 0.0.0, and the package is marked private. The dependencies are what you would install in any Vue 3 project, so nothing in here reduces your dependency bill. The contribution table also shows that the interesting work is spread across both repositories, with frontend contributions covering image, voice, and file message handling, message interactions such as recall, likes, and delete, and a virtual list, while backend contributions include sensitive word detection with a DFA and with an Aho-Corasick automaton, an OpenAI chat bot integration, and further modules. The virtual list and the message interaction work are the frontend pieces that tell you the app handles long message histories and live updates.

The biggest limitation is that the front end alone is inert. The websocket connection, the login flow, the product catalogue, and the ordering logic all live in the backend, so evaluating this project means standing up both, and the backend environment configuration is described as living in `application.yml` and `application-test.properties` with a test configuration offered to project members.

## Conclusion

MallChatWeb suits a developer who wants to see how a chat and e-commerce front end is put together at a level of detail that a real enterprise codebase would use, and who is willing to read the paired Chinese-language teaching material. It is not a reusable component library, and the front end is useless without the MallChat backend running against it. Check three things before you start: that the runtime floor of node 16.16 and pnpm 8.4 fits your machine, since the toolchain predates the current Node releases, that you can get the backend up because the websocket connection and the API are the interesting part, and that your English-only team can follow the documentation, which is hosted on a Chinese platform.

## FAQ

### How do I set up MallChatWeb locally?

The project needs node 16.18 or newer and pnpm, which you install globally with `npm i pnpm -g`. After cloning, run `pnpm i` to install dependencies and press `F5` to start the dev server, which runs `pnpm run dev` and opens the browser. If npm is used instead and errors, add the `--ignore-scripts` parameter.

### What front-end stack does MallChatWeb use?

Vue 3, Pinia for state management, vue-router for routing, TypeScript, Element Plus as the component library, Alova as the lightweight request strategy library, Vite as the build tool, and pnpm as the package manager. The runtime floor is node 16.16 or newer with pnpm 8.4 or newer.

### How is MallChatWeb deployed?

Locally you run `pnpm build` and then place the `dist` folder on the server and configure nginx to serve it. Automatically, GitHub Actions builds and deploys to the server after a push, with the workflow defined in `.github/workflows/deploy.yml`. A live deployment is at mallchat.cn.

### Does the MallChatWeb build catch TypeScript errors?

Yes. The build script runs `run-p type-check build-only`, so the type check with `vue-tsc --noEmit` runs alongside the production bundle and a type error fails the build. There is a separate `build-only` script that skips the check when you want a faster output.

### What licence is MallChatWeb released under?

Apache-2.0, with the licence file at the root of the repository. The project is the C-end front end of MallChat, whose backend is a separate repository, and the two are connected by a websocket established through netty on the server side.

## Sources

- [Evansy/MallChatWeb on GitHub](https://github.com/Evansy/MallChatWeb)
- [Issues](https://github.com/Evansy/MallChatWeb/issues)
- [License: Apache-2.0](https://github.com/Evansy/MallChatWeb/blob/main/LICENSE)
- [Project website](https://mallchat.cn)
- [README](https://github.com/Evansy/MallChatWeb/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/evansy-mallchatweb