Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/lts/index.md
Original file line number Diff line number Diff line change
@@ -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 修复和安全修复,但不再提供新特性。
Expand All @@ -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 是完全可行的选项,即便在其终止支持之后。
Expand All @@ -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)。
2 changes: 1 addition & 1 deletion src/v2/cookbook/form-validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
16 changes: 8 additions & 8 deletions src/v2/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
---

### 兼容性
Expand Down Expand Up @@ -43,20 +43,20 @@ Vue 在其所有项目中公布的功能和行为都遵循[语义化版本控制
对于制作原型或学习,你可以这样使用最新版本:

``` html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
```

对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

``` html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
```

如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:

``` html
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.esm.browser.js'
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.js'
</script>
```

Expand All @@ -72,7 +72,7 @@ Vue 也可以在 [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) 和

``` bash
# 最新稳定版
$ npm install vue
$ npm install vue@^2
```

## 命令行工具 (CLI)
Expand All @@ -85,7 +85,7 @@ Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli),为单页

## 对不同构建版本的解释

在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:
在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:

| | UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) |
| --- | --- | --- | --- | --- |
Expand All @@ -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/vue@2.7.10](https://cdn.jsdelivr.net/npm/vue@2.7.10) 默认文件就是运行时 + 编译器的 UMD 版本 (`vue.js`)。
- **[UMD](https://github.com/umdjs/umd)**:UMD 版本可以通过 `<script>` 标签直接用在浏览器中。jsDelivr CDN 的 [https://cdn.jsdelivr.net/npm/vue@2.7.14](https://cdn.jsdelivr.net/npm/vue@2.7.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`)。

Expand Down
85 changes: 43 additions & 42 deletions themes/vue/_config.yml
Original file line number Diff line number Diff line change
@@ -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/
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions themes/vue/layout/partials/sponsors.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 8 additions & 5 deletions themes/vue/source/css/_sponsors-index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
13 changes: 8 additions & 5 deletions themes/vue/source/css/_sponsors-sidebar.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions themes/vue/source/css/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion themes/vue/source/css/page.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -175,6 +175,8 @@
&:before
content: "!"
background-color: $red
&.info
border-left-color: $green
&.success
border-left-color: $green
&:before
Expand Down
Loading