From d6a1f282515a6c5a12c2bdc139361429a1a350ab Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Fri, 18 Sep 2020 06:01:12 -0400 Subject: [PATCH 1/2] config: add dev command --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a13643cb7a..9886e844ba 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "vuepress": "^1.5.4" }, "scripts": { + "dev": "yarn serve", "serve": "vuepress dev src", "build": "vuepress build src" }, From 238fa1be2fd5b7a840c2d15a39fb559d69c9b42d Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Fri, 18 Sep 2020 06:50:08 -0400 Subject: [PATCH 2/2] feature: standardize video styles and markup --- src/.vuepress/components/VideoLesson.vue | 50 ++++++++++++++++++++ src/.vuepress/styles/index.styl | 25 ---------- src/guide/component-custom-events.md | 2 +- src/guide/composition-api-introduction.md | 4 +- src/guide/composition-api-lifecycle-hooks.md | 2 +- src/guide/reactivity.md | 2 +- 6 files changed, 55 insertions(+), 30 deletions(-) create mode 100644 src/.vuepress/components/VideoLesson.vue diff --git a/src/.vuepress/components/VideoLesson.vue b/src/.vuepress/components/VideoLesson.vue new file mode 100644 index 0000000000..e18004e56f --- /dev/null +++ b/src/.vuepress/components/VideoLesson.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl index fa83fb3617..e4d5bb7681 100644 --- a/src/.vuepress/styles/index.styl +++ b/src/.vuepress/styles/index.styl @@ -125,31 +125,6 @@ } } -.scrimba, -.vueschool { - background-color: #e7ecf3; - padding: 1em 1.25em; - border-radius: 2px; - color: #486491; - position: relative; - margin: 24px 0; - - a { - color: #486491; - position: relative; - padding-left :16px; - } - - &::before { - content: "\f144"; - font-family: 'FontAwesome'; - font-size: 2em; - display: inline-block; - color: #73abfe; - vertical-align: middle; - } -} - .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) { font-size: inherit; cursor: pointer!important; diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index a7a4fc717d..ff63e0b61d 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -23,7 +23,7 @@ For these reasons, we recommend you **always use kebab-case for event names**. ## Defining Custom Events -
Learn how to define emitted events with a free lesson on Vue School
+Watch a free video about Defining Custom Events on Vue School Emitted events can be defined on the component via the `emits` option. diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index c5a301166e..2493e77550 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -6,7 +6,7 @@ Reaching this far in the documentation, you should already be familiar with both [the basics of Vue](introduction.md) and [creating components](component-basics.md). ::: -[Watch a free video about the Composition API on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) +Watch a free video about the Composition API on Vue Mastery Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundreds of components. When dealing with such large applications, sharing and reusing code becomes especially important. @@ -68,7 +68,7 @@ Now that we know the **why** we can get to the **how**. To start working with th ### `setup` Component Option -[Watch a free video about setup on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references) +Watch a free video on setup on Vue Mastery The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md index 90782a24bb..b7b9d225a6 100644 --- a/src/guide/composition-api-lifecycle-hooks.md +++ b/src/guide/composition-api-lifecycle-hooks.md @@ -2,7 +2,7 @@ > This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API. -[Watch a free video about Lifecycle Hooks on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks) +Watch a free video about Lifecycle Hooks on Vue Mastery You can access a component's lifecycle hook by prefixing the lifecycle hook with "on". diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md index 6c2261ad46..b0e1fa9eb8 100644 --- a/src/guide/reactivity.md +++ b/src/guide/reactivity.md @@ -2,7 +2,7 @@ Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system. -[Watch a free video about Reactivity on Vue Mastery](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity) +Watch a free video on Reactivity in Depth on Vue Mastery ## What is Reactivity?