Skip to content

Commit

Permalink
Chore: (release) 1.2.15
Browse files Browse the repository at this point in the history
  • Loading branch information
Maorey committed May 12, 2020
1 parent f5f19d4 commit 957f9fe
Show file tree
Hide file tree
Showing 14 changed files with 607 additions and 462 deletions.
11 changes: 8 additions & 3 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@ SKIN=light
# 皮肤全局(window)变量名
SKIN_FIELD=s

# 全局查询字段(从访问地址查询参数获取, ajax带上该字段, 用于微服务调试指定目标)
# ajax全局查询字段(正则)
SEARCH_FIELD=_target\d+

# 路由配置别名 (json [ [别名, 目录, 分组(cli参数)], ... ])
_ROUTES=[["@iRoute", "src/pages/index/config/route", ["iFoo", "iBar"]], ["@oRoute", "src/pages/other/config/route", ["oFoo", "oBar"]]]
# 指定入口或通过cli命令(优先 --entries=foo,bar)指定,逗号分隔
# _ENTRIES=index
# 配置路由别名, json: [
# [别名, 路径(相对根目录或入口), 默认指令(可省略)] 或者
# [别名, 路径, [允许的指令, ...], 默认指令(可省略)]
# ... ], 可使用cli命令指定指令(优先 --routes=foo.bar,bar.foo )
_ROUTES=[["@iRoute", "index/route"], ["@oRoute", "other/route"]]
7 changes: 7 additions & 0 deletions .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,17 @@ DEV_SERVER_PORT=9000
# DEV_SERVER_PAGE=/
# 是否使用https (不支持http2) 默认false
# DEV_SERVER_HTTPS=true

# 开发环境sourceMap https://webpack.js.org/configuration/devtool/#devtool 默认eval
# DEV_TOOL=eval
# https://webpack.js.org/configuration/output/#outputecmaversion
# ES_VERSION=2020

# 动态代理字段,数字与PROXY_TARGET对应
# 可指定为: 环境变量字段(比如:PROXY_TARGET)/ip/完整url
PROXY_FIELD=proxy
SEARCH_FIELD=$PROXY_FIELD\d*|_target\d+

# 代理接口服务地址,与 BASE_PATH 对应,比如 BASE_PATH1 对应 PROXY_TARGET1
PROXY_TARGET=https://127.0.0.1:9000/api

Expand Down
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# 更新日志

## v 1.2.15

- 指定入口
- 指定别名
- 动态指定调试参数

## v 1.2.14

