# vue-simple

**Repository Path**: valon/vue-simple

## Basic Information

- **Project Name**: vue-simple
- **Description**: 目标: 糅合知识点
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2019-06-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-simple

## Project setup

```
yarn install
```

### Compiles and hot-reloads for development

```
yarn run serve
```

### 动态化路由免配置路由表

- pages 目录下新建页面将自动注入到路由表中，不需人为修改路由表
- pages 根下的`*.vue`或者 pages 根下一级文件夹下的`index.vue`将直接作为一级路由
- 路由名如果是`xxx_id.vue`的形式将被解析成`/xxx/:id`的动态路由
- 路由路径与 pages 目录下文件层级有直接关系
- pages 根下确保存在`notFound`组件，将作为 404 页面
- `/src/router/index.ts` 中，可以进行请求，以进行页面级别路由的权限过滤
- `/src/component/global`下的文件夹将作为全局组件，如果需要一些全局的组件可以在该目录下直接新建文件夹，
  参考该目录下的 test 目录
- 组件中可以设置 meta 属性，将映射到对应路由规则的 meta，参考`pages/home.vue`写法

### 请求封装处理

- `http/handler` 目录下可以完善对应状态码的 handler 供给 server 使用
- 请求统一交由 modal 目录处理再注入到 vue 中，参考`modal/loginModal.ts`,需要注意在 types/modal.d.ts 中补充对应的类型
- 根据业务需要增加请求的 modal 类型与 handler

### 引入全局样式

- `style/global`目录下可以定制全局 custom 样式，其中
  `var.scss` 可声明全局的样式变量，用于存储一些网站风格，
  `mixin.scss` 可声明一些常用的 mixin, 用于节省代码，像 flex, grid 这些
  `reset.scss` 可重置或初始化一些默认的样式
  `bemFn.scss` 本来打算设置 BEM 但是失败了，原因待查(怀疑原因出在 vue-cli-plugin-sass-resources-loader 上)

### 生产模式下常用文件 cdn

- 当项目处于生产模式下时，将不打包目前一些常用文件(vue,vuex, vue-router, axios, vuex),
  并使用 cdn 加载文件，cdn 使用 UnPkg 确保使用的包为最新稳定版本
- 可自行增加其他不打包的文件，例如 lodash, lambda, echart...

### hooks

- 可以在运行项目（serve|build）之前，先运行`yarn hook`, 它将把你在根目录下的.hooks 文件覆盖到 git 的勾子上
- 也可以利用 husky 来进行钩子事件处理, 参考`package.json`中的`husky`字段

## 不定期...有空更新...