# 记一次 vue + ts 开发踩坑

本次项目开发，使用了 vue-cli + ts + eslint + prettier + vs-code + vetur，

## 遇到的问题

### 配置相关

* vscode eslint 不能在在\*.vue或\*.ts 中正常工作
  * 需要为eslint.options.validateLanguage添加 vue 和ts 的支持
* vscode prettier不能在\*.vue或\*.ts 中正常工作
  * 需要修改prettier-eslint的源码
  * [issue 地址](https://github.com/vuejs/vetur/pull/846/commits/1a1f7f55d1baa01ac7d41ca292069cb4f98047c7)
* eslint 提示 import 的模块 unsused
  * 手动安装eslint eslint-plugin-typescript 并设置unsed-var规则
* vscode始终提示装饰器的警告无法找到
  * vue配合tsconfig时，需要将tsconfig所在的文件作为单独的workspace打开
* 在style less中使用alias路径
  * <https://www.jianshu.com/p/901c7eaed40f>
  * 使用 `~@/xxx/xxx`
* 在vue中使用jsx
  * [参考 medium](https://medium.com/@hayavuk/using-jsx-with-vue-js-and-typescript-d6963e44de48)
  * [参考 用jsx写vue组件 alloy team](http://www.alloyteam.com/2017/07/12918/)
  * tsconfig.json:`jsx:preserve, jsxRefactor: h`
    * Warning: 不应该让ts对jsx进行处理； 需要声明额外的d.ts，让ts知道jsx的类型
  * use .tsx
* 多个export \* from './model' 提示undefined
  * 每个export之间需要换行

### 开发相关

* koa使用 axios 转发请求，并转发：

  如果需要使用koa转发二进制资源，需要设置`responseType: 'arraybuffer'`

  ```javascript
  const res = await axios({...})
  ctx.set(res.headers);
  ctx.status = res.status;
  ctx.body = res.data;
  ```

## 如何构建 https 服务

1. 准备一台服务器，准备一个域名
2. 构建node server
3. 证书
   * 格式说明
   * 获得自签名证书
   * 获得正式证书（阿里云 赛门铁克）
4. node server use https server & certificates
5. http-server use certificates

## mongodb 如何备份数据

1. atlas 云服务，实时备份，定时备份
2. cp
3. [Mongdodump](https://docs.mongodb.com/manual/reference/program/mongodump/#bin.mongodump) & [mongorestore](https://docs.mongodb.com/manual/reference/program/mongorestore/#bin.mongorestore)
   * 适合轻量数据
   * 不会备份索引，需要restore之后重新构建
   * 不会备份 local db
4. [Mongo ops](https://docs.opsmanager.mongodb.com/current/application/)

## github + jenkins 持续构建

* 安装jenkins
  * 参考（[**手把手教你搭建Jenkins+Github持续集成环境.md**](https://github.com/muyinchen/woker/blob/master/%E9%9B%86%E6%88%90%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E6%90%AD%E5%BB%BAJenkins%2BGithub%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E7%8E%AF%E5%A2%83.md#toc1)）
  * <https://jenkins.io/doc/book/installing/>
  * jenkins安装失败（<https://stackoverflow.com/questions/19457867/problems-installing-latest-version-of-jenkins）>
* 任务相关
  * [不能在shell里执行cd操作](https://askubuntu.com/questions/481715/why-doesnt-cd-work-in-a-shell-script)
    * 不允许在jenkins的主进程中修改 working dir
    * 只能在jenkins的容器里执行操作
  * [git revision issue](https://issues.jenkins-ci.org/browse/JENKINS-20502)
    * 指定 branch为空
    * 或者指定 refspec

## 使用docker容器集成 server 服务

## 推荐的库类

* 项目中使用的库类
  * **pinyin**  中文拼音分词，获取拼音、多音字
  * **dayjs**  类moment api的时间库
  * **node-cache**  node memory内存
  * **consolidate**  模版引擎渲染
  * **nodejsonwebtoken** 接口安全校验 [example](https://blog.theodo.fr/2016/11/securize-a-koa-api-with-a-jwt-token/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolconan.gitbook.io/roadmap/others/posts/190119-vue-and-ts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.