- enum重命名为enums
Expand Down
116 changes: 83 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@ vue + vuex + vue router + TypeScript(支持 JavaScript) 模板
- [建议开发环境](#建议开发环境)
- [浏览器支持](#浏览器支持)
- [安装](#安装)
- [命令参考(Terminal)](#命令参考(Terminal))
- [开发环境](#开发环境开发调试时使用)
- [构建](#生成部署包)
- [命令参考(Terminal)](#命令参考Terminal)
- [启动开发环境](#启动开发环境)
- [代码风格检查和修正](#代码风格检查和修正提交-git-时会自动执行)
- [e2e测试](#e2eend-to-end-测试)
- [单元测试](#单元测试)
- [命令帮助](#命令帮助)
- [e2e测试](#e2eend-to-end-测试)
- [生成](#生成部署包)
- [其他命令](#其他命令)
- [指定入口](#指定入口SPA-逗号分隔)
- [指定路由配置](#指定路由配置通过别名)
- [命令帮助](#命令帮助)
- [联调](#联调)
- [说明及注意事项](#说明及注意事项)
- [目录结构](#目录结构)
- [风格建议](#风格建议)
Expand Down Expand Up @@ -53,7 +57,7 @@ VSCode 插件

> 推荐工具: [`@vue/cli`](https://cli.vuejs.org/zh/guide)(最新), 全局安装时可使用 `vue ui` 命令启动图形化界面管理工程
> 推荐字体: [FiraCode](https://github.com/tonsky/FiraCode)
> 推荐开发字体: [FiraCode](https://github.com/tonsky/FiraCode)
## 浏览器支持

Expand All @@ -67,7 +71,7 @@ VSCode 插件

```bash
git config core.ignorecase false # 使git对文件名大小写敏感
# 或者修改 .git/config [core] ignorecase = false
# 或者修改 .git/config [core] ignorecase=false
```

`.lock` 文件时**只需**执行 `yarn` (或`npm i`) 安装即可, 否则如下:
Expand Down Expand Up @@ -109,18 +113,16 @@ git config core.ignorecase false # 使git对文件名大小写敏感
yarn dev # --port 9876 : 本次启动使用9876端口 (可以在 .env.development.local 文件中设置)
```

### 构建(生成部署包)
### 代码风格检查和修正(提交 Git 时会自动执行)

```bash
yarn build # --watch: 跟踪文件变化 --report: 生成打包分析
yarn lint
```

同时会生成文件名/chunk名[映射文件](build/~fileName) (公共代码抽到`_`开头的文件里了)

### 代码风格检查和修正(提交 Git 时会自动执行)
### 单元测试

```bash
yarn lint
yarn test:unit # --watch : 跟踪文件变化
```

### e2e(end-to-end) 测试
Expand All @@ -129,36 +131,81 @@ yarn lint
yarn test:e2e
```

### 单元测试
### 生成(部署包)

```bash
yarn test:unit # --watch : 跟踪文件变化
yarn build # --watch: 跟踪文件变化 --report: 生成打包分析
```

### 命令帮助
同时会生成文件名/chunk名[映射文件](build/~fileName) (公共代码抽到`_`开头的文件里了)

### 其他命令

```bash
yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
```
#### 指定入口(SPA 逗号分隔)

可配置和使用指定路由配置(请使用别名引用路由配置)进行开发/构建:
- 配置 [.env](.env) `_ROUTES`, 示例:
1. 使用 [.env](.env) `_ENTRIES` 配置, 示例: `_ENTRIES=foo,bar`
2. 通过cli命令: `entries` (覆盖1):

```bash
_ROUTES=[["@iRoute", "src/pages/index/config/route", ["iFoo", "iBar"]], ["@oRoute", "src/pages/other/config/route", ["oFoo", "oBar"]]]
yarn dev --entries=foo
yarn build --entries=foo,bar
```

- `route` 目录结构
#### 指定路由配置(通过别名):

1. `route` 目录结构

```bash
├── route # 全部路由配置文件夹(未指定时默认)
├── route.foo # 路由配置文件夹: foo
├── route.bar # 路由配置文件夹: bar
├── route # 全部路由配置文件夹(缺省指令)
├── route.foo # foo配置 指令: foo
├── route.bar # bar配置 指令: bar
# ...
```

2. 配置 [.env](.env) `_ROUTES`, 示例:

```bash
# 配置路由别名, json: [
# [别名, 路径(相对根目录或入口), 默认指令(可省略)] 或者
# [别名, 路径, [允许的指令, ...], 默认指令(可省略)]
# ... ], 可使用cli命令指定指令(优先 --routes=foo.bar,bar.foo )
_ROUTES=[["@fRoute", "foo/route", "foo"], ["@bRoute", "src/pages/bar/route", ["foo", "bar"], "bar"]]
```

3. 通过cli命令: `routes`: `入口.指令,...`

```bash
yarn dev --routes=foo.bar
yarn build --routes=bar # 省略形式: 指令唯一时
yarn build --routes=foo.bar,bar.foo
```

#### 命令帮助

yarn dev --iFoo # 只加载foo配置
yarn build --oBar # 只加载foo配置
yarn dev --iBar --oFoo # 若多个html入口, 每个入口支持指定一个配置
```bash
yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
```

### 联调

支持通过浏览器地址栏动态传递调试参数

- 环境变量`SEARCH_FIELD`: **所有**ajax请求将会把满足该正则的参数传递给服务端(开发环境代理服务器)

- 动态代理字段, 通过`PROXY_FIELD`指定, 数字与静态代理(`BASE_PATH` + `PROXY_TARGET`)一致, 可以指定为环境变量名(比如 PROXY_TARGET)/ip/域名/完整url. 匹配的代理字段将**不会**传递给服务器

```bash
# 若文件 .env.development 配置如下:
# 相对路径(hash router)
# BASE_PATH=foo
# PROXY_TARGET=http://foo.com:666/foo
# BASE_PATH1=bar
# PROXY_TARGET1=https://bar.com:999/bar
# PROXY_FIELD=proxy
# SEARCH_FIELD=$PROXY_FIELD\d*
http://{ip}:{port}/{path}?proxy=http://127.0.0.1/foo&proxy1=0.0.0.0
# 结果: BASE_PATH 为 foo 的接口代理到 http://127.0.0.1/foo
# BASE_PATH 为 bar 的接口代理到 https://0.0.0.0:999/bar
```

## 说明及注意事项
Expand Down Expand Up @@ -214,7 +261,8 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
- `@` -> `src`
- `@com` -> `src/components`
- `@{entry}` -> 页面入口文件所在目录, 如: `@index`
- `@{entry}Com` -> 页面入口文件所在目录下的 `components` 目录, 如: `@indexCom`
- `@{entry}Com` -> 页面入口文件所在目录下的 `components` 目录(若存在), 如: `@indexCom`
- [路由配置别名](#指定路由配置通过别名)

**Tips**: 在 `scss` 中使用 `~` 解析 `别名`/`依赖包` 对应目录. 示例:

Expand Down Expand Up @@ -310,7 +358,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
- `enum/type/interface` 需要导出的直接 `export` (否则可能会得到 undefined), 其他的除了字典(硬编码)和只有默认导出的外, 先定义再`export`(IDE 提示更友好), 并且`export`语句放到最后
- 不要使用 `$` 作为组件事件名, 该名字已被[异步组件刷新](src/components/hoc)占用
- Vue实例**私有属性**命名规则(避免 [属性名](https://cn.vuejs.org/v2/style-guide/#私有属性名-必要) 冲突):
- **私有属性**命名规则(避免 [属性名](https://cn.vuejs.org/v2/style-guide/#私有属性名-必要) 冲突):
- `$_` 实例命名空间(在保证易维护的前提下可以使用单字母, 但应尽量避免)
- `_$` **全局/跨组件/hack**命名空间, 命名前应**先全局搜索**是否有重复
- `/^[$_]+_$/` 注入**vue data 选项**命名空间应满足该正则, 即以`_`结尾(因为以`$_`其中一个字符开头的Vue不会劫持), 命名前应**先全局搜索**是否有重复
Expand Down Expand Up @@ -607,7 +655,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
```
- 所有视图组件可接收props:`route`代替`this.$route`, 区别是: **只在首次进入当前视图或当前视图url发生变化时改变**
- 路由视图不需要被缓存的, 可以在`deactivated`钩子销毁实例(`this.$destroy()`)或者`activated`钩子进行更新
- 路由视图不需要被缓存的, 可以在meta申明/`deactivated`钩子销毁实例(`this.$destroy()`)`activated`钩子进行更新
- 为避免渲染错误, 请务必为<b style="color: red;">循环创建的组件</b>**加上 `key`**, 特别是 `tsx/ts/jsx/js`
### 配置和优化
Expand Down Expand Up @@ -817,6 +865,8 @@ http {
2. 先执行 `yarn lint` 等相关命令, 待消除所有错误后, 再提交
3. 确保开发时无相关报错(浏览器中页面遮罩显示错误, 控制台打印警告), 特别注意 `console.log` , `debugger``定义但未使用变量`, 只在开发环境是警告, 其他都是错误
- 图标概率乱码: `scss` 压缩模式下 (compressed mode) 使用 UTF-8 byte order mark (UTF-8 with BOM) 代替 @charset 声明语句导致, 暂时先使用css `import 'element-ui/lib/theme-chalk/base.css'`
### 问题及思考
- Vue 异步组件加载失败重试: 最好还是 Vue 对异步组件提供支持[#9788](https://github.com/vuejs/vue/issues/9788)
Expand All @@ -829,6 +879,6 @@ http {
### 其他
- 期待 [vue3.0](https://github.com/vuejs/vue/projects/6) & [webpack 5.0](https://github.com/webpack/webpack/projects/5) [正式版](https://github.com/webpack/changelog-v5/blob/master/README.md)
- 期待 [vue3.0](https://github.com/vuejs/vue/projects/6)及其生态正式版 & [webpack 5.0](https://github.com/webpack/webpack/projects/5) [正式版](https://github.com/webpack/changelog-v5/blob/master/README.md)
- `crypto-js` v4 **不支持 IE10**
- `TypeScript`(3.8.2) `const enum` 编译为内联代码(`inline code`)的支持有限, 尽量使用常量成员, 然后等[更新](https://github.com/microsoft/TypeScript)吧
Loading

0 comments on commit 957f9fe

Please sign in to comment.