Skip to content

Commit 64ffb8a

Browse files
yyx990803yyx990803
committed
reuse vue mastery widget
1 parent a420e66 commit 64ffb8a

File tree

3 files changed

+110
-163
lines changed

3 files changed

+110
-163
lines changed

‎src/VueMastery.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="vue-mastery-link">
3+
<a
4+
href="https://www.vuemastery.com/migration-guide-cheat-sheet/"
5+
target="_blank"
6+
>
7+
<div class="banner-wrapper">
8+
<img
9+
class="banner"
10+
alt="Vue Mastery banner"
11+
width="96px"
12+
height="56px"
13+
src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png"
14+
/>
15+
</div>
16+
<p class="description">
17+
Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span>
18+
</p>
19+
<div class="logo-wrapper">
20+
<img
21+
alt="Vue Mastery Logo"
22+
width="25px"
23+
src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png"
24+
/>
25+
</div>
26+
</a>
27+
</div>
28+
</template>
29+
30+
<style>
31+
.vue-mastery-link {
32+
background-color: #f9f9f9;
33+
border-radius: 8px;
34+
padding: 8px 16px 8px 8px;
35+
}
36+
37+
.vue-mastery-link a {
38+
display: flex;
39+
align-items: center;
40+
text-decoration: none;
41+
}
42+
43+
.vue-mastery-link .banner {
44+
background-color: #f9f9f9;
45+
border-radius: 4px;
46+
width: 96px;
47+
height: 56px;
48+
object-fit: cover;
49+
}
50+
51+
.vue-mastery-link .description {
52+
flex: 1;
53+
font-weight: 500;
54+
font-size: 14px;
55+
line-height: 20px;
56+
color: #213547;
57+
margin: 0 0 0 16px;
58+
}
59+
60+
.vue-mastery-link .description span {
61+
color: #42b883;
62+
}
63+
64+
.vue-mastery-link .logo-wrapper {
65+
position: relative;
66+
width: 48px;
67+
height: 48px;
68+
border-radius: 50%;
69+
background-color: #ffffff;
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
}
74+
75+
.vue-mastery-link .logo-wrapper img {
76+
width: 25px;
77+
object-fit: contain;
78+
}
79+
80+
@media (max-width: 576px) {
81+
.vue-mastery-link .banner {
82+
width: 56px;
83+
}
84+
85+
.vue-mastery-link .description {
86+
font-size: 12px;
87+
line-height: 18px;
88+
}
89+
.vue-mastery-link .logo-wrapper {
90+
position: relative;
91+
width: 32px;
92+
height: 32px;
93+
}
94+
}
95+
</style>

‎src/index.md‎

