# vite-vue2

**Repository Path**: raohuiyong/vite-vue2

## Basic Information

- **Project Name**: vite-vue2
- **Description**: 使用vue2+vite+mock+ts+eslint进行构建的初始化模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-05
- **Last Updated**: 2023-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一个基于 vue2 的 vite 模板

### 主要技术栈

- [vue2](https://v2.cn.vuejs.org/v2/api/)
- [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator#readme)

### 注意事项

**`使用 yarn 进行安装本项目`**

- node >= 16
- _**严格遵守项目提交规范（commitlint）**_
- 如果使用的是 Windows，则需要关闭行尾转换 git config --global core.autocrlf input
- 自动生成 svg 组件

  每次新增 svg 图片后，需要重新执行命令 `yarn svg` 生成 svg 组件，如果项目在运行中可能会出现编译异常，解决方法如下：

  1. 退出服务后，重新执行 yarn dev
  2. 注释 main.ts 文件内 svg 组件的引用（import '@/icons/components';），等编译完成后再次取消注释（**_推荐该方法_**）

### Mock

建议在 mock 接口前统一加上/mock-api 前缀

### Svg

[svgicon](https://mmf-fe.github.io/svgicon/guide/)

1. 使用方式

```html
<svg-icon name="back-top" />
```

### 命令

- 启动本地开发环境（自带热启动）

```bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production
$ yarn build

# 自动生成 svg 组件（在plugins/svg-icon中定义组件参数）
$ yarn svg

# eslint检查
$ yarn lint

# eslint修复
$ yarn lint:fix

# stylelint检查
$ yarn stylelint

# stylelint修复
$ yarn stylelint:fix

# prettier检查
$ yarn format

# prettier修复
$ yarn format:fix

# 执行eslint修复、stylelint修复和prettier修复
$ yarn fix

# 启用 git hooks
$ yarn prepare
```

## 目录结构

```bash
├── .husky                     # husky (git hooks)
├── public                     # 静态资源 (会被直接复制)
│   └── .htaccess              # Apache 服务配置
│   └── robots.txt             # 爬虫规则配置
├── mock                       # 本地mock
├── src                        # 源代码
│   ├── icons                  # 图标
│   ├── router                 # 路由
│   ├── store                  # 状态管理
│   ├── styles                 # 样式
│   ├── types                  # 类型声明
│   ├── utils                  # 插件/方法
│   ├── vites                  # 页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.ts          # 权限管理
├── .editorconfig              # editorconfig 配置
├── .env.xxx                   # 环境变量配置
├── .eslintrc.cjs              # eslint 配置
├── .prettierrc                # prettier 配置
├── .lintstagedrc.js           # lint-staged 配置
├── commitlint.config.cjs      # commitlint 配置
├── stylelint.config.cjs       # stylelint 配置
├── package.json               # package.json 依赖
├── postcss.config.cjs         # postcss 配置
├── tsconfig.json              # typescript 配置
└── vite.config.js             # vite 配置
```

### 兼容性

| ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Edge ≥84                                                                                      | Firefox ≥83                                                                                            | Chrome ≥84                                                                                          | Safari ≥14.1                                                                                        |

### 项目部署

1. 项目使用[history 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)，需要进行后端配置（已默认配置 Apache 方案）