# snake-web

**Repository Path**: seebin/snake-web

## Basic Information

- **Project Name**: snake-web
- **Description**: 快速API开发，Mock挡板工程之前端工程
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-20
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# snake-web

## 项目启动

```shell
git clone https://gitee.com/seebin/snake-web.git  
cd snake-web  
yarn install  
yarn serve  
```

### 打包

打包测试环境

```shell
yarn run build-dev
```

打包生产环境

```shell
yarn run build
```

## Node 脚本使用方法

快速生成开发文件脚本

> 一个目录对应一个功能,**最后一个目录名即为文件名**,只需要关注目录即可,不需要关注文件, 支持多级目录创建  
>如果出现复词目录,我们建议目录名与文件名以中划线链接

生成页面执行命令:

`yarn run view <目录>`

生成组件执行命令:

`yarn run com <目录>`

## TODO

vuex  状态管理(state、mutation、action等等)ok

routes  路由、路由守卫(校验登录状态) ok

utils  公共方法 ok

请求拦截(暂时为空-预留)、响应拦截(未登录的拦截) ok

请求方法封装(json请求、表单请求、get请求、formData/multipart请求) ok

快速生成开发文件脚本(生成视图页面、生成视图组件)ok

权限指令(权限码)

## 目录说明

```tree
├── babel.config.js                     // babel 配置文件
├── dist                                // 打包后文件夹
├── LICENSE                             // 开源协议
├── package.json                        // node包管理文件
├── public                              // 公共目录
│   ├── favicon.ico                     // 站点icon
│   ├── img                             // 图片目录
│   ├── index.html                      // 首页文件
│   ├── manifest.json                   // manifest配置文件
│   └── robots.txt                      // 机器协议
├── README.md                           // 文档说明
├── script                              // 脚本文件夹
│   └── generate.js                     // node脚本，用来生成视图与组件
├── src                                 // 源代码目录
│   ├── ant-design.ts                   // ant-design组件引入配置
│   ├── App.vue                         // vue根文件
│   ├── assets                          // 静态资源目录
│   ├── components                      // 用来放置组件的目录
│   │   ├── footer                      // 相关组件
│   │   └── header                      // 相关组件
│   ├── config                          // 项目配置文件目录
│   │   └── config.ts                   // 项目配置文件
│   ├── main.ts                         // 程序主入口
│   ├── registerServiceWorker.ts        // sw注册文件
│   ├── request                         // 请求相关目录
│   │   ├── api.ts                      // 接口列表文件
│   │   └── index.ts                    // 接口请求配置
│   ├── router                          // 路由相关目录
│   │   ├── index.ts                    // 路由配置
│   │   └── router.ts                   // 路由列表
│   ├── shims-tsx.d.ts                  // vue ts支持文件
│   ├── shims-vue.d.ts                  // vue ts支持文件
│   ├── store                           // vuex目录
│   │   ├── index.ts                    // vuex主入口文件
│   │   └── module                      // 模块目录
│   │       └── views                   // 视图状态模块
│   │       └── component               // 组件状态模块
│   ├── utils                           // 工具目录
│   │   └── index.ts                    // 工具方法文件
│   └── views                           // 视图目录
├── tsconfig.json                       // ts配置文件
├── tslint.json                         // ts编码约束文件
├── vue.config.js                       // vue工程配置文件
└── yarn.lock                           // yarn管理文件
```

## 相关链接

[Ant-design-vue](https://ant-design-vue.gitee.io/docs/vue/introduce-cn/)

[vue官方文档](https://cn.vuejs.org/v2/guide/)

[axios相关文档](http://www.axios-js.com/zh-cn/docs/)

[使用Vue.js和TypeScript编写基于类的组件](https://alligator.io/vuejs/typescript-class-components/)

[vue-cli3环境变量与分环境打包](https://blog.csdn.net/zhangyun1107892254/article/details/87351284)