From 4805fe674ab62288bb2ccaf8821df000d027fae5 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Thu, 21 Jul 2022 20:11:18 +0200 Subject: [PATCH 001/927] fix: added Node version requirement Close #1839 --- src/guide/quick-start.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index 822b10b501..fc12b04992 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -19,7 +19,7 @@ You can try Vue with SFCs online on [StackBlitz](https://vite.new/vue). StackBli :::tip Pre-requisites - Familiarity with the command line -- Install [Node.js](https://nodejs.org/) +- Install [Node.js](https://nodejs.org/) version 15.0 or higher ::: To create a build-tool-enabled Vue project on your machine, run the following command in your command line (without the `>` sign): From abd953b1df5266d45808bbd050fbafb7d167ac74 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Fri, 22 Jul 2022 02:19:38 +0800 Subject: [PATCH 002/927] Support dynamic loading of special sponsors (#1838) --- .vitepress/theme/components/Home.vue | 36 +++++++++++-------- .vitepress/theme/components/SponsorsGroup.vue | 29 ++------------- .vitepress/theme/components/sponsors.ts | 31 ++++++++++++++++ 3 files changed, 54 insertions(+), 42 deletions(-) create mode 100644 .vitepress/theme/components/sponsors.ts diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue index 572fe2414b..9b200be87a 100644 --- a/.vitepress/theme/components/Home.vue +++ b/.vitepress/theme/components/Home.vue @@ -1,7 +1,13 @@ @@ -179,6 +179,7 @@ html:not(.dark) .accent, border-bottom: 1px solid var(--vt-c-divider-light); padding: 12px 24px; display: flex; + align-items: center; } #special-sponsor span { From b392b068fb893e3ac6079710fe34decbde7a3be3 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Fri, 9 Sep 2022 02:48:32 +0200 Subject: [PATCH 074/927] Added `withDefaults` to Composition API TypeScript page (#1942) * fix: added withDefaults to Composition API TS * Update src/guide/typescript/composition-api.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * fix: removed `experimental` badge Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/typescript/composition-api.md | 26 ++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index 824648b012..205a58ff58 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -79,20 +79,36 @@ defineProps() This is because Vue components are compiled in isolation and the compiler currently does not crawl imported files in order to analyze the source type. This limitation could be removed in a future release. -### Props Default Values +### Props Default Values -When using type-based declaration, we lose the ability to declare default values for the props. This can be resolved by the currently experimental [Reactivity Transform](/guide/extras/reactivity-transform.html): +When using type-based declaration, we lose the ability to declare default values for the props. This can be resolved by the `withDefaults` compiler macro: + +```ts +export interface Props { + msg?: string + labels?: string[] +} + +const props = withDefaults(defineProps(), { + msg: 'hello', + labels: () => ['one', 'two'] +}) +``` + +This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared. + +Alternatively, you can use the currently experimental [Reactivity Transform](/guide/extras/reactivity-transform.html): ```vue ``` From 6400d164f4b02d52080707e32e9a4152c7960ba5 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 13 Sep 2022 17:16:29 +0800 Subject: [PATCH 075/927] rewrite quick start close #1820, close #1921 --- src/guide/quick-start.md | 92 ++++++++++++++++++++++++++++++---------- 1 file changed, 69 insertions(+), 23 deletions(-) diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index fc12b04992..cb6cbaff20 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -4,25 +4,25 @@ footer: false # Quick Start -Depending on your use case and preference, you can use Vue with or without a build step. +## Try Vue Online -## With Build Tools +- To quickly get a taste of Vue, you can try it directly in our [Playground](https://sfc.vuejs.org/#eNo9j01qAzEMha+iapMWOjbdDm6gu96gG2/cjJJM8B+2nBaGuXvlpBMwtj4/JL234EfO6toIRzT1UObMexvpN6fCMNHRNc+w2AgwOXbPL/caoBC3EjcCCPU0wu6TvE/wlYqfnnZ3ae2PXHKMfiwQYArZOyYhAHN+2y9LnwLrarTQ7XeOuTFch5Am8u8WRbcoktGPbnzFOXS3Q3BZXWqKkuRmy/4L1eK4GbUoUTtbPDPnOmpdj4ee/1JVKictlSot8hxIUQ3Dd0k/lYoMtrglwfUPkXdoJg==). -A build setup allows us to use Vue [Single-File Components](/guide/scaling-up/sfc) (SFCs). The official Vue build setup is based on [Vite](https://vitejs.dev), a frontend build tool that is modern, lightweight and extremely fast. +- If you prefer a plain HTML setup without any build steps, you can use this [JSFiddle](https://jsfiddle.net/yyx990803/2ke1ab0z/) as your starting point. -### Online +- If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on [StackBlitz](https://vite.new/vue). -You can try Vue with SFCs online on [StackBlitz](https://vite.new/vue). StackBlitz runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine. - -### Local +## Creating a Vue Application :::tip Pre-requisites - Familiarity with the command line -- Install [Node.js](https://nodejs.org/) version 15.0 or higher +- Install [Node.js](https://nodejs.org/) version 16.0 or higher ::: -To create a build-tool-enabled Vue project on your machine, run the following command in your command line (without the `>` sign): +In this section we will introduce how to scaffold a Vue [Single Page Application](http://localhost:5173/guide/extras/ways-of-using-vue.html#single-page-application-spa) on your local machine. The created project will be using a build setup based on [Vite](https://vitejs.dev), and allows us to use Vue [Single-File Components](/guide/scaling-up/sfc) (SFCs). + +Make sure you have an up-to-date version of [Node.js](https://nodejs.org/) installed, then run the following command in your command line (without the `>` sign): 
> npm init vue@latest
@@ -64,12 +64,24 @@ This will create a production-ready build of your app in the project's `./dist` [Next Steps >](#next-steps) -## Without Build Tools +## Using Vue from CDN + +You can use Vue directly from a CDN via a script tag: + +```html + +``` + +Here we are using [unpkg](https://unpkg.com/), but you can also use any CDN that serves npm packages, for example [jsdelivr](https://www.jsdelivr.com/package/npm/vue) or [cdnjs](https://cdnjs.com/libraries/vue). Of course, you can also download this file and serve it yourself. + +When using Vue from a CDN, there is no "build step" involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won't be able to use the Single-File Component (SFC) syntax. + +### Using the Global Build -To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser: +The above link is loading the *global build* of Vue, where all top-level APIs are exposed as properties on the global `Vue` object. Here is a full example using the global build: ```html - +
{{ message }}
@@ -86,15 +98,43 @@ To get started with Vue without a build step, simply copy the following code int ``` -The above example uses the global build of Vue where all APIs are exposed under the global `Vue` variable. For example, to also use the `ref` API, you can do: +[JSFiddle demo](https://jsfiddle.net/yyx990803/nw1xg8Lj/) + +### Using the ES Module Build + +Throughout the rest of the documentation, we will be primarily using [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) syntax. Most modern browsers now support ES modules natively, so we can use Vue from a CDN via native ES modules like this: + +```html{3,4} +
{{ message }}
+ + +``` + +Notice that we are using ` ``` -Notice how we can import directly from `'vue'` in our code - this is made possible by the ` diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 171dd6a6ae..dead8883b0 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -10,13 +10,13 @@ import { import SponsorsAside from './components/SponsorsAside.vue' import VueJobs from './components/VueJobs.vue' import VueSchoolLink from './components/VueSchoolLink.vue' -import Banner from './components/Banner.vue' +// import Banner from './components/Banner.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - banner: () => h(Banner), + // banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'aside-mid': () => h(SponsorsAside) }) From 7257fdc069fdc086d1b67c222a6eb33741d3bcde Mon Sep 17 00:00:00 2001 From: de-oz <101826623+de-oz@users.noreply.github.com> Date: Fri, 16 Sep 2022 17:56:44 +0300 Subject: [PATCH 078/927] Fix spelling and grammar (#1962) --- src/guide/quick-start.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index 828e78e38d..183059fe99 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -14,13 +14,13 @@ footer: false ## Creating a Vue Application -:::tip Pre-requisites +:::tip Prerequisites - Familiarity with the command line - Install [Node.js](https://nodejs.org/) version 16.0 or higher ::: -In this section we will introduce how to scaffold a Vue [Single Page Application](/guide/extras/ways-of-using-vue.html#single-page-application-spa) on your local machine. The created project will be using a build setup based on [Vite](https://vitejs.dev), and allows us to use Vue [Single-File Components](/guide/scaling-up/sfc) (SFCs). +In this section we will introduce how to scaffold a Vue [Single Page Application](/guide/extras/ways-of-using-vue.html#single-page-application-spa) on your local machine. The created project will be using a build setup based on [Vite](https://vitejs.dev), and allow us to use Vue [Single-File Components](/guide/scaling-up/sfc) (SFCs). Make sure you have an up-to-date version of [Node.js](https://nodejs.org/) installed, then run the following command in your command line (without the `>` sign): From f25e283bae1a46da9923646bc6e9b4aeaaeb7b2b Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Sun, 18 Sep 2022 17:44:36 +0200 Subject: [PATCH 079/927] fix: fixed tutorial step 8 template Close #1960 --- src/tutorial/src/step-8/App/template.html | 2 +- src/tutorial/src/step-8/_hint/App/template.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tutorial/src/step-8/App/template.html b/src/tutorial/src/step-8/App/template.html index e924c12e6a..30f1499524 100644 --- a/src/tutorial/src/step-8/App/template.html +++ b/src/tutorial/src/step-8/App/template.html @@ -1,5 +1,5 @@
- +
    diff --git a/src/tutorial/src/step-8/_hint/App/template.html b/src/tutorial/src/step-8/_hint/App/template.html index e5c15992ce..780b778b9a 100644 --- a/src/tutorial/src/step-8/_hint/App/template.html +++ b/src/tutorial/src/step-8/_hint/App/template.html @@ -1,5 +1,5 @@
    - +
      From 480c95a8bc2ce63a65ad3c377e9b4b97fb7173de Mon Sep 17 00:00:00 2001 From: Neil Richter Date: Mon, 19 Sep 2022 02:40:39 -0400 Subject: [PATCH 080/927] docs: document mixing named and default slots (#1946) * docs: document mixing named and default slots https://github.com/vuejs/core/issues/6549 * chore: update component example, and section * docs: move section to named scoped slots * Update src/guide/components/slots.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * Update src/guide/components/slots.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * Update src/guide/components/slots.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * Update src/guide/components/slots.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/components/slots.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md index 8e8d8442de..d5284c027f 100644 --- a/src/guide/components/slots.md +++ b/src/guide/components/slots.md @@ -412,6 +412,38 @@ Passing props to a named slot: Note the `name` of a slot won't be included in the props because it is reserved - so the resulting `headerProps` would be `{ message: 'hello' }`. +If you are mixing named slots with the default scoped slot, you need to use an explicit `