TsxVueClassApi
基于Vue Class Api，TypeScript，JSX，搭建的一套项目脚手架，实现了很多常用的注解，同时基于babel插件通过Ast语法树进行路由配置文件的自动生成等。
如果你喜欢JSX，那么这套脚手架你应该会十分喜欢，代码语法如下：
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：安装
npm i
npm run start
注意
Vue官方原生底层就支持JSX语法，但是官方没有关于Vue中使用JSX的文档，而且很多Vueui框架和第三方插件都没有相关语法，但是这不影响我们在Vue中正常使用JSX。很多语法需要特殊注意和改造一下！！
2：使用
下面说下这个脚手架的使用和注意事项。
2.1：项目结构
├── 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包市场！请完整阅读下面的插件文档，路由的配置文件让插件帮我们自动生成就好了！！！
2： 同时借鉴PHP开发框架Laravel开发终端命令行工具，通过命令帮我们创建带有模板代码能直接运行的文件！代码放在 bin/ 文件夹中！
使用手册：
╭─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 参数所有的文件类型
使用案例：
╭─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：实现对整个项目所有类的收集，然后各个文件不需要多次对各种文件的引入！