Merge pull request #1236 from vuejs/sync

Author: Jinjiang

src/lts/index.md

@@ -1,5 +1,9 @@
 # Vue 2 的长期技术支持 (LTS)、终止支持 (EOL) 及其延长版服务
 
+<p class="info"><b>希望继续使用 Vue 2？</b>
+如果你希望在 Vue 2 的终止支持时间 (2023 年 12 月 31 日) 之后仍然使用它，并且需要一个能够满足安全和浏览器兼容性要求的维护版本，请务必查看：[HeroDevs 对 Vue 2 的无限期支持](https://www.herodevs.com/support/nes-vue?utm_source=vuejs-org&utm_medium=link&utm_campaign=lts-faq)。
+</p>
+
 ## Vue 2 的技术支持会持续多久？
 
 Vue 2.7 是当前、同时也是最后一个 Vue 2.x 的次级版本更新。Vue 2.7 会以其发布日期，即 2022 年 7 月 1 日开始计算，提供 18 个月的长期技术支持 (LTS：long-term support)。在此期间，Vue 2 将会提供必要的 bug 修复和安全修复，但不再提供新特性。
@@ -16,6 +20,20 @@ Vue 3 也存在一些和 Vue 2 不兼容的变更，所以该迁移工作依据
 
 尽管存在不兼容的变更，Vue 两个主版本之间主要的 API 依然是共享的。所以团队仍然可以把 Vue 2 的相关知识带到 Vue 3 使用。长期来看，我们也会尽可能避免类似 Vue 2 和 Vue 3 之间的这种不兼容变更。兼容性和生态的稳定性将会是我们未来发布的最高优先考量。而新特性的引入也不会导致大的迁移。
 
+### 升级还是不升级
+
+是否升级到 Vue 3 高度取决于具体的项目细节。以下是一些一般性的指导原则：
+
+1. 理解升级的收益。
+
+   由于 2.7 使得两个主版本之间的开发体验差距已经不再那么明显了——升级的主要收益将是更好的 TypeScript 支持、更好的性能，以及访问 Vue 3 生态系统和未来的新特性。
+
+   试问你自己的团队几个问题：这个应用是否稳定且运行良好？是否需要在未来持续开发新特性？是否存在只能通过升级来解决的痛点或瓶颈？如果应用稳定且没有因为 Vue 2 而遇到重大的痛点，那么升级可能并不值得。
+
+2. 理解升级的成本。
+
+   该应用是否基于一些难以兼容 Vue 3 的第三方依赖？该应用是否严重依赖于 Vue 2 和 Vue 3 之间的行为差异？团队是否能够分配专门的时间来进行升级？你可以试着花一些时间进行这些方面的初步研究并得出一个预估结论，然后将其与 (1) 中的预期收益进行比较。我们无法提供精确的公式，但希望这可以帮助你做出决策。
+
 ### 继续使用 Vue 2
 
 有些团队可能鉴于有限的投入、预算、风险承受能力、或有不兼容 Vue 3 的依赖，而在此时间段内无法升级到 Vue 3。我们对此完全理解，并将确保继续使用 Vue 2 是完全可行的选项，即便在其终止支持之后。
@@ -38,4 +56,4 @@ Vue 2.7 也是在终止支持之前保持维护的版本，所以如果你打算
 
 - 浏览器有时会发布一些会破坏老旧库的变更。这样的情况极少发生，但理论上难以完全避免。
 
-为了解决以上顾虑，我们和业内的专家们合作推出了 **Vue 2 的延长版 LTS 服务**。该服务会提供 Vue 2 安全和浏览器兼容性相关问题的修复版本，且带有 SLA 协议。如果你希望在 Vue 2 的终止支持时间，即 2023 年 12 月 31 日之后，仍然使用它，一定要移步至：[学习更多关于 HeroDevs 对 Vue 2 的无限期支持](https://www.herodevs.com/support/vue)。
+为了解决以上顾虑，我们和业内的专家们合作推出了 **Vue 2 的延长版 LTS 服务**。该服务会提供 Vue 2 安全和浏览器兼容性相关问题的修复版本，且带有 SLA 协议。如果你希望在 Vue 2 的终止支持时间，即 2023 年 12 月 31 日之后，仍然使用它，一定要移步至：[学习更多关于 HeroDevs 对 Vue 2 的无限期支持](https://www.herodevs.com/support/nes-vue?utm_source=vuejs-org&utm_medium=link&utm_campaign=lts-faq)。

src/v2/cookbook/form-validation.md

@@ -433,4 +433,4 @@ const app = new Vue({
 这份秘笈专注在“手动”校验表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试且保持日常更新的代码。其中包括以下 Vue 的表单校验库：
 
 * [vuelidate](https://github.com/monterail/vuelidate)
-* [VeeValidate](https://logaretm.github.io/vee-validate/)
+* [VeeValidate](https://vee-validate.logaretm.com/v3/)

src/v2/guide/installation.md

@@ -2,8 +2,8 @@
 title: 安装
 type: guide
 order: 1
-vue_version: 2.7.10
-gz_size: "37.36"
+vue_version: 2.7.14
+gz_size: "37.51"
 ---
 
 ### 兼容性
@@ -43,20 +43,20 @@ Vue 在其所有项目中公布的功能和行为都遵循[语义化版本控制
 对于制作原型或学习，你可以这样使用最新版本：
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].10/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].14/dist/vue.js"></script>
 ```
 
 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].10"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].14"></script>
 ```
 
 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
 
 ``` html
 <script type="module">
-  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected].10/dist/vue.esm.browser.js'
+  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected].14/dist/vue.esm.browser.js'
 </script>
 ```
 
@@ -72,7 +72,7 @@ Vue 也可以在 [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) 和
 
 ``` bash
 # 最新稳定版
-$ npm install vue
+$ npm install vue@^2
 ```
 
 ## 命令行工具 (CLI)
@@ -85,7 +85,7 @@ Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页
 
 ## 对不同构建版本的解释
 
-在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/[email protected].10/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
+在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/[email protected].14/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
 
 | | UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) |
 | --- | --- | --- | --- | --- |
@@ -102,7 +102,7 @@ Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页
 
 - **运行时**：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
 
-- **[UMD](https://github.com/umdjs/umd)**：UMD 版本可以通过 `<script>` 标签直接用在浏览器中。jsDelivr CDN 的 [https://cdn.jsdelivr.net/npm/[email protected].10](https://cdn.jsdelivr.net/npm/[email protected].10) 默认文件就是运行时 + 编译器的 UMD 版本 (`vue.js`)。
+- **[UMD](https://github.com/umdjs/umd)**：UMD 版本可以通过 `<script>` 标签直接用在浏览器中。jsDelivr CDN 的 [https://cdn.jsdelivr.net/npm/[email protected].14](https://cdn.jsdelivr.net/npm/[email protected].14) 默认文件就是运行时 + 编译器的 UMD 版本 (`vue.js`)。
 
 - **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**：CommonJS 版本用来配合老的打包工具比如 [Browserify](http://browserify.org/) 或 [webpack 1](https://webpack.github.io)。这些打包工具的默认文件 (`pkg.main`) 是只包含运行时的 CommonJS 版本 (`vue.runtime.common.js`)。
 

themes/vue/_config.yml

@@ -1,13 +1,13 @@
 site_description: Vue.js - The Progressive JavaScript Framework
 google_analytics: UA-46852172-3
 root_domain: v2.cn.vuejs.org
-vue_version: 2.7.10
+vue_version: 2.7.14
 # START SPONSORS
 special:
   - name: appwrite
     url: https://appwrite.io
     img: appwrite.svg
-    description: Open Source Firebase Alternative
+    description: Build Fast. Scale Big. All in One Place.
 platinum:
   - name: VueMastery
     url: https://www.vuemastery.com/
@@ -29,13 +29,6 @@ platinum:
     url: >-
       https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs
     img: ionic.png?v2
-  - name: ButterCMS
-    url: >-
-      https://buttercms.com/vuejs-cms/?utm_source=vuejs.org&utm_medium=banner&utm_campaign=sponsorship
-    img: buttercms.svg
-  - name: Sanofi
-    url: https://www.sanofi.com/
-    img: sanofi.png
   - name: CodeDict
     url: https://code-dict.com
     img: codedict.svg
@@ -45,21 +38,13 @@ platinum:
   - name: HeroDevs
     url: https://www.herodevs.com/support/vue
     img: herodevs.png
-platinum_china:
-  - name: Aircode
-    url: https://docs-cn.aircode.io/chatgpt/
-    img: aircode.png
-    description: 5 分钟用 JS 接入 ChatGPT
 gold:
   - name: Volta
     url: https://volta.net/?utm_source=vuejs.org&utm_campaign=sponsoring/
     img: volta.svg
   - name: Laravel
     url: https://laravel.com
     img: laravel.png
-  - name: HTML Burger
-    url: https://htmlburger.com
-    img: html_burger.png
   - name: Tidelift
     url: https://tidelift.com/subscription/npm/vue
     img: tidelift.png
@@ -106,9 +91,6 @@ gold:
   - name: Casinoburst.com
     url: https://casinoburst.com/casino-utan-licens/
     img: casinoburst_com.png
-  - name: spinsify.com/uk
-    url: https://www.spinsify.com/uk/new-casinos
-    img: spinsify_com_uk.png
   - name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet'
     url: https://www.enkrypt.com
     img: enkrypt__ethereum_and_polkadot_web3_wallet.svg
@@ -121,27 +103,40 @@ gold:
   - name: Goread.io
     url: https://goread.io/buy-instagram-followers
     img: goread_io.png
-  - name: Twicsy
-    url: https://twicsy.com/buy-instagram-likes
-    img: twicsy.png
   - name: Sentry
-    url: sentry.io/for/vue?utm_source=vuejs.org&utm_medium=paid-community
+    url: https://sentry.io/for/vue?utm_source=vuejs.org&utm_medium=paid-community
     img: sentry.png
-  - name: Famous Fonts
-    url: https://www.fontbolt.com/
-    img: famous_fonts.png
-  - name: Justanotherpanel
-    url: https://justanotherpanel.com/
-    img: justanotherpanel.png
-  - name: Likes.io
-    url: https://likes.io/buy-instagram-followers
-    img: likes_io.png
-  - name: Howsociable
-    url: https://howsociable.com/buy-instagram-followers/
-    img: howsociable.png
   - name: Poprey.com
     url: https://poprey.com/
     img: poprey_com.png
+  - name: Ilmaiset Pitkävetovihjeet
+    url: https://www.vedonlyontibonukset.com/pitkavetovihjeet
+    img: ilmaiset_pitk_vetovihjeet.png
+  - name: Metoree
+    url: https://us.metoree.com/
+    img: metoree.png
+  - name: Famoid
+    url: https://famoid.com/
+    img: famoid.png
+  - name: Certible
+    url: https://www.certible.com
+    img: certible.svg
+  - name: FORTUNE GAMES
+    url: https://www.fortunegames.com
+    img: fortune_games.png
+  - name: TBDC - Agro Software
+    url: http://tbdc.com.br/
+    img: tbdc___agro_software.svg
+  - name: Nokori
+    url: >-
+      https://nokori.com?utm_source=github&utm_medium=banner&utm_campaign=awareness&utm_id=github_vue
+    img: nokori.png
+  - name: Justanotherpanel
+    url: https://justanotherpanel.com/
+    img: justanotherpanel.png
+  - name: FineProxy
+    url: https://fineproxy.org/
+    img: fineproxy.svg
 silver:
   - name: Draxlr
     url: https://www.draxlr.com
@@ -161,15 +156,18 @@ silver:
   - name: Codesmith
     url: https://codesmith.io
     img: codesmith.png
-  - name: Gcore
-    url: https://gcore.com
-    img: gcore.png
-  - name: awisee.agency
-    url: https://awisee.agency
-    img: awisee_agency.png
   - name: Optimizers
     url: https://www.optimizers.nl
     img: optimizers.png
+  - name: Nettcasino
+    url: https://www.nettcasino.com/
+    img: nettcasino.png
+  - name: FORTUNE GAMES
+    url: https://www.fortunegames.com
+    img: fortune_games.png
+  - name: Indy
+    url: https://www.indy.fr/
+    img: indy.png
 bronze:
   - name: Derek Pollard
     url: https://polyglotengineer.com/derek.pollard
@@ -192,6 +190,9 @@ bronze:
   - name: Bürkert Werke GmbH & Co KG
     url: https://www.burkert.com
     img: b_rkert_werke_gmbh___co_kg.png
+  - name: CRECOHE
+    url: http://www.crecohe.com
+    img: crecohe.png
 # END SPONSORS
 video_china:
   - url: http://cloud.youku.com/index.php?source=vuejs

themes/vue/layout/partials/sponsors.ejs

@@ -3,15 +3,15 @@
 <h3>Patreon 赞助商</h3>
 
 <%_ for (const sponsor of theme.platinum) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 160px;">
-  <img src="<%- logo(sponsor.img) %>" style="width: 160px;" alt="<%-sponsor.name-%>">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
+  <img src="<%- logo(sponsor.img) %>" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
 <br>
 <%_ for (const sponsor of theme.gold) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 120px;">
-  <img src="<%- logo(sponsor.img) %>" style="width:auto;max-width:120px;max-height:60px;" alt="<%-sponsor.name-%>">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
+  <img src="<%- logo(sponsor.img) %>" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>

themes/vue/source/css/_sponsors-index.styl

@@ -11,11 +11,15 @@
   a
     margin: 20px 15px 0
     position: relative
-  a, img
-    width: 100px
     display: inline-block
-    vertical-align: middle
+    &.sponsor
+      width: 100px
+      height: 60px
+      line-height: 60px
   img
+    max-width: 100%
+    max-height: 100%
+    vertical-align: middle
     transition: all .3s ease
     filter: grayscale(100%)
     opacity: 0.66
@@ -26,8 +30,7 @@
     display: block
     margin: 30px auto 15px
     width: 200px
-    img
-      width: 200px
+    height: auto
   .become-sponsor
     margin-top: 40px
     font-size: .9em

themes/vue/source/css/_sponsors-sidebar.styl

@@ -3,16 +3,19 @@
   font-size: .85em
   .logo
     color: $light
-    margin-top: 10px
-    text-align: center
+    width: 125px
+    height: 50px
     font-weight: bold
-    display block
+    display flex
+    align-items center
+    justify-content center
     &:first-child
       margin-top: 18px
     &:last-child
       margin-bottom: 20px
-  img, a
-    width: 125px
+    img
+      max-width: 125px
+      max-height: 50px
 
 .become-backer
   border: 1px solid $green

themes/vue/source/css/index.styl

@@ -119,11 +119,16 @@ body
     margin 0
   a
     color $light
+    width: 160px
+    height: 80px
+    line-height: 80px
   a, span, img
     display: inline-block
     vertical-align: middle
   img
     margin: 15px 0 0
+    max-width: 100%
+    max-height: 100%
 
 #highlights
   background-color: #fff

themes/vue/source/css/page.styl

@@ -144,7 +144,7 @@
       code
         background-color: #efefef
   p
-    &.tip, &.success
+    &.tip, &.success, &.info
       padding: 12px 24px 12px 30px
       margin: 2em 0
       border-left-width: 4px
@@ -175,6 +175,8 @@
       &:before
         content: "!"
         background-color: $red
+    &.info
+      border-left-color: $green
     &.success
       border-left-color: $green
       &:before