wocwin admin下載 - wocwin admin原始碼下載

wocwin admin

其他類別

1.0.0

下載

wocwin-admin 項目

是基於Vue3.2、TypeScript、Vite4、Pinia、Element-Plus 開源的一套後台管理模板
此專案整合了微前端qiankun（即可以當做一個子應用）

線上預覽

Link：https://wocwin.github.io/wocwin-admin/

帳號：wocwin ; user 密碼都是：123456

代碼倉庫

GitHub：https://github.com/wocwin/wocwin-admin
Gitee：https://gitee.com/wocwin/wocwin-admin

專案功能

使用Vue3.2 + TypeScript 開發，單一檔案元件setup语法糖
採用Vite 作為專案開發、打包工具（配置了Gzip 打包、TSX 語法、跨域代理）
整個專案整合了TypeScript、i18n 國際化
使用Pinia 取代Vuex，輕量、簡單、易用（整合了持久化插件）
使用TypeScript 對Axios 整個二次封裝（全域錯誤攔截）
使用了基於Element-plus 二次封裝t-ui-plus 元件，裡面有常用的table、條件查詢、form 表單、下拉選擇元件等
使用vue-router 進行路由權限攔截、路由懶加載
使用KeepAlive 對頁面進行緩存，支援多層嵌套頁面緩存
使用Prettier 統一格式化程式碼，整合Eslint 程式碼校驗規範
專案支援多種常規的佈局模式；同時支援主題切換、暗黑模式、灰色模式。
專案支援選單按鈕權限（wocwin:可以看見所有，user:無法看見大螢幕、高德地圖選單及部分系統管理的操作按鈕）。

動態效果圖

連結：https://blog.csdn.net/cwin8951/article/details/130269505

安裝使用

注意: 本機環境需要安裝Node.js 16.x+、pnpm 7.x+

 # Gitee
git clone https://gitee.com/wocwin/wocwin-admin.git
# GitHub
git clone https://github.com/wocwin/wocwin-admin.git

# 安装pnpm

npm install pnpm -g


# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
> pnpm config get registry 查看当前指向源

# 如果安装依赖失败，可以尝试使用淘宝镜像
> pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
> pnpm install

# 启动服务
pnpm serve

# build
pnpm dev

# prettier 格式化代码
pnpm lint:prettier

專案結構目錄

 Wocwin-Admin
├─ build                  # Vite 配置项
├─ public                 # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ hooks               # 常用 Hooks 封装
│  ├─ languages           # 语言国际化 i18n
│  ├─ layout              # 框架布局模块
│  ├─ router              # 路由管理
│  ├─ store               # pinia store
│  ├─ styles              # 全局样式文件
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 常用工具库
│  ├─ views               # 项目所有页面
│  ├─ App.vue             # 项目主组件
│  ├─ main.ts             # 项目入口文件
│  ├─ auto-import.d.ts    # 自动导入vue、vue-router、pinia相关API（无需import引入）
│  └─ vite-env.d.ts       # 指定 ts 识别 vue
├─ .env.dev               # 开发环境配置
├─ .env.prod              # 生产环境配置
├─ .env.sit               # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.cjs          # Eslint 校验配置文件
├─ .gitignore             # 忽略 git 提交
├─ .prettierignore        # 忽略 Prettier 格式化
├─ .prettierrc.cjs        # Prettier 格式化配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.cjs       # stylelint 样式格式化配置
├─ index.html             # 入口 html
├─ stats.html             # Rollup Visualizer html
├─ deploy.sh              # 发布GitHub Pages指令
├─ LICENSE                # 开源协议文件
├─ pnpm-lock.yaml         # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ postcss.config.cjs     # postcss 配置
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 全局配置文件