# vue2TypescriptTemplate

**Repository Path**: ASkyEagle/vue2-typescript-template

## Basic Information

- **Project Name**: vue2TypescriptTemplate
- **Description**: vue2-typescript-template
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-08
- **Last Updated**: 2023-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2+typescript项目模板

## 一、基本介绍
### 为啥要设计该框架？
问过很多中小团队以及部分中后台团队，团队项目有啥规范吗？ 得到的回答是几乎无，其中有个比较共同的借口是严格的规范会影响大家的开发效率。

其实结合工具的规范化不仅不会降低开发效率，还能够提升团队的开发&维护效率。试想当你的项目有以下问题的时候，你难道不觉得它会阻碍开发效率和提高维护难度吗？

项目问题：
- 代码格式不一致

- 命名（项目、组件、公共库、文件等）不规范

- 样式随意，几乎无公共方法，大量重复代码，color等全部写死（当客户要求换色的时候简直是地狱）...

- JavaScript、vue，大量冗余代码，大部分人只关注完成功能，维护性及其差

- 有大量几百甚至上千行代码的文件

- 无代码规范

- 没有人关注效率与质量，只关注交付

说难听些这些只是可以运行的垃圾代码堆而已，它只会纵容团队成员写出更多垃圾代码。

好的架构应该有哪些特点呢？
### 1、足够灵活

### 2、扩展性强

### 3、可维护性

### 4、规范性

## 二、技术选型与规范

### 1、HTML
[参考HTML规范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/HTML%E8%A7%84%E8%8C%83)

### 2、CSS
[参考CSS规范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/CSS%E8%A7%84%E8%8C%83)

### 3、Javascript
[参考Javascript范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/JavaScript%E8%A7%84%E8%8C%83)

### 4、Vue
[参考Vue规范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/vue%E8%A7%84%E8%8C%83)

### 5、命名
[参考命名规范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83)

## 三、具体实现

该前端框架基于Vue2.6.14 + typescript4.5.5 + vue-router3.5.1 + vuex3.6.2 + element-ui实现

node版本 > v14.6.0

框架实现了以下功能：

### 1、代码规范

引入JavaScript规范、typescript规范、vue规范，实现保存时格式化以及代码修复，git commit前进行代码规范校验，校验失败不能提交代码
- 代码规范符合[eslint规范](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/rules/ESLint)

### 2、git提交规范以及工具化实现

参考文档[git提交规范以及工具化](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/git/gitcommit%E8%A7%84%E8%8C%83)

### 3、单元测试

实现基于Karma+mocha+Vue-test-utils+chain的单元测试方案

### 4、结构化styles

- css也需要架构 [CSS架构](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/css/css%E6%9E%B6%E6%9E%84)

### 5、typescript引入
- vue组件支持typescript
- 引入vue-property-decorator、vuex-module-decorators支持vue组件、vuex类的写法
参考[vue2如何更好的支持typescript](http://askyeagle.gitee.io/frontend-pro-doc/#/./ProjectDocs/typescript/vue-class-component%E4%B8%8Evue-property-decorator)

## 四、基本功能功能
- 基本表格
- 自定义图标
- 表单
- 国际化

功能参考该项目[vue-manage-system](https://gitee.com/lin-xin/vue-manage-system)


## 五、总结

框架适用于企业级项目，可以作为框架模板用于任何项目。


## 六、Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your unit tests
```
npm run test:unit
```

### Run your end-to-end tests
```
npm run test:e2e
```

### Lints and fixes files
```
npm run lint
```


## 七、注意事项

### 静态资源处理

- 如何引入

用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。
```html
<img src="/img/icons/favicon-32x32.png" alt="">
// 编译后:
<img src="/img/icons/favicon-32x32.png" alt="">
```

## 八、仓库地址

[vue2-typescript-template](https://gitee.com/ASkyEagle/vue2-typescript-template)