Download wocwin admin - download do código-fonte wocwin admin

wocwin admin

Outras categorias

1.0.0

Baixar

projeto wocwin-admin

É um conjunto de modelos de gerenciamento de back-end baseados em código aberto Vue3.2, TypeScript, Vite4, Pinia e Element-Plus.
Este projeto integra o micro frontend qiankun (ou seja, pode ser usado como um subaplicativo)

Visualização on-line

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

Conta: senha do usuário wocwin: 123456

repositório de código

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

Função do projeto

Desenvolvido usando Vue3.2 + TypeScript, setup语法糖
Use Vite como ferramenta de desenvolvimento e empacotamento de projetos (configurado com empacotamento Gzip, sintaxe TSX e proxy de domínio cruzado)
Todo o projeto integra TypeScript e internacionalização i18n
Use Pinia para substituir Vuex, leve, simples e fácil de usar (plug-in de persistência integrado)
Use TypeScript para encapsular todo o pacote secundário Axios (interceptação de erro global)
É usado o componente de encapsulamento secundário t-ui-plus baseado em Element-plus, que contém tabelas comumente usadas, consultas condicionais, formulários, componentes de seleção suspensa, etc.
Use vue-router para interceptar permissões de rota e rotas de carregamento lento
Use KeepAlive para armazenar páginas em cache e oferecer suporte ao cache de páginas aninhadas em vários níveis
Use Prettier para formatar código uniformemente e integrar especificações de verificação de código Eslint
O projeto oferece suporte a uma variedade de modos de layout convencionais; também oferece suporte à troca de tema, modo escuro e modo cinza.
O projeto suporta permissões de botão de menu (wocwin: pode ver tudo, usuário: não pode ver a tela grande, menu Amap e alguns botões de operação de gerenciamento do sistema).

Renderizações dinâmicas

Link: https://blog.csdn.net/cwin8951/article/details/130269505

Instalar e usar

Nota: O ambiente local requer Node.js 16.x+ e pnpm 7.x+ instalados.

 # 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

Diretório de estrutura do projeto

 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 全局配置文件

Interface de back-end do projeto

A interface de back-end do projeto usa completamente dados Mock, graças ao seguinte suporte da plataforma Mock:

FastMock: https://www.fastmock.site (serviço descontinuado)
EasyMock: https://mock.mengxuegu.com

Especificações de confirmação do Git

ci : alterações nos arquivos e scripts de configuração ci;
chore : alterações no sistema de compilação ou ferramentas auxiliares;
fix : reparo de BUG de código;
feat : nova função;
perf : otimização e melhoria de desempenho;
refactor : apenas alterações de código, sem corrigir bugs nem introduzir novos recursos;
style : Ajuste do formato do código, que pode ser espaços, ponto e vírgula, recuo, etc.;
docs : alterações no documento;
test : complementa casos de teste ausentes ou corrige casos de teste existentes;
revert : operação de reversão;