Abp Vnext Vue版本(Vben Admin5.0)

WangJunZzz發表於2024-11-22
Vue

前言

  • 之前有提供免費開源的基於vben2.8版本的abp vnext pro版本 abp vnext pro vben admin 2.8
  • vben2.8作者已經重構一個版本，命名為vben5，而vben2.x 目前已存檔，僅進行重大問題修復。所以abp vnext pro vue版本前端也重新升級。
  • 新版本(vben5)與舊版本(vben2.8)不相容。
  • 相對於vben2.8版本，vben5整合了國內最新的最新技術棧，開發起來更加絲滑。

連結

  • AbpPro Vben2預覽
  • AbpPro Vben5預覽
  • 文件地址
  • 國內文件地址
  • 影片教程

系統功能

快速開始

前置準備

::: info 環境要求
在啟動專案前，你需要確保你的環境滿足以下要求：

  • dotnet core 8.0
  • nodejs 20.15.0+
  • pnpm
  • mysql
  • redis
  • rabbitmq 可選

:::

後端

安裝 CLI 工具

dotnet tool install Lion.AbpPro.Cli -g

更新 CLI 工具

dotnet tool update Lion.AbpPro.Cli -g

建立專案

lion.abp new -t pro -c 公司名稱 -p 專案名稱  -o 輸出路徑(可選)
lion.abp new -t pro.all -c 公司名稱 -p 專案名稱  -o 輸出路徑(可選)
lion.abp new -t pro.module -c 公司名稱 -p 專案名稱  -m 模組名稱  -o 輸出路徑(可選)

::: danger 注意
VS 編譯專案字串超過 256 個字元,把專案複製到磁碟根目錄 OR 使用 Rider 開發
:::

修改配置

  • 修改service下 xxx.HttpApi.Host-> appsettings.Development.json 配置
    • Mysql 連線字串
    • Redis 連線字串
    • RabbitMQ 連線字串(可選)
  "ConnectionStrings": {
    "Default": "Data Source=localhost;Port=3306;Database=LionAbpProDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  },
  "Redis": {
    "Configuration": "localhost:6379,password=1q2w3E*,defaultdatabase=5"
  }，
  "Cap": {
    "Enabled": true,
    "RabbitMq": {
      "HostName": "localhost",
      "UserName": "admin",
      "Password": "1q2w3E*",
      "Port": 5672
    }
  }
  • 修改 DbMigrator-> appsettings.Development.json 資料庫連線字串
  "ConnectionStrings": {
    "Default": "Data Source=localhost;Port=3306;Database=LionAbpProDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  }
  • 右鍵單擊.DbMigrator 專案,設定為啟動專案執行，按 F5(或 Ctrl + F5) 執行應用程式
  • 啟動後端service下的host專案，訪問後臺 http://localhost:44315/login
  • 登入賬號密碼 admin/1q2w3E*

::: danger 注意

  • 初始的種子資料在資料庫中建立了 admin 使用者(密碼為1q2w3E*) 用於登入應用程式. 所以, 對於新資料庫至少使用 .DbMigrator 一次.
  • 如果是透過lion.abp new -t pro.all建立的專案，請在Lion.AbpPro.EntityFrameworkCore目錄下執行dotnet ef migrations add init 生成遷移檔案
    :::

前端Vben2.8

  • 安裝pnpm

在你的程式碼目錄內開啟終端，並執行以下命令:

::: danger 注意

注意存放程式碼的目錄及所有父級目錄不能存在中文、韓文、日文以及空格，否則安裝依賴後啟動會出錯。

:::

獲取原始碼專案

  • 程式碼生成的資料夾下Vben28
# 進入專案目錄
cd vben28

# 安裝依賴
pnpm install

# 啟動專案
pnpm run dev

訪問

::: tip 注意

  • 訪問 http://localhost:4200
  • Vben2.8版本本地除錯首次訪問會比較慢，長達幾分鐘，請耐心等待(Vben5已解決)。
  • 登入賬號密碼 admin/1q2w3E*
    :::

前端Vben5

  • 安裝pnpm
    在你的程式碼目錄內開啟終端，並執行以下命令:

::: danger 注意

注意存放程式碼的目錄及所有父級目錄不能存在中文、韓文、日文以及空格，否則安裝依賴後啟動會出錯。

:::

::: tip 注意

  • Vben5 版本的前端專案,需要找作者購買原始碼
  • 聯絡方式: 510423039@qq.com
  • 微訊號：WJLXRzzZ
    :::

獲取原始碼專案

# 此地址需要找作者購買原始碼
git clone https://github.com/abp-vnext-pro/abp-vnext-pro-vben5.git

執行以下命令執行專案:

# 在專案根目錄下執行
pnpm i

# 執行指定專案 and版本(apps/web-antd)
pnpm run dev:antd

訪問

::: tip 注意

  • 訪問 http://localhost:4200
  • 登入賬號密碼 admin/1q2w3E*
    :::

相關文章