You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -50,7 +49,7 @@ Please refer to [Vue2ToVue3](https://github.com/zdravkov/Vue2ToVue3) to see the
50
49
51
50
### Global API
52
51
53
-
[Migration Guide from Vue.js team](https://v3.vuejs.org/guide/migration/global-api.html)
52
+
[Migration Guide from Vue.js team](https://v3.vuejs.org/guide/migration/global-api.html)
54
53
55
54
- Transform `Global API` to a plugin
56
55
@@ -60,22 +59,22 @@ Please refer to [Vue2ToVue3](https://github.com/zdravkov/Vue2ToVue3) to see the
60
59
61
60
```js
62
61
// directive/index.js
63
-
importVuefrom"vue";
64
-
importmyDirectivefrom"@/directive/myDirective";
62
+
importVuefrom'vue'
63
+
importmyDirectivefrom'@/directive/myDirective'
65
64
66
-
Vue.directive('myDirective', myDirective) ;
65
+
Vue.directive('myDirective', myDirective)
67
66
```
68
67
69
68
In Vue 3:
70
69
71
70
```js
72
71
// directive/index.js
73
-
import myDirective from "@/directive/myDirective";
72
+
import myDirective from '@/directive/myDirective'
74
73
75
-
export default{
76
-
install: app => {
77
-
app.directive('myDirective', myDirective) ;
78
-
}
74
+
export default{
75
+
install: app => {
76
+
app.directive('myDirective', myDirective)
77
+
}
79
78
}
80
79
```
81
80
@@ -84,18 +83,18 @@ Please refer to [Vue2ToVue3](https://github.com/zdravkov/Vue2ToVue3) to see the
84
83
```js
85
84
// main.js
86
85
import MyDirective from '@/directive'
87
-
86
+
88
87
Vue.createApp(App).use(myDirective)
89
88
```
90
89
91
-
- Transform `Global Configuration` by `window.app=app`
90
+
- Transform `Global Configuration` by `window.app=app`
92
91
93
-
- Configure the global app instance in`main.js`
92
+
- Configure the global app instance in`main.js`
94
93
95
94
```js
96
95
// main.js
97
96
const app = Vue.createApp(App)
98
-
window.app = app // Configure the global app instance
97
+
window.app = app // Configure the global app instance
99
98
app.mount('#app')
100
99
```
101
100
@@ -131,17 +130,17 @@ Please refer to [Vue2ToVue3](https://github.com/zdravkov/Vue2ToVue3) to see the
131
130
132
131
Please refer to [Migration Guide from Vue.js team](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax) for more details.
133
132
134
-
`slot` attributes are deprecated since Vue 2.6.0. `v-slot` was introduced for named and scoped slots. In`vue-codemod` , the `slot-attribute` rule can transform `slot` attributes to `v-slot` syntax：
133
+
`slot` attributes are deprecated since Vue 2.6.0. `v-slot` was introduced for named and scoped slots. In`vue-codemod` , the `slot-attribute` rule can transform `slot` attributes to `v-slot` syntax：
135
134
136
-
```vue
135
+
```html
137
136
<base-layout>
138
137
<p slot="content">2.5 slot attribute in slot</p>
139
138
</base-layout>
140
139
```
141
140
142
-
will be transformed to:
141
+
will be transformed to:
143
142
144
-
```vue
143
+
```html
145
144
<base-layout>
146
145
<template v-slot:content>
147
146
<p >2.5 slot attribute in slot</p>
@@ -151,14 +150,14 @@ will be transformed to:
151
150
152
151
For those named slots that use `v-if` and `v-else` together, `vue-codemod` will return an error.
@@ -198,8 +197,8 @@ In Vue 3, `$on`, `$off` and `$once` instance methods are removed. Component inst
198
197
199
198
Please refer to [Migration Guide from Vue.js team](https://v3.vuejs.org/guide/migration/events-api.html) for more details.
200
199
201
-
- Add `mitt` dependencies
202
-
200
+
- Add `mitt` dependencies
201
+
203
202
```bash
204
203
yarn add mitt
205
204
// or
@@ -225,22 +224,22 @@ Please refer to [Migration Guide from Vue.js team](https://v3.vuejs.org/guide/mi
225
224
```js
226
225
// main.js
227
226
import bus from '@/bus'
228
-
227
+
229
228
const app = createApp(App).mount('#app')
230
229
app.config.globalProperties.$bus = bus
231
230
```
232
231
233
232
### /deep/
234
233
235
234
- `>>>` and `/deep/` are not supported
236
-
- `/deep/ .el-input {}` should be transformed to `:deep(.el-input) {}`
235
+
- `/deep/ .el-input {}` should be transformed to `:deep(.el-input) {}`
237
236
- `v-deep:: .bar {}` should be transformed to `::v-deep(.bar) {}`
238
237
239
238
### Delimiter
240
239
241
240
In Vue 2, event internal statement can use `newline character` as the delimiter.
242
241
243
-
```vue
242
+
```html
244
243
<button @click="
245
244
item.value = ''
246
245
clearTag()
@@ -250,7 +249,7 @@ In Vue 2, event internal statement can use `newline character` as the delimiter.
250
249
251
250
But in Vue 3, `newline character` is no longer used as the delimiter. A `;` or `,` is needed.
252
251
253
-
```vue
252
+
```html
254
253
<button @click="
255
254
item.value = '';
256
255
clearTag()
@@ -339,7 +338,7 @@ const asyncRoutes = [
339
338
340
339
### All navigations in Router 4 are asynchronous
341
340
342
-
It may caused some render failure for components. For example, the following `RuleFilter.vue` component:
341
+
It may caused some render failure for components. For example, the following `RuleFilter.vue` component:
343
342
344
343
```js
345
344
watch: {
@@ -365,7 +364,7 @@ mounted() {
365
364
}
366
365
```
367
366
368
-
So you may need to wait for the router to be *ready* before trigger `filterSearch`:
367
+
So you may need to wait for the router to be _ready_ before trigger `filterSearch`:
369
368
370
369
```js
371
370
watch: {
@@ -379,43 +378,32 @@ watch: {
379
378
this.$bus.$emit('filterSearch', param)
380
379
})
381
380
}
382
-
383
381
}
384
382
}
385
383
}
386
384
```
387
385
388
386
## Element-ui
389
387
390
-
Currently, [Element UI](https://github.com/ElemeFE/element) provides a Vue3-supported libraries [Element Plus](https://github.com/element-plus/element-plus). The code related to `Element` needs to upgrade manuallly.
391
-
392
-
### Upgrade dependencies
393
-
394
-
```bash
395
-
npm install element-plus
396
-
npm remove element-ui
397
-
```
398
-
399
-
### Import modules
388
+
Currently, [Element UI](https://github.com/ElemeFE/element) provides a Vue3-supported libraries [Element Plus](https://github.com/element-plus/element-plus). `vue-codemod` has completed most of the upgrade scenarios such as dependency upgrade and dependency replacement, but `Element-Plus` is still in beta testing, some functions may be unstable, and developers need to upgrade manually.
400
389
401
-
> We are developing auto transformation for element-ui import.
390
+
### Import CSS
402
391
403
-
- The import source has changed. Users can replace it globally in IDE: `import xx from 'element-ui'` -> `import xx from 'element-plus'`
404
-
- Some components' name has changed. Users need to upgrade manually:`import { Message } from 'element-ui'`->`import { ElMessage } from 'element-plus'`
392
+
Part of global CSS should be imported from `element-plus`: `import('element-ui/lib/theme-chalk/index.css')` should be replaced with `import('element-plus/lib/theme-chalk/index.css')`
405
393
406
394
### `slot` attribute in el-table
407
395
408
-
Must use `<template>` to wrap the `slot`. For example:
396
+
Must use `<template>` to wrap the `slot`. For example:
### Step 2：[Upgrade elment-ui to element-plus](https://github.com/originjs/vue2-element-touzi-admin/commit/8cddf35dcf04165fbf997e378205c5428dcb5e7f)
200
200
201
-
The biggest limitation of Vue 3 migration is the dependencies. If some components in your source code don't support Vue 3, we suggest your project remain unchanged until the Vue 3 supported version release.
201
+
The biggest limitation of Vue 3 migration is the dependencies. If some components in your source code don't support Vue 3, we suggest your project remain unchanged until the Vue 3 supported version release.
202
202
203
203
### Step 3：[Fix errors or warnings from Global API](https://github.com/originjs/vue2-element-touzi-admin/commit/c1a7288299f80e23d5b1ad32f111ee10564ad8bd)
0 commit comments