mall-admin 是一個基于 vue3-element-admin 升級的 Vue3 版本的商城管理前端工程。它采用了主流的前端技術棧包括 Vue3、Vite3、TypeScript、Vue Router、Pinia、Volar 和 Element Plus 等，以實現一套完整的商城管理系統。

1. 項目優勢

簡單易上手

mall-admin 基于 vue-element-admin 進行升級，對于已經熟悉該框架的開發者來說，極易上手并降低了學習成本。

實際接口支持

與許多其他前端工程不同的是，mall-admin 提供了完整適配的微服務權限系統線上接口，這意味著它可以直接應用于真實的企業級前后端接入場景，而非僅僅使用 Mock 數據。

功能全面

mall-admin 提供了豐富的功能，包括國際化、動態路由、按鈕權限控制、主題大小切換、Echarts 圖表和 wangEditor 富文本編輯器等。

完善的 TypeScript 支持

mall-admin 對 TypeScript 的支持非常全面，無論是組件還是 API 調用層面，都提供了完整的 TypeScript 類型支持。

主流 Vue3 生態和前端技術棧

mall-admin 借助 Vue3 生態和常用前端技術棧，對一些常用組件進行了簡潔封裝，使開發更加高效。

全面的項目文檔支持

如果你是從零開始使用該項目，mall-admin 提供了全面的項目文檔支持，幫助你快速上手并了解項目的各項功能和配置。

全棧技術支持

除了提供微服務接口和 Vue3 管理前端，mall-admin 還支持 uni-app 移動端和 K8S 持續集成交付等全棧技術應用。

2. 技術棧

  • Vue3：漸進式 JavaScript 框架。
  • TypeScript：JavaScript 的一個超集，提供了靜態類型檢查以增強代碼的可讀性和可維護性。
  • Vite：快速的前端開發與構建工具，提供了快速的冷啟動、熱模塊替換和按需編譯等特性。
  • Element Plus：基于 Vue 3 的組件庫，為開發者和設計師提供了豐富的 UI 組件。
  • Pinia：新一代的狀態管理工具，提供了更好的類型推導和開發體驗。
  • Vue Router：Vue.js 的官方路由管理器，用于實現前端路由功能。

3. 環境準備

在開始使用 mall-admin 之前，需要進行一些環境準備。

安裝 Node.js

請確保你已經安裝了 Node.js，并且版本在 16+。

開發工具

推薦使用 VSCode 作為開發工具，并安裝以下必要插件：

  • Vue Language Features (Volar)：提供 Vue 語言支持。
  • TypeScript Vue Plugin (Volar)：提供 TypeScript 支持。

4. 項目啟動

在開始開發之前，有兩種情況需要注意：

  • 如果后端接口尚未啟動或者本地沒有部署后端接口，需要修改 vite.config.ts 文件中的代理地址為 http://localhost:9999，以便與后端進行通信。
  • 在開始前，請先執行 npm install 命令，安裝所需的依賴。

啟動項目的命令如下：

npm run dev

5. 項目部署

在完成開發并進行測試之后，你可能希望將 mall-admin 部署到生產環境中。下面是一些關于項目部署的指南。

本地打包

首先，你需要執行以下命令對項目進行打包：

npm run build:prod

該命令會生成一個名為 dist 的文件夾，其中包含了所有打包后的靜態文件。

Nginx 配置

接下來，我們需要配置 Nginx 以便將靜態文件正確地提供給客戶端。假設你已經安裝好了 Nginx，并擁有一個服務器配置文件（通常是位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available 目錄下）。

請將以下代碼添加到你的 Nginx 服務器配置文件中，用于配置代理和路由轉發：

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html/web;
        index index.html index.htm;
    }

    # 代理轉發請求至網關，prod-api標識解決跨域問題
    location /prod-api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass https://api.youlai.tech/;
    }
}

請根據你的實際情況修改 listen、server_name 和 root 等配置項。

啟動 Nginx

完成配置后，使用以下命令啟動 Nginx 服務：

sudo service nginx start

訪問項目

現在，你可以通過瀏覽器訪問以下地址來查看部署后的 mall-admin 項目：

http://localhost:9527

請確保該地址與你在 Nginx 配置文件中設置的 server_name 一致。

結語

通過本文，我們介紹了 mall-admin 商城管理前端工程的特點、技術棧以及環境準備和部署過程。希望這篇文章對你理解和使用 mall-admin 有所幫助。如果你對該項目有更多的疑問或需求，請參考官方文檔或咨詢開發者。祝你在商城管理前端開發中取得成功！