## TsxVueClassApi

基于`Vue Class Api`，`TypeScript`，`JSX`，搭建的一套项目脚手架，实现了很多常用的注解，同时基于`babel`插件通过`Ast`语法树进行路由配置文件的自动生成等。

如果你喜欢`JSX`，那么这套脚手架你应该会十分喜欢，代码语法如下：

```tsx
import "@pageLess/Home.less";
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@components/HelloWorld';
import { HomeLogic } from "@logic/page/Home.logic";
import { Route, RawLocation } from 'vue-router';
import { Getter } from "vuex-class";
import { BaseLayout, RouterMeta } from "@layout/base.layout";

@Component
export default class Home extends BaseLayout {

  // 抽离tsx页面组件中所有js业务逻辑到独立的类中，tsx组件只负责页面
  // 因为tsx内部this指向Vue，而logic.ts 中this默认指向类本身，但是这里需要this指向Vue和类本身
  // 所以这里传入tsx中的this对象
  private HomeLogic: HomeLogic = new HomeLogic(this);
  // RouterMeta 是 vue-router 的路由 meta 配置信息，
  // 会被我的插件通过ast语法树提取注入到自动生成的路由配置
  // 文件中，所以名字不要随意改动，值请随便！
  private RouterMeta: RouterMeta = {
    title: '首页',
    showNav: true,
    isLogin: true
  }
  @Getter('GettersTabsContentArr') public readonly getterFoo!: Array<any>;
  public async created() {
    // utils/文件夹下中所有类中的方法，只要使用了装饰器 @GlobalMethod() ，
    // 那么被装饰方法就会自动 prototype 到vue中的全局方法中
    console.log(this.$setToken())
    await this.HomeLogic.StartUp();
  }

  // 路由拦截器
  beforeRouteEnter(to: Route, from: Route, next: (to?: RawLocation | false | ((vm: Vue) => void)) => void) {
    console.log('beforeRouteEnter')
    next()
  }

  // 按钮组件
  public ClickButton(): JSX.Element {
    return (
      <el-button type="danger" onclick={async ()=>{
        await this.HomeLogic.getData()
      }}>发送请求</el-button>
    )
  }

  protected render() {
    return (
      <div class="home">
        <HelloWorld msg="向HelloWorld props传参"/>
        <input type="text" v-model={this.HomeLogic.title}/>
        <h2>{this.HomeLogic.title}</h2>
        {this.ClickButton()}
        <ul>
          {
            this.HomeLogic.List.map((v:any)=>{
              return <li>{v.name}</li>
            })
          }
        </ul>
      </div>
    )
  }
}
```

**这个脚手架我们正在项目中使用也在支持开发和完善阶段**

## 1：安装

> git clone https://gitee.com/bmycode/vue-class-api-tsx.git

> npm i

> npm run start

**注意**

`Vue`官方原生底层就支持`JSX`语法，但是官方没有关于`Vue`中使用`JSX`的文档，而且很多`Vue`ui框架和第三方插件都没有相关语法，但是这不影响我们在`Vue`中正常使用`JSX`。很多语法需要特殊注意和改造一下！！

## 2：使用

下面说下这个脚手架的使用和注意事项。

### 2.1：项目结构

```txt
├── README.md
├── babel.config.js babel配置文件
├── bin   终端NewFile工具
│   ├── config 
│   │   └── index.js
│   └── tinit
├── dist  打包后的文件夹
├── gulpfile.js  gulp配置文件，实现监听page自动生成路由文件
├── package.json 核心依赖配置文件
├── public       公共的资源文件
├── src          存放核心源码
│   ├── application  页面相关
│   │   ├── App.tsx 最外层顶级父组件
│   │   ├── assets  静态资源回合webpack打包进源码
│   │   ├── components 公共组件
│   │   ├── layout     TSX组件的父类
│   │   ├── logic      TSX组件中的js逻辑抽象层
│   │   │   ├── Base.logic.ts  所有TSX组件的js逻辑父类
│   │   │   └── page   对应页面的TSX组件逻辑抽象
│   │   └── page  存放TSX页面组件
│   └── core  核心JS层
│       ├── annotation 存放自己开发的装饰器
│       │   ├── Http.annotation.ts  请求装饰器
│       │   ├── Ioc.annotation.ts   IOC依赖装饰器
│       │   └── Register.annotation.ts 启动装饰器
│       ├── config    站点配置文件
│       │   ├── configure.config.ts 核心配置文件
│       │   └── route.config.ts     自动生成的路由配置文件
│       ├── dao                     axios的封装
│       ├── model                   TS存取器
│       ├── run                     项目的启动类
│       │   ├── init.run.ts   初始化Vue各种配置
│       │   └── start.run.ts  初始化Vue
│       ├── service           请求的service层封装
│       │   └── impl          请求service的具体类
│       ├── store             Vuex的配置
│       ├── types             自定义的声明文件
│       └── utils             工具函数
├── tsconfig.json             TS的配置文件
└── vue.config.js             Vue-cli3 的配合文件
```

### 2.2：使用注意事项 

**1：** 项目中的路由使用的是`vue-router`，同时我借鉴了`Nuxt.js`的思想，自己开发了路由配置文件自动生成的插件，这个插件是`Vue-cli 3`的插件，所以不能在`Vue cli 2`的项目中使用！！

插件源码已经提交`npm`包市场！请完整阅读下面的插件文档，路由的配置文件让插件帮我们自动生成就好了！！！

[vue-cli-plugin-tsx-autorouter](https://www.npmjs.com/package/vue-cli-plugin-tsx-autorouter)

**2：** 同时借鉴`PHP`开发框架`Laravel`开发终端命令行工具，通过命令帮我们创建带有模板代码能直接运行的文件！代码放在 `bin/` 文件夹中！

使用手册：

```bash
╭─bmy@MacBook-Pro /Applications/Source/TsxVueClassApi ‹master*› 
╰─$ ./bin/tinit -h
Usage: tinit [options]

Options:
  -t, --file-type <type>  文件类型: [page，logic，service，impl，less]
  -n, --file-name <name>  被创建的文件名称
  -i, --is-create <is>    是否为 -t 参数自动创建相关文件类型 (default: false)
  -v, --version           显示当前的版本
  -h, --help              display help for command
```

参数说明：
- -t：需要被创建的文件类型，取值 page（TSX页面），logic（TSX页面的js抽象层），service（请求中间层的接口），impl（实现接口的类），less（css样式文件）。可以多传！
- -n：需要被创建的文件名
- -i：如果数值为true，那么会自动创建 -t 参数所有的文件类型

使用案例：

```bash
╭─bmy@MacBook-Pro /Applications/Source/TsxVueClassApi ‹master*› 
╰─$ ./bin/tinit -t page logic -n Test
成功创建文件...
```

上面命令执行后会分别在`src/application/page`中创建创建文件`Text.tsx`页面组件，同时在`src/application/logic/page`中创建`Test.logic.ts`的逻辑层文件。

多试几次，请自行熟练掌握！！

## 3：开发中功能

- [ ] 1：实时监听`configure.config.ts`配置文件，然后根据`ApiList`中的对象`key`名称自动在`service`层的类中生成对应的方法，降低手动复制的低效率！

- [ ] 2：实现对整个项目所有类的收集，然后各个文件不需要多次对各种文件的引入！