# vue-app-template

**Repository Path**: weedwong/vue-app-template

## Basic Information

- **Project Name**: vue-app-template
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-21
- **Last Updated**: 2021-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 安装依赖

> npm install 或 yarn

## 启动

> npm run dev 或 yarn dev

## 打包

> npm run build 或 yarn build

## 生产环境预览

> npm run serve 或 yarn serve

## 项目介绍

1. 构建工具`vite`, 具体配置看根目录下`vite.config.ts`文件
2. 基于 `Vue3` + `vue-router` 单页应用，另外集成了`vuex`、`axios` 和 `element-plus`
3. vscode 中需要使用实现性功能`<script setup>` 需要使用`Volar`替换`Vetur`插件

### 目录结构

```md
├── public/
└── src/
├── assets/ // 静态资源目录
├── common/ // 通用类库目录
├── components/ // 公共组件目录
├── router/ // 路由配置目录
├── store/ // 状态管理目录
├── style/ // 通用 CSS 目录
├── utils/ // 工具函数目录
├── views/ // 页面组件目录
├── App.vue
├── main.ts
├── shims-vue.d.ts
├── tests/ // 单元测试目录
├── index.html
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json
```
### 代码风格

1. `EditorConfig` 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
2. `Prettier` 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。
3. `ESLint` 是一款用于查找并报告代码中问题的工具，并且支持部分问题自动修复。其核心是通过对代码解析得到的 AST（Abstract Syntax Tree 抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

如果两者规则冲突怎么办：
>  解决两者冲突问题，需要用到 `eslint-plugin-prettier` 和 `eslint-config-prettier`。

>  `eslint-plugin-prettier` 将 `Prettier` 的规则设置到 `ESLint` 的规则中。

>  `eslint-config-prettier` 关闭 `ESLint` 中与 `Prettier` 中会发生冲突的规则。

>  最后形成优先级：`Prettier` 配置规则 > `ESLint` 配置规则。

> 分别安装这两个依赖后，在`.eslintrc.js`中添加如下配置: 

```js
module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}
```

### 集成 husky 和 lint-staged