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/

定义组件

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.vue

<template>
  <!-- HTML模板 -->
</template>

<script>
import { defineComponent } from 'vue'

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

组件的输入/输出

Angular

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

Vue

props: {
  icon: {
    type: String,
    default: '',
  },
},
emits: ['btnClick'],

模板语法

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"
  @click="onClick"
>
  <i v-if="icon"></i>
  <slot></slot>
</button>
<div v-html="data.tmw"></div>

class/style绑定

...

路由

...