# admin-template

**Repository Path**: bianpengfei/admin-template

## Basic Information

- **Project Name**: admin-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-19
- **Last Updated**: 2022-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mandala-web-template

# 目录结构
```lua
├── public --公共资源，index.html和favicon.ico
└── src
    ├── api --请求api接口
    ├── assets
    │   └── icon --materdesginer图片资源
    │       ├── css
    │       ├── fonts
    │       └── scss
    ├── components --通用组件
    │   ├── app --基础组件
    │   ├── link --连接组件
    │   └── menu --按钮组件
    ├── config --配置文件，client_id,client_sercet
    ├── i18n -- i18n配置
    │   └── messages --i18n语言文件
    ├── layouts -- 模板
    ├── mock --mock测试
    ├── plugins --插件，组件注入
    ├── router -- 路由管理
    ├── store -- vuex 全局管理
    ├── styles -- vuetify样式参数，和覆盖sass
    ├── util --工具
    ├── vee --vee-validate校验
    ├── views --视图文件
    └── vuetify --vuetify配置文件
```
| 技术       | 说明                  | 官网                                   |
| ---------- | --------------------- | -------------------------------------- |
| Vue        | 前端框架              | https://vuejs.org/                     |
| Vue-router | 路由框架              | https://router.vuejs.org/              |
| Vuex       | 全局状态管理框架      | https://vuex.vuejs.org/                |
| vue-i18n       | 国际化      | https://vuex.vuejs.org/                |
| Vuetify    | 前端UI框架            | https://vuetifyjs.com/              |
| ApexCharts   | 图表框架 | https://apexcharts.com/               |
| v-charts   | 基于Echarts的图表框架 | https://v-charts.js.org/               |
| Js-cookie  | cookie管理工具        | https://github.com/js-cookie/js-cookie |
| vuex-pathify  | vuex封装工具            | https://davestewart.github.io/vuex-pathify/#/  |
| vuex-router-sync  | 给router配置vuex            |   |
| vee-validate  | 校验框架            | https://github.com/logaretm/vee-validate  |

# 统一开发工具

vscode

> 常用快捷键

代码全部折叠 ctrl + [k, 0]
代码全部展开 ctrl + [k, j]
查看帮助 ctrl + shift + p

## 参考配置

    {
        "workbench.startupEditor": "newUntitledFile",
        "files.autoSave": "afterDelay",
        "python.autoComplete.extraPaths": [],
        "explorer.confirmDelete": false,
        "explorer.confirmDragAndDrop": false,
        "window.zoomLevel": -1,
        "editor.fontSize": 16,
        "workbench.sideBar.location": "left",
        "[javascript]": {
            "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.enable": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "vue"
        ],
        "editor.wordWrap": "wordWrapColumn",
        "editor.formatOnSave": false,
    }

## 插件使用

ESLint
Prettier ESLint
Vetur

KoroFileHeader

// 文件头部注释 ctrl + shift + i
"fileheader.customMade": {
    "Descripttion": "",
    "version": "",
    "Author": "sueRimn",
    "Date": "",
    "LastEditors": "sueRimn",
    "LastEditTime": ""
},
//函数注释  ctrl + shift + t
"fileheader.cursorMode": {
    "name": "",
    "Descripttion": "",
    "param": "",
    "return": ""
}