Skip to content

Commit bb0cbb6

Browse files
yyx990803yyx990803
committed
init
0 parents  commit bb0cbb6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+4594
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.DS_Store
3+
.pnpm-debug.log
4+
.vitepress/dist

‎.vitepress/config.js

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
export default {
2+
title: 'Vue 3 Migration Guide',
3+
description: 'Guide on migrating from Vue 2 to Vue 3',
4+
srcDir: 'src',
5+
6+
themeConfig: {
7+
nav: [
8+
{ text: 'Overview', link: '/' },
9+
{
10+
text: 'Breaking Changes',
11+
link: '/breaking-changes/'
12+
},
13+
{ text: 'New Recommendations', link: '/recommendations' },
14+
{ text: 'Migration Build', link: '/migration-build' },
15+
{ text: 'Vue 3 Docs', link: 'https://vuejs.org' }
16+
],
17+
18+
sidebar: {
19+
'/breaking-changes/': [
20+
{
21+
text: 'Global API',
22+
children: [
23+
{
24+
text: 'Global API Application Instance',
25+
link: '/breaking-changes/global-api'
26+
},
27+
{
28+
text: 'Global API Treeshaking',
29+
link: '/breaking-changes/global-api-treeshaking'
30+
}
31+
]
32+
},
33+
{
34+
text: 'Template Directives',
35+
children: [
36+
{ text: 'v-model', link: '/breaking-changes/v-model' },
37+
{
38+
text: 'key Usage Change',
39+
link: '/breaking-changes/key-attribute'
40+
},
41+
{
42+
text: 'v-if vs. v-for Precedence',
43+
link: '/breaking-changes/v-if-v-for'
44+
},
45+
{ text: 'v-bind Merge Behavior', link: '/breaking-changes/v-bind' },
46+
{
47+
text: 'v-on.native modifier removed',
48+
link: '/breaking-changes/v-on-native-modifier-removed'
49+
}
50+
]
51+
},
52+
{
53+
text: 'Components',
54+
children: [
55+
{
56+
text: 'Functional Components',
57+
link: '/breaking-changes/functional-components'
58+
},
59+
{
60+
text: 'Async Components',
61+
link: '/breaking-changes/async-components'
62+
},
63+
{ text: 'emits Option', link: '/breaking-changes/emits-option' }
64+
]
65+
},
66+
{
67+
text: 'Render Function',
68+
children: [
69+
{
70+
text: 'Render Function API',
71+
link: '/breaking-changes/render-function-api'
72+
},
73+
{
74+
text: 'Slots Unification',
75+
link: '/breaking-changes/slots-unification'
76+
},
77+
{
78+
text: '$listeners merged into $attrs',
79+
link: '/breaking-changes/listeners-removed'
80+
},
81+
{
82+
text: '$attrs includes class & class',
83+
link: '/breaking-changes/attrs-includes-class-style'
84+
}
85+
]
86+
},
87+
{
88+
text: 'Custom Elements',
89+
children: [
90+
{
91+
text: 'Custom Elements Interop Changes',
92+
link: '/breaking-changes/custom-elements-interop'
93+
}
94+
]
95+
},
96+
{
97+
text: 'Removed APIs',
98+
children: [
99+
{
100+
text: 'v-on keyCode Modifiers',
101+
link: '/breaking-changes/keycode-modifiers'
102+
},
103+
{ text: 'Events API', link: '/breaking-changes/events-api' },
104+
{ text: 'Filters', link: '/breaking-changes/filters' },
105+
{
106+
text: 'inline-template',
107+
link: '/breaking-changes/inline-template-attribute'
108+
},
109+
{ text: '$children', link: '/breaking-changes/children' },
110+
{ text: 'propsData option', link: '/breaking-changes/props-data' }
111+
]
112+
},
113+
{
114+
text: 'Other Minor Changes',
115+
children: [
116+
{
117+
text: 'Attribute Coercion Behavior',
118+
link: '/breaking-changes/attribute-coercion'
119+
},
120+
{
121+
text: 'Custom Directives',
122+
link: '/breaking-changes/custom-directives'
123+
},
124+
{ text: 'Data Option', link: '/breaking-changes/data-option' },
125+
{
126+
text: 'Mount API changes',
127+
link: '/breaking-changes/mount-changes'
128+
},
129+
{
130+
text: 'Props Default Function this Access',
131+
link: '/breaking-changes/props-default-this'
132+
},
133+
{
134+
text: 'Transition Class Change',
135+
link: '/breaking-changes/transition'
136+
},
137+
{
138+
text: 'Transition as Root',
139+
link: '/breaking-changes/transition-as-root'
140+
},
141+
{
142+
text: 'Transition Group Root Element',
143+
link: '/breaking-changes/transition-group'
144+
},
145+
{
146+
text: 'VNode lifecycle events',
147+
link: '/breaking-changes/vnode-lifecycle-events'
148+
},
149+
{ text: 'Watch on Arrays', link: '/breaking-changes/watch' }
150+
]
151+
}
152+
]
153+
}
154+
}
155+
}

