# shop-admin

**Repository Path**: openjavaLab/shop-admin

## Basic Information

- **Project Name**: shop-admin
- **Description**: 学习vue3的项目，后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-03-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite  + Element-Plus + vuex

## css 框架 
- https://cn.windicss.org/guide/
    - 安装插件 `vite-plugin-windicss`
    - 配置 `vite.config.ts`
        - 添加插件 `WindiCSS()`
        - 引入 windicss 样式 `import 'virtual:windi.css'`
    - vscode 添加 windicss 插件


## 组件库
- https://element-plus.org/zh-CN/guide/quickstart.html

## 操作cookie的工具 (@vueuse/integrations/useCookies)
- https://vueuse.org/

## vuex 状态集中管理（vue 2 < 4.x <= vue3 ）
- https://vuex.vuejs.org/zh/installation.html#npm

## 进度条 nprogress
- npm install --save nprogress
- npm i --save-dev @types/nprogress  （typescript支持）

## 数字滚动 库 gsap
- npm i gsap

## 图形组件 echarts
- https://echarts.apache.org/zh/download.html
- npm install echarts

## default-passive-events 库会自动为默认事件添加 { passive: true }，解决浏览器警告并优化性能
- npm install default-passive-events

## 自定义指令 v-permission 
- vue 功能
- 实现按钮级别的权限控制
- [vue相关文档](https://cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives)

## 富文本编辑器 tinymce （free版 每月1，000+编辑器加载， 最好用国产的吧）
- https://github.com/tinymce/tinymce
- https://www.tiny.cloud/docs/tinymce/latest/vue-pm/
- 同时安装这两（Vue.js 3.x） npm install tinymce @tinymce/tinymce-vue
- 语言包下载 https://www.tiny.cloud/get-tiny/language-packages/
- tinymce-premium程序包需要商业许可证，所以不要安装这个 高级插件了