wocwin admin

wocwin-admin プロジェクト

これは、Vue3.2、TypeScript、Vite4、Ponia、Element-Plus オープン ソースに基づくバックエンド管理テンプレートのセットです。

このプロジェクトはマイクロ フロントエンド qiankun を統合します (つまり、サブアプリケーションとして使用できます)。

オンラインプレビュー

• リンク: https://wocwin.github.io/wocwin-admin/

アカウント: wocwin; ユーザーパスワード: 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 コンポーネントが使用されます。これには、一般的に使用されるテーブル、条件付きクエリ、フォーム フォーム、ドロップダウン選択コンポーネントなどが含まれます。
• vue-router を使用してルート許可と遅延読み込みルートをインターセプトする
• KeepAlive を使用してページをキャッシュし、複数レベルのネストされたページ キャッシュをサポートします
• Prettier を使用してコードを均一にフォーマットし、Eslint コード検証仕様を統合する
• このプロジェクトは、さまざまな従来のレイアウト モードをサポートしており、テーマの切り替え、ダーク モード、グレー モードもサポートしています。
• このプロジェクトは、メニュー ボタンの権限をサポートしています (wocwin: すべて表示可能、ユーザー: 大画面が表示不可、Amap メニューおよび一部のシステム管理操作ボタン)。

ダイナミックレンダリング

• リンク: 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 全局配置文件

プロジェクトのバックエンド インターフェイス

次のモック プラットフォームのサポートにより、プロジェクトのバックエンド インターフェイスはモック データを完全に使用します。

• FastMock: https://www.fastmock.site (サービス終了)
• EasyMock: https://mock.mengxuegu.com

Gitのコミット仕様

• ci : ci 設定ファイルとスクリプトへの変更。
• chore : ビルド システムまたは補助ツールの変更。
• fix : コードのバグの修復。
• feat ：新しい機能。
• perf : パフォーマンスの最適化と向上。
• refactor : バグの修正や新機能の導入ではなく、コードを変更するだけです。
• style : コード形式の調整。スペース、セミコロン、インデントなど。
• docs : ドキュメントの変更。
• test : 不足しているテスト ケースを補足するか、既存のテスト ケースを修正します。
• revert : ロールバック操作;

WeChat コミュニケーション (wocwin-admin に注意してください)

WeChat QRコード