Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ccbscf-ui-transferNew to Visual Studio Code? Get it now.
ccbscf-ui-transfer

ccbscf-ui-transfer

mpw

|
17 installs
| (0) | Free
vue2 => vue3
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

ccbscf-ui-transfer

  • iview 升级 ccbscf-ui-plus 组件库转换器
  • vue2 升级 vue3 代码转换器

触发 vscode 命令

  1. command + shift + translate vue
    • 参考 vue2 迁移指南
    • iview标签转换为ccbscf-ui-plus
  2. command + shift + translate iview
    • 只对iview标签转换为ccbscf-ui-plus

参考 vue2 迁移指南

  • 只将 vue-html部分 iview组件标签转换为ccbscf-ui-plus组件标签
  • 替换v-on="$listeners"属性为v-bind="$attrs"
  • 替换:value 为 :modelValue,<Option></Option>标签除外
  • 删除.native语法
  • $emit("input",value) 替换为 $emit("update:value",value)
  • 替换 iview 、view-design 为ccbscf-ui-plus
  • 定义emits:[]
  • 替换slot,创建<template #slotName></template>标签 进行兼容
    <button slot="append">查询</button>
    
    转换后
    <template #append>
      <c-button>查询</c-button>
    </template>
    
  • 不支持的属性给出提示,指导手动修改
    // [Vue3 TODO]  In 3.x, the $children property is removed. Instead, we recommend using template refs.
    this.$children;
    

vue3

  • eventbus

    // vue3 eventbus
    import emitter from "tiny-emitter/instance";
    
    export default {
      $on: (...args) => emitter.on(...args),
      $once: (...args) => emitter.once(...args),
      $off: (...args) => emitter.off(...args),
      $emit: (...args) => emitter.emit(...args),
    };
    
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft