# vue3-base-pc

**Repository Path**: joke.com/vue3-base-pc

## Basic Information

- **Project Name**: vue3-base-pc
- **Description**: 基于vue3 +vite + element plus
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-18
- **Last Updated**: 2023-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue框架

## README

## vue3 + vite + element-plus-ui 开箱即用框架（PC端）

###使用：

```JavaScript
  npm i
  npm run mock
```

### **1. 待办**

- [x] 集成echarts
- [x] 集成高德地图
- [x] 自定义QTable组件（**使用方法请移步工程QTable.md**）
- [ ] eslint+prettier 代码校验和格式化
- [ ] ...

### **2.项目文件说明**
- .env.development（参数VITE_APP_PROXY_UR 根据项目需要填写对应的代理域名）
- src
  - api
    - **module** (存放对应模块的api接口请求)
    - **comm**（存放公共的api接口请求）
  - assets
    - **404_image** (404页面相关图片)
    - **layout** (基础布局相关图片)
  - component
    - **QTable** (自定义表格组件)
      - **filter**（表格顶部筛选过滤器）
      - **index** (表格入口)
  - hooks
    - **module** （存放功能模块）
    - **usei18n** （翻译）
  - lang (存放自定义语言对应的翻译)
  - layout (存放全局布局)
  - lib
    - **amap**（封装的高德地图组件）
    - **echarts**（封装的echarts组件）
  - router
    - **module**（存放模块文件）
    - **index**（路由入口）
  - store
    - **module**（存放模块文件）
    - **index**（状态管理入口）
  - style
    - **comm****（公共模块）
    - **index**（样式入口）
  - util
    - **auth**（仅token本地存储相关操作）
    - **coment**（公共工具）
    - **request***（axios请求）
    - **sha1**（接口登陆密码加密文件）
    - **validate**（一些规则校验）
  - view
    - **demo** (表格示例文件，**可删除**)
    - **error-page** (用于404页面跳转)
    - **login** (用于本地登陆获取token调试使用)
    - **redirect**(用于点击左侧菜单后重新加载当前页)

<em>注：其他文件根据自己需要做删减</em>

### **3.接口调试说明**
不推荐：mock.js


推荐使用**ApiFox**软件作为mock的替代，只需要将接口文档导入再开启远程mock开关，即可自动按照接口定义的规则生成数据源，方便调试使用
####[APIFox使用方法点击这里](https://www.apifox.cn/help/)


### **4.注意事项**
- 1.除了demo文件可以删除其他资源可以保留，如有需要可自行根据业务情况进行删改
- 2.vite.config.js文件里的'/api'代理的是APIFOX的在线mock地址，仅用于本地调试使用
- 3.setting.js文件中的AMAP_KEY仅用于调试使用，上线请替换使用自己申请的key及index.html页面的securityJsCode值
- 4.login.vue文件不建议删除，方便本地获取token调试使用，接口为真实接口返回的token，只有在开发环境才会出现此页面，构建后的线上出现401等未授权情况将不会跳转到此页面，可放心使用

### **4.关于项目**
基于花裤衩vue2版本进行升级vue3，想深入了解设计开发思路戳下面教程
####[【element ui admin】 花裤衩vue2版本，戳这里查看保姆级教程](https://juejin.cn/post/6844903476661583880)