guigu sph mall admin

Shangpinhui 배경 관리 시스템

vite+pinia+element-plus+vue-router@4)

업데이트 로그를 봅니다

사용 방법

설치하다

 pnpm install

달리다

 pnpm run dev

짓다

 pnpm run build:prod

미리보기 주소

http://113.141.166.99:3007/#/index

계정 비밀번호 : admin atguigu123

기능 소개

• vue3.2.45 + typescript를 사용하십시오
• Vite4.0을 프로젝트 개발 및 포장 도구로 사용하십시오 (구성된 GZIP 패키징, TSX 구문, 크로스 -도메인 대행사 ...)
• 더 예쁘게 통합 된 형식 코드를 사용하여 Eslint, Stylelint Code Verification 사양을 통합하십시오.
• Husky, Lint-Stage, Commitlint, Commitizen, CZ-GIT 사양을 사용하여 정보를 제출하십시오.
• Pinia를 사용하여 Vuex, Lightweight, Simple, 사용하기 쉬운 통합 Pinia Peristent Plug -In을 대체하십시오.
• Typescript를 사용하여 전체 보조 패키지의 Axios 패키지를 캡슐화하십시오.
• 요소 플러스 보조 포장 보호 성분을 기반으로하고 구성을 기반으로 일반적으로 사용되는 양식을 개발합니다.
• 지원 페이지 전체 화면 디스플레이
• 메뉴 권한의 구성 및 관리를 지원합니다
• 세 가지 방법 (지침, 후크, 구성 요소) 엉덩이를 지원합니다
• 디아블로 모델의 스위칭을 지원하십시오
• 사용자 정의 테마 스위칭을 지원합니다
• I18N 국제화 지원
• 맞춤형 교육 개발

파일 디렉토리 소개

 guiug-sph-mall-admin
├─ .husky                 # husky 配置文件
├─ .vscode                # VSCode 推荐配置
├─ mock                   # mock数据
├─ public                 # 静态资源文件（该文件夹不会被打包）
├─ scripts                # 脚本文件
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ directives          # 全局指令文件
│  ├─ enums               # 项目常用枚举
│  ├─ hooks               # 常用 Hooks 封装
│  ├─ languages           # 语言国际化 i18n
│  ├─ layouts             # 框架布局模块
│  ├─ routers             # 路由管理
│  ├─ stores              # pinia store
│  ├─ styles              # 全局样式文件
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 常用工具库
│  ├─ views               # 项目所有页面
│  ├─ App.vue             # 项目主组件
│  ├─ env.d.ts            # 指定 ts 识别 vue
│  └─ main.ts             # 项目入口文件
├─ .editorconfig          # 统一不同编辑器的编码风格
├─ .env.development       # 开发环境配置
├─ .env.production        # 生产环境配置
├─ .env.test              # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.cjs          # Eslint 校验配置文件
├─ .gitignore             # 忽略 git 提交
├─ .prettierignore        # 忽略 Prettier 格式化
├─ .prettierrc.json       # Prettier 格式化配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.js        # stylelint 样式格式化配置
├─ commitlint.config.js   # git 提交规范配置
├─ index.html             # 入口 html
├─ LICENSE                # 开源协议文件
├─ lint-staged.config     # lint-staged 配置文件
├─ pnpm-lock.json         # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ README.md              # README 介绍
├─ STANDARD.md            # 项目编码规范说明书
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 全局配置文件

프로젝트 스크린 샷

1. 로그인 페이지

2. 홈페이지

3. 테마 스위치

4. 디아블로 모드

코드 창고

https : //gitee.pom/guigu-fe/guigu-sph-mall-dmin

이 프로젝트는 앞으로 더 재미있는 업계 솔루션을 통합 할 것입니다.

기사 튜토리얼 시리즈

• VUE3 Admin Nanny Teaching Guide ｜ 프로젝트 표준 통합 자습서, 프로젝트의 다양한 이상한 파일 및 구성에 대한 두 번째 이해를 읽은 후
• vue3 Admin 보모 교육 안내서 ｜ 한 기사는 Vue3 패밀리 배럴, 통합 Pinia+element-plus+vue-router@4를 시작할 수 있습니다.
• vue3 관리자 유모 교육 안내서 ｜ Typecript Secondary acapsulation axios 사용에 대한 특별한 설명
• vue3 관리자 유모 교육 안내서 ｜ Pinia 사용에 대해
• vue3 admin nanny 교육 안내서 ｜ 로그인 및 메뉴 권한 구현
• vue3 관리자 유모 교육 안내서 ｜ 배경 관리 시스템의 레이아웃 구현
• vue3 관리자 유모 교육 안내서 ｜ 요소 플러스 테마 스위칭 및 다크 모드를 달성하는 방법
• vue3 관리자 -개발 된 독창적 인 기술 ｜ vue에서 현재 페이지를 새로 고치는 방법
• 업데이트되지 않았습니다 ...