‎.vitepress/theme/MigrationBadges.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<script>
2+
const validBadges = {
3+
new: 'new',
4+
breaking: 'breaking',
5+
removed: 'removed',
6+
updated: 'updated'
7+
}
8+
9+
export default {
10+
props: {
11+
badges: {
12+
type: Array,
13+
default: () => [],
14+
validator(value) {
15+
return value.every((badge) => Object.keys(validBadges).includes(badge))
16+
}
17+
}
18+
},
19+
data() {
20+
return {
21+
validBadges
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<template>
28+
<div class="migration-badge-wrapper">
29+
<span
30+
v-for="badgeType in badges"
31+
:class="`migration-badge is-${badgeType}`"
32+
:key="`badge-type-${badgeType}`"
33+
>
34+
{{ validBadges[badgeType] }}
35+
</span>
36+
</div>
37+
</template>
38+
39+
<style scoped>
40+
.migration-badge {
41+
background-color: #ccc;
42+
font-size: 0.8rem;
43+
border: 2px solid #ccc;
44+
border-radius: 5px;
45+
margin-right: 0.5rem;
46+
margin-top: 0.5rem;
47+
color: #222;
48+
padding: 0.25rem 0.25rem;
49+
font-weight: bold;
50+
}
51+
52+
.migration-badge:first-child {
53+
margin-left: 1rem;
54+
}
55+
56+
.migration-badge.is-new {
57+
background-color: #228740;
58+
border-color: #228740;
59+
color: #fff;
60+
}
61+
62+
.migration-badge.is-breaking {
63+
background-color: #b00000;
64+
border-color: #b00000;
65+
color: #fff;
66+
}
67+
68+
.migration-badge.is-removed {
69+
background-color: #cf8700;
70+
border-color: #cf8700;
71+
color: #fff;
72+
}
73+
74+
.migration-badge.is-updated {
75+
background-color: #fcff44;
76+
border-color: #fcff44;
77+
color: #222;
78+
}
79+
80+
.migration-badge-wrapper {
81+
display: inline-block;
82+
position: relative;
83+
top: -0.5rem;
84+
}
85+
</style>

‎.vitepress/theme/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Theme from 'vitepress/theme'
2+
import MigrationBadges from './MigrationBadges.vue'
3+
4+
export default {
5+
...Theme,
6+
enhanceApp({ app }) {
7+
app.component('MigrationBadges', MigrationBadges)
8+
}
9+
}

‎netlify.toml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[build.environment]
2+
NODE_VERSION = "16"
3+
NPM_FLAGS = "--version" # prevent Netlify npm install
4+
5+
[build]
6+
publish = ".vitepress/dist"
7+
command = "npx pnpm i --store=node_modules/.pnpm-store && npm run build"

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "migration-guide",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"dev": "vitepress",
7+
"build": "vitepress build",
8+
"serve": "vitepress serve"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "MIT",
13+
"devDependencies": {
14+
"vitepress": "^0.21.5"
15+
},
16+
"pnpm": {
17+
"peerDependencyRules": {
18+
"ignoreMissing": [
19+
"@algolia/client-search",
20+
"react",
21+
"react-dom",
22+
"@types/react"
23+
]
24+
}
25+
}
26+
}

0 commit comments

Comments
 (0)