# Vue3-Common-Template

**Repository Path**: weiyueshiyi/vue3-template

## Basic Information

- **Project Name**: Vue3-Common-Template
- **Description**: 使用vue3+ts+vite+element-plus重构的一套管理系统模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-12-23
- **Last Updated**: 2023-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, vite, 后台管理系统, elementPlus

## README

## 技术架构
> *Node v16.13.0* + *Vue v3* + *Vite v4* + *TypeScript* + *Pinia v2* + *Element-plus v2*

## 文件目录说明
+ src 存放Vue相关业务代码
    + > api 全局公共请求方法
    + > assets 静态资源文件
    + > components 全局公共组件
    + > router 路由文件
    + > store 存放公共vuex
    + > styles 存放公共样式
    + > utils 工具集

## 开发

`npm i` 安装依赖包 | `npm i -f` 强制安装依赖包

`npm run dev` 本地开发调试

`npm run build` 本地 / 线上编译，生成静态的 html 页面（dist 目录）

## 注意事项
+ 由于vite对node版本有要求,请确保版本不低于16.13.0

+ vue3已更好支持了jsx/tsx语法,不过综合支持度没有react高，请谨慎使用,模板语法更符合vue生态。如要使用jsx/tsx开发，推荐使用react来获得更好的开发体验

+ 由于多人协作开发，项目中配置了Lint工具,请按照规范开发。除极个别情况，不可以在业务代码中使用 `eslint-disable` 的方式跳过 `eslint` 校验规则

+ 关于类名可以使用className去定义,习惯于react开发的可以去使用

+ 全局业务组件归置于src/components下,局部组件归置于当期文件夹下/components下,组件尾单词以业务/UI 组件名称命名,如：Module,Table等

+ 该项目已配置pinia(https://pinia.web3doc.top/introduction.html),不需要额外安装vuex

+ 单个页面/组件文件，代码量控制在 700 行左右，超过该数目，请适当对业务内容进行拆分。在样式不互斥的情况下可单独抽出,行业样式不可超出两个(注：条件不允许的情况下，不必为了封装而封装)