184 lines
7.4 KiB
Markdown
184 lines
7.4 KiB
Markdown
## 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：实现对整个项目所有类的收集，然后各个文件不需要多次对各种文件的引入！
|