# vue3-framework

**Repository Path**: xiaoleiStudy/vue3-framework

## Basic Information

- **Project Name**: vue3-framework
- **Description**: 这是一个 vue3+Vite+Element Plus的项目，带有I18n国际化、通用模板、暗黑模式、环境配置、权限管理等基本的应用开发框架。
开发者不需要关心整个架构的搭建，只需要在/src/pages/main 开发相应的业务页面即可。若需要其他插件可以自行配置。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-12-08
- **Last Updated**: 2022-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目简介
这是一个 vue3+Vite+Element Plus的项目，带有I18n国际化、通用模板、暗黑模式、环境配置、权限管理等基本的应用开发框架。
开发者不需要关心整个架构的搭建，只需要在/src/pages/main 开发相应的业务页面即可。若需要其他插件可以自行配置。

### 项目使用组件
1. yarn,请阅读 yarn.md
2. vue3，请阅读 vue3.md
3. vue-router，查看 router/index.js
4. axios，查看 axios.js
5. sass
6. element-plus
7. vueUse 提供了组合式API的支持的 cookie store（state）等其他工具的使用
8. vite，请阅读vite.md 
9. Pinia 和 vuex 差不多，但比Vuex更简单和简洁，具体查看 pinia.md
10. vue-i18n 国际化 
11. 各类插件 可以查看 unplugin.md 文件

### 组件的安装
```
yarn add vue-router@4
yarn add axios
yarn add element-plus
yarn add @vueuse/core
yarn add vue-i18n@next

yarn add sass -D
yarn add unplugin-vue-components -D
yarn add unplugin-auto-import -D
```

### 结构介绍
```
project
    |-- env 环境配置，包含了通用的，开发、测试、生产
    |-- md 所用组件相关的学习资料
    |-- public 公共文件，一般为图片，logo等
    |-- src 项目核心目录
        |-- api 管理所有请求的api
        |-- assets 全局scss配置
        |-- components 自定义相关组件
        |-- language 语言包
        |-- pages 项目页面
            |-- index 页面基本架构布局
            |-- main 核心业务页面开发
        |-- router 路由管理
        |-- store 存储管理
        |-- util 工具管理
```

### 路由注意事项
业务路由的配置一定位于 index中routes = [0,1,2]的第2位开始，若不按照此标准，需要全局搜索并更改 useRouter().options.routes[2].children 获取业务路由的方式 

### 权限注意事项
1. 后端返回的菜单中必须包含有path字段，并于前端所配置路由的path值相同，因为当前端和后端的path相同才被认可为是左侧菜单，若值不匹配则一律认为是按钮级权限
2. 建议在写所有的按钮都使用 AuthorityBtn 去描述，其中 path 为该按钮会发生的请求路径，AuthorityBtn内部会判断该按钮是否在相应的权限中，帮我们做匹配
```
<AuthorityBtn :path="/goods/delGoods">
    <el-button type="primary" @click="delGoods">删除商品</el-button>
</AuthorityBtn>
```
3. 目录 env/.env 中描述了权限的开关默认值是true，为不校验按钮权限，显示所有按钮，改为false即会去匹配按钮权限
```
ENV_AUTHORITYBTN_SHOW = true
```

### 组件 src/components/PageList.vue 
PageList.vue  为通用组件，包含了列表，搜索，各类操作按钮。对于简单的CRUD页面使用该模板能做到快速快发，不需要关心样式，和其他相似页面的通用性。具体见/src/pages/main/example/ExampleList.vue
的使用方式