Lines changed: 10 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,92 +3,12 @@
33
This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** The recommended way to learn Vue 3 is by reading the [new documentation](https://vuejs.org).
44

55
<!-- VueMastery Start -->
6-
<style>
7-
.vue-mastery-link {
8-
background-color: #f9f9f9;
9-
border-radius: 8px;
10-
padding: 8px 16px 8px 8px;
11-
}
12-
13-
.vue-mastery-link a {
14-
display: flex;
15-
align-items: center;
16-
text-decoration: none;
17-
}
18-
19-
.vue-mastery-link .banner {
20-
background-color: #f9f9f9;
21-
border-radius: 4px;
22-
width:96px;
23-
height:56px;
24-
object-fit: cover;
25-
}
26-
27-
.vue-mastery-link .description {
28-
flex: 1;
29-
font-weight: 500;
30-
font-size: 14px;
31-
line-height: 20px;
32-
color: #213547;
33-
margin: 0 0 0 16px;
34-
}
35-
36-
.vue-mastery-link .description span {
37-
color: #42b883;
38-
}
39-
40-
.vue-mastery-link .logo-wrapper {
41-
position: relative;
42-
width: 48px;
43-
height: 48px;
44-
border-radius: 50%;
45-
background-color: #ffffff;
46-
display: flex;
47-
justify-content: center;
48-
align-items: center;
49-
}
50-
51-
.vue-mastery-link .logo-wrapper img {
52-
width: 25px;
53-
object-fit: contain;
54-
}
55-
56-
@media (max-width: 576px) {
57-
.vue-mastery-link .banner {
58-
width:56px;
59-
}
60-
61-
.vue-mastery-link .description {
62-
font-size: 12px;
63-
line-height: 18px;
64-
}
65-
.vue-mastery-link .logo-wrapper {
66-
position: relative;
67-
width: 32px;
68-
height: 32px;
69-
}
70-
}
71-
</style>
72-
73-
<div class="vue-mastery-link">
74-
<a href="https://www.vuemastery.com/migration-guide-cheat-sheet/" target="_blank">
75-
<div class="banner-wrapper">
76-
<img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
77-
</div>
78-
<p class="description">Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span></p>
79-
<div class="logo-wrapper">
80-
<img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
81-
</div>
82-
</a>
83-
</div>
6+
<script setup>
7+
import VueMasteryWidget from './VueMastery.vue'
8+
</script>
9+
<VueMasteryWidget/>
8410
<!-- VueMastery End -->
8511

86-
<style>
87-
.note {
88-
color: #476582;
89-
}
90-
</style>
91-
9212
## Notable New Features
9313

9414
Some of the new features to keep an eye on in Vue 3 include:
@@ -117,3 +37,9 @@ New framework-level recommendations are listed [here](./recommendations).
11737
## Migration Build
11838

11939
If you have an existing Vue 2 project or library that you intend to upgrade to Vue 3, we provide a build of Vue 3 that offers Vue 2 compatible APIs. Check out the [Migration Build](./migration-build.html) page for more details.
40+
41+
<style>
42+
.note {
43+
color: #476582;
44+
}
45+
</style>

‎src/zh/index.md‎

Lines changed: 5 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,10 @@
33
本指南主要是为有 Vue 2 经验的、希望了解 Vue 3 的新功能和更改的用户而提供的。**在试用 Vue 3 之前，你不必完整阅读这些内容**。学习 Vue 3 的推荐方法是阅读[新的文档](https://cn.vuejs.org)。
44

55
<!-- VueMastery Start -->
6-
<style>
7-
.vue-mastery-link {
8-
background-color: #f9f9f9;
9-
border-radius: 8px;
10-
padding: 8px 16px 8px 8px;
11-
}
12-
13-
.vue-mastery-link a {
14-
display: flex;
15-
align-items: center;
16-
text-decoration: none;
17-
}
18-
19-
.vue-mastery-link .banner {
20-
background-color: #f9f9f9;
21-
border-radius: 4px;
22-
width:96px;
23-
height:56px;
24-
object-fit: cover;
25-
}
26-
27-
.vue-mastery-link .description {
28-
flex: 1;
29-
font-weight: 500;
30-
font-size: 14px;
31-
line-height: 20px;
32-
color: #213547;
33-
margin: 0 0 0 16px;
34-
}
35-
36-
.vue-mastery-link .description span {
37-
color: #42b883;
38-
}
39-
40-
.vue-mastery-link .logo-wrapper {
41-
position: relative;
42-
width: 48px;
43-
height: 48px;
44-
border-radius: 50%;
45-
background-color: #ffffff;
46-
display: flex;
47-
justify-content: center;
48-
align-items: center;
49-
}
50-
51-
.vue-mastery-link .logo-wrapper img {
52-
width: 25px;
53-
object-fit: contain;
54-
}
55-
56-
@media (max-width: 576px) {
57-
.vue-mastery-link .banner {
58-
width:56px;
59-
}
60-
61-
.vue-mastery-link .description {
62-
font-size: 12px;
63-
line-height: 18px;
64-
}
65-
.vue-mastery-link .logo-wrapper {
66-
position: relative;
67-
width: 32px;
68-
height: 32px;
69-
}
70-
}
71-
</style>
72-
73-
<div class="vue-mastery-link">
74-
<a href="https://www.vuemastery.com/migration-guide-cheat-sheet/" target="_blank">
75-
<div class="banner-wrapper">
76-
<img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
77-
</div>
78-
<p class="description">Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span></p>
79-
<div class="logo-wrapper">
80-
<img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
81-
</div>
82-
</a>
83-
</div>
6+
<script setup>
7+
import VueMasteryWidget from '../VueMastery.vue'
8+
</script>
9+
<VueMasteryWidget/>
8410
<!-- VueMastery End -->
8511

8612
<style>
@@ -116,4 +42,4 @@ Vue 2 和 Vue 3 之间的非兼容性更改[在此](./breaking-changes/)列出
11642

11743
## 用于迁移的构建版本
11844

119-
如果您有一个现有的 Vue 2 项目或库，并打算将其升级到 Vue 3，我们将提供一个 Vue 3 的构建版本，它提供与 Vue 2 兼容的 api。查看[用于迁移的构建版本](./migration-build)页面了解更多细节。
45+
如果您有一个现有的 Vue 2 项目或库，并打算将其升级到 Vue 3，我们将提供一个 Vue 3 的构建版本，它提供与 Vue 2 兼容的 api。查看[用于迁移的构建版本](./migration-build)页面了解更多细节。

0 commit comments

Comments
 (0)