# vue-up

**Repository Path**: byz_senar/vue-up

## Basic Information

- **Project Name**: vue-up
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-11
- **Last Updated**: 2024-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# ZYB-VUE-UP
## Vue2 Options to Vue3 Option API / Composition API Converter

## RoadMap
[ ] 使用ast-grep 代替 gogocode
[x] 添加 elementui 插件
[x] 添加 zybpcui 插件
[x] 在线运行
[x] 支持自定义转换规则
[x] 支持 vuex 转换
[ ] 支持新旧文件对比

## Guide

### Introduction

`zyb-vue-up` 是一款将 Vue 2 options API 代码转换为 Vue3 `Options / Composition API` 代码的工具。 

##### 我们有以下特性
- 依赖分析，按入口/路由文件转换，自动分析依赖
- 丰富的插件系统，支持自定义转换规则
- CLI 工具支持
- Playground 支持 <https://ued.zuoyebang.cc/documents/zyb-vue-up/>
- 内置支持转换 Element UI 组件为 Element-Plus
- 内置支持VueX 转换为 Pinia 状态管理库


## Usage

### 使用 CLI

##### 安装
```
npm install -g zyb-vue-up
```

##### 使用


```sh
# vue2 升级 vue3
zyb-vue-up u
```
```sh
# vuex 转换为 pinia
# 缩写
zyb-vue-up vtp
# 或者完整命令
zyb-vue-up vuex-to-pinia
```
```sh
# 单独执行内部插件
zyb-vue-up plugin
```


### 使用 Playground
<https://ued.zuoyebang.cc/documents/zyb-vue-up/>


### Example
Input Vue 2 options API code:
输入Vue 2选项API代码：
```js
export default {
	data:{
      items: [],
      list: {},
    },
  props: ['loading', 'lazy', 'disabled'],
  methods:{
  	isLazy(){
      return this.lazy;
    },
    isLoading: function(){
      return this.loading;
    },
    isDisabled: () => {
      return this.disabled;
    }
  },
  watch:{
    loading(newValue){
      console.log("Value", newValue);
    },
    disabled:{
      immediate: true,
    handler(value) {
      this.bar = value;
    }
    }

  }
}
```

Output Vue 3 composition API code:
输出Vue 3组合API代码：
```js
import { reactive, watch } from 'vue';


// Data
const items = reactive([]);
const list = reactive({});

// Props
const props = defineProps(['loading', 'lazy', 'disabled']);

// Methods
const isLazy = function(){
	return props.lazy;
}

const isLoading = function(){
	return props.loading;
}

const isDisabled = () => {
	return props.disabled;
}


// Watch
watch(loading, function(newValue){
	console.log("Value", newValue);
})

watch(disabled, function (value) {
	this.bar = value;
}, { immediate: true })
```