Angular to Vue 移植指南

统一术语

DevUI/DevUI 组件库：DevUI 官方的 Angular 版本组件库，官网：https://devui.design，源码：https://github.com/devcloudfe/ng-devui。

Vue DevUI/Vue DevUI 组件库：从官方 DevUI 移植出来的 Vue3 版本的 DevUI 组件库。

原则

Vue DevUI 项目只是移植 Angular 版本的 DevUI 组件库，除了 Vue 语法层面的改动之外，不做过多发挥。

Vue DevUI 组件库的 API/Demo 必须保持和 DevUI 组件库的完全一致，目录结构/文件/类/函数命名尽量保持一致，如在移植过程中发现 DevUI 组件库的 BUG 或者不合理之处，请给 DevUI 组件库提 issue。

目录结构

主要分成两个部分：devui/src。

├── devui 组件源码
|  ├── button
|  ├── ...
|  └── style
├── src 官网/组件API/Demo
|  ├── app.route.ts
|  ├── app.vue
|  ├── assets
|  ├── components
|  └── main.ts

Angular vs Vue

具体Vue语法建议参考Vue官网教程：https://v3.cn.vuejs.org/guide/

Vue 3 Babel JSX 插件

定义组件

Angular

button.module.ts

button.component.ts|html|scss

@Component({
  selector: 'd-button',
  templateUrl: './d-button.component.html',
  styleUrls: ['./d-button.component.scss'],
})
export class ButtonComponent {
  // 组件生命周期和交互逻辑
}

Vue

button.tsx

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'd-button',
  props: {}, // 输入输出
  setup(props, ctx) {
    // 组件生命周期和交互逻辑
  }
})
</script>

组件的输入/输出

Angular

@Input() icon: string; // 输入
@Output() btnClick = new EventEmitter<any>(); // 输出

Vue

props: {
  icon: {
    type: String,
    default: '',
  },
  btnClick: {
    type: Function as unknown as () => ((event: MouseEvent) => void)
  }
}

模板语法

Angular

<button
  [type]="type" // 绑定变量
  (click)="onClick($event)" // 绑定事件
>
  <span *ngIf="icon"></span> // if逻辑
  <ng-content></ng-content> // 内容插槽
</button>
<div [innerHTML]="data.tmw"></div> // 显示HTML内容

Vue

<button
  type={type}
  onClick={onClick}
>
  { icon ? <i></i> : null }
  { ctx.slots.default?.() }
</button>
<div domPropsInnerHTML={data.tmw}></div>

class/style绑定

class

<div className={`devui-accordion-item-title ${ disabled ? 'disabled' : '' }`}></div>

style

const width = '100px'

<button style={{ width: width, fontSize: '16px' }}></button>

路由

...