docs: add recommendation for create-vue in docs

vuejs · kenzo104 · Mar 14, 2022 · Mar 14, 2022 · Mar 15, 2022 · Mar 15, 2022
commit 7c0134e653a0f58315ac9b06e940a5c5928b8b0b
diff --git a/README.md b/README.md
@@ -2,9 +2,9 @@
 
 ## ⚠️ Status
 
-Vue CLI is now in maintenance mode. For new projects, please use [create-vue](https://github.com/vuejs/create-vue) to scaffold [Vite](https://vitejs.dev/)-based projects, which supports both Vue 2 and Vue 3.
+Vue CLI is now in maintenance mode. For new projects, please use [create-vue](https://github.com/vuejs/create-vue) to scaffold [Vite](https://vitejs.dev/)-based projects. `create-vue` supports both Vue 2 and Vue 3.
 
-Also refer to the latest [Tooling Guide](https://vuejs.org/guide/scaling-up/tooling.html) on setting up a new Vue 3 project.
+Also refer to the [Vue 3 Tooling Guide](https://vuejs.org/guide/scaling-up/tooling.html) for the latest recommendations.
 
 For information on migrating from Vue CLI to Vite:
 

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -2,19 +2,96 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import AlgoliaSearchBox from './AlgoliaSearchBox.vue'
 import './custom.css'
+import { useData } from 'vitepress'
 
 export default {
   ...DefaultTheme,
-  Layout() {
-    return h(DefaultTheme.Layout, null, {
-      'navbar-search': () => {
-        return h(AlgoliaSearchBox, {
-          options: {
-            indexName: 'cli_vuejs',
-            apiKey: 'f6df220f7d246aff64a56300b7f19f21',
+  Layout: {
+    setup() {
+      const { lang } = useData()
+      return () => {
+        return h(DefaultTheme.Layout, null, {
+          'page-top': () => {
+            return lang.value === 'zh-CN' ? notice_zh_cn() : notice_en()
+          },
+          'navbar-search': () => {
+            return h(AlgoliaSearchBox, {
+              options: {
+                indexName: 'cli_vuejs',
+                apiKey: 'f6df220f7d246aff64a56300b7f19f21'
+              }
+            })
           }
         })
       }
-    })
+    }
   }
 }
+
+function notice_en() {
+  return h('div', { class: 'warning custom-block' }, [
+    h('p', { class: 'custom-block-title' }, '⚠️ Notice'),
+    h('p', [
+      'Vue CLI is now in maintenance mode. For new projects, please use ',
+      h(
+        'a',
+        {
+          href: 'https://github.com/vuejs/create-vue',
+          target: '_blank'
+        },
+        [h('code', 'create-vue')]
+      ),
+      ' to scaffold ',
+      h('a', { href: 'https://vitejs.dev', target: '_blank' }, 'Vite'),
+      '-based projects. ',
+      h('code', 'create-vue'),
+      ' supports both Vue 2 and Vue 3.'
+    ]),
+    h('p', [
+      'Also refer to the ',
+      h(
+        'a',
+        {
+          href: 'https://vuejs.org/guide/scaling-up/tooling.html',
+          target: '_blank'
+        },
+        'Vue 3 Tooling Guide'
+      ),
+      ' for the latest recommendations.'
+    ])
+  ])
+}
+
+function notice_zh_cn() {
+  return h('div', { class: 'warning custom-block' }, [
+    h('p', { class: 'custom-block-title' }, '⚠️ Notice'),
+    h('p', [
+      'Vue CLI 现已处于维护模式。新项目请使用 ',
+      h(
+        'a',
+        {
+          href: 'https://github.com/vuejs/create-vue',
+          target: '_blank'
+        },
+        [h('code', 'create-vue')]
+      ),
+      ' 来创建基于 ',
+      h('a', { href: 'https://cn.vitejs.dev', target: '_blank' }, 'Vite'),
+      ' 的项目. ',
+      h('code', 'create-vue'),
+      ' 同时支持 Vue 2 和 Vue 3.'
+    ]),
+    h('p', [
+      '另外，请参考 ',
+      h(
+        'a',
+        {
+          href: 'https://vuejs.org/guide/scaling-up/tooling.html',
+          target: '_blank'
+        },
+        'Vue 3 工具链指南'
+      ),
+      ' 以了解最新的工具推荐。'
+    ])
+  ])
+}
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -4,10 +4,6 @@ sidebarDepth: 0
 
 # Overview
 
-::: warning
-This documentation is for `@vue/cli`. For the old `vue-cli`, see [here](https://github.com/vuejs/vue-cli/tree/v2#vue-cli--).
-:::
-
 Vue CLI is a full system for rapid Vue.js development, providing:
 
 - Interactive project scaffolding via `@vue/cli`.

diff --git a/docs/guide/installation.md b/docs/guide/installation.md
@@ -1,10 +1,5 @@
 # Installation
 
-::: warning Warning regarding Previous Versions
-The package name changed from `vue-cli` to `@vue/cli`.
-If you have the previous `vue-cli` (1.x or 2.x) package installed globally, you need to uninstall it first with `npm uninstall vue-cli -g` or `yarn global remove vue-cli`.
-:::
-
 ::: tip Node Version Requirement
 Vue CLI 4.x requires [Node.js](https://nodejs.org/) version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with [n](https://github.com/tj/n), [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
 :::

diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
@@ -4,10 +4,6 @@ sidebarDepth: 0
 
 # Введение
 
-::: warning Предупреждение
-Эта документация для `@vue/cli`. Для старой версии `vue-cli`, см. [здесь](https://github.com/vuejs/vue-cli/tree/v2#vue-cli--).
-:::
-
 Vue CLI — полноценная система для быстрой разработки на Vue.js, предоставляющая:
 
 - Интерактивное создание проекта через `@vue/cli`.

diff --git a/docs/ru/guide/installation.md b/docs/ru/guide/installation.md
@@ -1,10 +1,5 @@
 # Установка
 
-::: danger Предупреждение о предыдущих версиях
-Имя пакета изменилось с `vue-cli` на `@vue/cli`.
-Если у вас установлена глобально предыдущая версия пакета `vue-cli` (1.x или 2.x), то необходимо сначала удалить её командой `npm uninstall vue-cli -g` или `yarn global remove vue-cli`.
-:::
-
 ::: tip Требования к версии Node
 Vue CLI 4.x требуется [Node.js](https://nodejs.org/) версии 8.9 или выше (рекомендуется v10+). Управлять несколькими версиями Node на машине можно через [n](https://github.com/tj/n), [nvm](https://github.com/creationix/nvm) или [nvm-windows](https://github.com/coreybutler/nvm-windows).
 :::

diff --git a/docs/zh/guide/index.md b/docs/zh/guide/index.md
@@ -4,10 +4,6 @@ sidebarDepth: 0
 
 # 介绍
 
-::: warning 警告
-这份文档对应的是 `@vue/cli`。老版本的 `vue-cli` 文档请移步[这里](https://github.com/vuejs/vue-cli/tree/v2#vue-cli--)。
-:::
-
 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
 
 - 通过 `@vue/cli` 实现的交互式的项目脚手架。

diff --git a/docs/zh/guide/installation.md b/docs/zh/guide/installation.md
@@ -1,10 +1,5 @@
 # 安装
 
-::: warning 关于旧版本
-Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。
-如果你已经全局安装了旧版本的 `vue-cli` (1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。
-:::
-
 ::: tip Node 版本要求
 Vue CLI 4.x 需要 [Node.js](https://nodejs.org/) v8.9 或更高版本 (推荐 v10 以上)。你可以使用 [n](https://github.com/tj/n)，[nvm](https://github.com/creationix/nvm) 或 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。
 :::