From 44d73a1bba076d3e2f4f5550edc42c338d7b281d Mon Sep 17 00:00:00 2001
From: Trotyl Yu
Date: Mon, 21 May 2018 23:14:44 +0800
Subject: [PATCH 001/760] docs(guide/comparison): correct size stat of Angular
CLI project (#1638)
---
src/v2/guide/comparison.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md
index 5bf94f047e..994110231d 100644
--- a/src/v2/guide/comparison.md
+++ b/src/v2/guide/comparison.md
@@ -182,7 +182,7 @@ Both frameworks are exceptionally fast, with very similar metrics on benchmarks.
### Size
-Recent versions of Angular, with [AOT compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) and [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking), have been able to get its size down considerably. However, a full-featured Vue 2 project with Vuex + Vue Router included (~30KB gzipped) is still significantly lighter than an out-of-the-box, AOT-compiled application generated by `angular-cli` (~130KB gzipped).
+Recent versions of Angular, with [AOT compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) and [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking), have been able to get its size down considerably. However, a full-featured Vue 2 project with Vuex + Vue Router included (~30KB gzipped) is still significantly lighter than an out-of-the-box, AOT-compiled application generated by `angular-cli` (~65KB gzipped).
### Flexibility
From 3d1fdd88a9afab190d20a5329f0b6a4dbdf62518 Mon Sep 17 00:00:00 2001
From: Alexander Sokolov
Date: Mon, 21 May 2018 18:17:32 +0300
Subject: [PATCH 002/760] Update client-side-storage.md (#1640)
---
src/v2/cookbook/client-side-storage.md | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md
index 40296e4273..ffeb70fb77 100644
--- a/src/v2/cookbook/client-side-storage.md
+++ b/src/v2/cookbook/client-side-storage.md
@@ -56,9 +56,7 @@ And then finally, an example in Microsoft Edge. Note that you can find applicati

-
-As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.
-
+
As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.
Immediately writing the value may not advisable. Let's consider a slightly more advanced example. First, the updated form.
@@ -175,4 +173,4 @@ While the Local Storage API is relatively simple, it is missing some basic featu
## Wrapping Up
-While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful.
\ No newline at end of file
+While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful.
From 5bd7be01b10362f205902f1e052448f7b3f62bb7 Mon Sep 17 00:00:00 2001
From: Alexander Sokolov
Date: Mon, 21 May 2018 18:17:51 +0300
Subject: [PATCH 003/760] Update creating-custom-scroll-directives.md (#1639)
---
src/v2/cookbook/creating-custom-scroll-directives.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/cookbook/creating-custom-scroll-directives.md b/src/v2/cookbook/creating-custom-scroll-directives.md
index 927179a314..3989f2722c 100644
--- a/src/v2/cookbook/creating-custom-scroll-directives.md
+++ b/src/v2/cookbook/creating-custom-scroll-directives.md
@@ -50,7 +50,7 @@ new Vue({
We'd also need a style property that will transition the intermediary values here, in this case:
-```
+```css
.box {
transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
From ef9b64e753afb133946d2d6bee774ddff05af74c Mon Sep 17 00:00:00 2001
From: Evan You
Date: Tue, 22 May 2018 16:37:44 -0400
Subject: [PATCH 004/760] chore: update ad code
---
themes/vue/layout/partials/ad.ejs | 13 +++++--------
1 file changed, 5 insertions(+), 8 deletions(-)
diff --git a/themes/vue/layout/partials/ad.ejs b/themes/vue/layout/partials/ad.ejs
index ec329972a0..1a904321d3 100644
--- a/themes/vue/layout/partials/ad.ejs
+++ b/themes/vue/layout/partials/ad.ejs
@@ -1,11 +1,8 @@
-
From bf5a3312d76331a3028b67126494c52df05ed950 Mon Sep 17 00:00:00 2001
From: pipopotamasu
Date: Wed, 23 May 2018 07:48:11 +0900
Subject: [PATCH 005/760] remove unnecessary word 'know' (#1641)
---
src/v2/guide/components-edge-cases.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md
index 0dbfe792eb..edf05b7816 100644
--- a/src/v2/guide/components-edge-cases.md
+++ b/src/v2/guide/components-edge-cases.md
@@ -159,7 +159,7 @@ You can see the [full example here](https://jsfiddle.net/chrisvfritz/tdv8dt3s/).
In fact, you can think of dependency injection as sort of "long-range props", except:
* ancestor components don't need to know which descendants use the properties it provides
-* descendant components don't know need to know where injected properties are coming from
+* descendant components don't need to know where injected properties are coming from
However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as using $root for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like Vuex instead.
From 9e977cdc7c629115bde6af01bb38c74607f0b3cc Mon Sep 17 00:00:00 2001
From: Matt Turner
Date: Tue, 22 May 2018 18:49:08 -0400
Subject: [PATCH 006/760] Updated broken links for the Vue Test Utils
documentation. (#1643)
---
src/v2/cookbook/unit-testing-vue-components.md | 4 ++--
src/v2/guide/unit-testing.md | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index b4bee60785..f990e5763e 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -82,7 +82,7 @@ Automated testing allows large teams of developers to maintain complex codebases
#### Getting started
-[Vue Test Utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The [vue-cli](https://github.com/vuejs/vue-cli) `webpack` template comes with either Karma or Jest, both well supported test runners, and there are some [guides](https://vue-test-utils.vuejs.org/en/guides/) in the Vue Test Utils documentation.
+[Vue Test Utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The [vue-cli](https://github.com/vuejs/vue-cli) `webpack` template comes with either Karma or Jest, both well supported test runners, and there are some [guides](https://vue-test-utils.vuejs.org/guides/) in the Vue Test Utils documentation.
## Real-World Example
@@ -231,7 +231,7 @@ The above test is fairly simple, but in practice Vue components often have other
- committing or dispatching mutations or actions with a `Vuex` store
- testing interaction
-There are more complete examples showing such tests in the Vue Test Utils [guides](https://vue-test-utils.vuejs.org/en/guides/).
+There are more complete examples showing such tests in the Vue Test Utils [guides](https://vue-test-utils.vuejs.org/guides/).
Vue Test Utils and the enormous JavaScript ecosystem provides plenty of tooling to facilitate almost 100% test coverage. Unit tests are only one part of the testing pyramid, though. Some other types of tests include e2e (end to end) tests, and snapshot tests. Unit tests are the smallest and most simple of tests - they make assertions on the smallest units of work, isolating each part of a single component.
diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
index f6190dffb7..57593cb3c8 100644
--- a/src/v2/guide/unit-testing.md
+++ b/src/v2/guide/unit-testing.md
@@ -131,4 +131,4 @@ it('updates the rendered message when vm.message updates', done => {
We are planning to work on a collection of common test helpers to make it easier to render components with different constraints (e.g. shallow rendering that ignores child components) and assert their output.
-For more in-depth information on unit testing in Vue, check out [vue-test-utils](https://vue-test-utils.vuejs.org/en/) and our cookbook entry about [unit testing vue components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html).
+For more in-depth information on unit testing in Vue, check out [vue-test-utils](https://vue-test-utils.vuejs.org/) and our cookbook entry about [unit testing vue components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html).
From eee7fcda0e902d8a2c4cfb33f50335f326300fe0 Mon Sep 17 00:00:00 2001
From: Chris Fritz
Date: Thu, 24 May 2018 20:53:20 -0400
Subject: [PATCH 007/760] Reorganize component props to introduce prop types
earlier, fixes #1644 (#1646)
@BlitZz96 brought up a good point in [this issue](https://github.com/vuejs/vuejs.org/issues/1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it.
---
src/v2/guide/components-props.md | 45 +++++++++++++++++++++++++-------
1 file changed, 36 insertions(+), 9 deletions(-)
diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md
index 2f27cdbb46..1714ab33f7 100644
--- a/src/v2/guide/components-props.md
+++ b/src/v2/guide/components-props.md
@@ -25,7 +25,29 @@ Vue.component('blog-post', {
Again, if you're using string templates, this limitation does not apply.
-## Static and Dynamic Props
+## Prop Types
+
+So far, we've only seen props listed as an array of strings:
+
+```js
+props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
+```
+
+Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively:
+
+```js
+props: {
+ title: String,
+ likes: Number,
+ isPublished: Boolean,
+ commentIds: Array,
+ author: Object
+}
+```
+
+This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about [type checks and other prop validations](#Prop-Validation) further down this page.
+
+## Passing Static or Dynamic Props
So far, you've seen props passed a static value, like in:
@@ -36,7 +58,11 @@ So far, you've seen props passed a static value, like in:
You've also seen props assigned dynamically with `v-bind`, such as in:
```html
+
+
+
+
```
In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop.
@@ -56,14 +82,14 @@ In the two examples above, we happen to pass string values, but _any_ type of va
```html
-
+
-
+
-
+
```
### Passing an Array
@@ -82,10 +108,10 @@ In the two examples above, we happen to pass string values, but _any_ type of va
```html
-
+
-
+
```
### Passing the Properties of an Object
@@ -148,7 +174,7 @@ There are usually two cases where it's tempting to mutate a prop:
## Prop Validation
-Components can specify requirements for its props. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
+Components can specify requirements for its props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings. For example:
@@ -200,9 +226,10 @@ The `type` can be one of the following native constructors:
- String
- Number
- Boolean
-- Function
-- Object
- Array
+- Object
+- Date
+- Function
- Symbol
In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists:
From dc9b6cb430f1712ca3d5366c21c0f37ee4e1acb3 Mon Sep 17 00:00:00 2001
From: mgdodge
Date: Fri, 25 May 2018 00:17:16 -0600
Subject: [PATCH 008/760] First stab at SFC to npm documentation (#1558)
* First stab at SFC to npm documentation
* Clean up sample code, clarify .vue usage with SSR builds
* Run build tasks in parallel, fix dependency order
* Backtick all instances of .vue, minor edits for clarity
* Fix typo on link
* Update url to vue-sfc-rollup utility in acknowledgements
* Fix order, other edits suggested by @sdras
* Additional explanation about sfc-to-npm recipe package.json
---
src/v2/cookbook/packaing-sfc-for-npm.md | 216 ++++++++++++++++++++++++
1 file changed, 216 insertions(+)
create mode 100644 src/v2/cookbook/packaing-sfc-for-npm.md
diff --git a/src/v2/cookbook/packaing-sfc-for-npm.md b/src/v2/cookbook/packaing-sfc-for-npm.md
new file mode 100644
index 0000000000..90cbf4b5f8
--- /dev/null
+++ b/src/v2/cookbook/packaing-sfc-for-npm.md
@@ -0,0 +1,216 @@
+---
+title: Packaging Vue Components for npm
+type: cookbook
+order: 12
+---
+
+## Base Example
+
+Vue components by nature are meant to be re-used. This is easy when the component is only used within a single application. But how can you write a component once and use it in multiple sites/applications? Perhaps the easiest solution is via npm.
+
+By packaging your component to be shared via npm, it can be imported/required into a build process for use in full-fledged web applications:
+
+```js
+import MyComponent from 'my-component';
+
+export default {
+ components: {
+ MyComponent,
+ },
+ // rest of the component
+}
+```
+
+Or even used via `
+
+ ...
+
+ ...
+```
+
+Not only does this help you avoid copy/pasting components around, but it also allows you to give back to the Vue community!
+
+## Can't I Just Share `.vue` Files Directly?
+
+Vue already allows components to be written as a single file. Because a Single File Component (SFC) is already just one file, you might ask:
+
+> "Why can't people use my `.vue` file directly? Isn't that the simplest way to share components?"
+
+It's true, you can share `.vue` files directly, and anyone using a [Vue build](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds) containing the Vue compiler can consume it immediately. Also, the SSR build uses string concatenation as an optimization, so the `.vue` file might be preferred in this scenario (see [Packaging Components for npm > SSR Usage](#SSR-Usage) for details). However, this excludes anyone who wishes to use the component directly in a browser via `
+
```
You can browse the source of the NPM package at [cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue/).
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index 8300f88561..a1a7fce09a 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -1,7 +1,7 @@
site_description: "Vue.js - The Progressive JavaScript Framework"
google_analytics: UA-46852172-1
root_domain: vuejs.org
-vue_version: 2.5.13
+vue_version: 2.5.16
special_sponsors:
- url: https://stdlib.com
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index f460a72ad7..77b6689743 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -58,7 +58,10 @@
-
+
From fda94a9366eabbe7f04478dfa60ef29ffb53c7ad Mon Sep 17 00:00:00 2001
From: Chris Fritz
Date: Sun, 3 Jun 2018 15:12:52 -0400
Subject: [PATCH 017/760] add text versions of image code examples
---
src/v2/guide/single-file-components.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md
index 7c2ca16d4f..ae72d1cabc 100644
--- a/src/v2/guide/single-file-components.md
+++ b/src/v2/guide/single-file-components.md
@@ -19,7 +19,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m
Here's an example of a file we'll call `Hello.vue`:
-
+
Now we get:
@@ -29,7 +29,7 @@ Now we get:
As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
-
+
These specific languages are only examples. You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules.
From b0d792b3d89a90b9549a871f440c9fb26d943801 Mon Sep 17 00:00:00 2001
From: Chris Fritz
Date: Sun, 3 Jun 2018 15:24:35 -0400
Subject: [PATCH 018/760] remove extra comma in components
---
src/v2/guide/components.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index 30968ba9eb..0ed6bcdcaf 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -185,7 +185,7 @@ new Vue({
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
- { id: 3, title: 'Why Vue is so fun' },
+ { id: 3, title: 'Why Vue is so fun' }
]
}
})
From cffbc40145f5bd1231eeab16f7d5aea3c775cf4e Mon Sep 17 00:00:00 2001
From: K3A
Date: Sun, 3 Jun 2018 21:44:28 +0200
Subject: [PATCH 019/760] TypeScript project generation in @vue/cli 3.0 (#1668)
* TypeScript project generation in @vue/cli 3.0
update information about generating TypeScript project using new @vue/cli 3.0
* tweaks to Vue CLI 3 TypeScript support docs
---
src/v2/guide/typescript.md | 20 +++++++++++++++-----
1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md
index d65676dfc0..80a13033ce 100644
--- a/src/v2/guide/typescript.md
+++ b/src/v2/guide/typescript.md
@@ -12,8 +12,6 @@ A static type system can help prevent many potential runtime errors, especially
Since these are [published on NPM](https://cdn.jsdelivr.net/npm/vue/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue.
-We also plan to provide an option to scaffold a ready-to-go Vue + TypeScript project in `vue-cli` in the near future.
-
## Recommended Configuration
``` js
@@ -37,11 +35,23 @@ See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handb
## Development Tooling
-For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript.
+## Project Creation
+
+[Vue CLI 3](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:
+
+```bash
+# 1. Install Vue CLI, if it's not already installed
+npm install --global @vue/cli
+
+# 2. Create a new project, then choose the "Manually select features" option
+vue create my-project-name
+```
+
+## Editor Support
-If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
+For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
-[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.js.
+[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
## Basic Usage
From 4a734c253ec659b3ce203d585d201472e4226b06 Mon Sep 17 00:00:00 2001
From: Evan You
Date: Mon, 4 Jun 2018 10:02:46 -0400
Subject: [PATCH 020/760] chore: update sponsors
---
themes/vue/_config.yml | 4 ++++
themes/vue/layout/sponsors-page.ejs | 10 ++++++++++
themes/vue/source/css/_sponsors-page.styl | 6 ++++--
themes/vue/source/images/dopamine.png | Bin 0 -> 40878 bytes
4 files changed, 18 insertions(+), 2 deletions(-)
create mode 100644 themes/vue/source/images/dopamine.png
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index a1a7fce09a..66ddce0881 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -60,6 +60,10 @@ gold_sponsors:
- url: https://www.pubnub.com/vue-js/
img: pubnub.png
+silver_sponsors:
+ - url: https://dopamine.bg/
+ img: dopamine.png
+
bronze_sponsors:
- url: http://tighten.co/
img: http://i.imgur.com/T7fQYLT.png
diff --git a/themes/vue/layout/sponsors-page.ejs b/themes/vue/layout/sponsors-page.ejs
index 84857c52ff..d2ed9bd394 100644
--- a/themes/vue/layout/sponsors-page.ejs
+++ b/themes/vue/layout/sponsors-page.ejs
@@ -121,6 +121,16 @@ Recurring pledges come with exclusive perks, e.g. having your name listed in the
<%_ } _%>
+
Patreon Silver
+
+
+<%_ for (const sponsor of theme.silver_sponsors) {_%>
+
+
+
+<%_ } _%>
+
+
If you run a business and are using Vue in a revenue-generating product, it makes business sense to sponsor Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers.
From aeebd0e98e9b4293ac280e22711b871811311197 Mon Sep 17 00:00:00 2001
From: Evan You
Date: Mon, 11 Jun 2018 17:43:31 -0400
Subject: [PATCH 023/760] add Scrimba links for preview
---
src/v2/guide/index.md | 10 ++++++++++
themes/vue/source/css/_scrimba.styl | 31 +++++++++++++++++++++++++++++
themes/vue/source/css/page.styl | 3 ++-
3 files changed, 43 insertions(+), 1 deletion(-)
create mode 100644 themes/vue/source/css/_scrimba.styl
diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
index 98415eceb7..38a212895d 100644
--- a/src/v2/guide/index.md
+++ b/src/v2/guide/index.md
@@ -32,8 +32,12 @@ or:
The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.
+If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/playlist/pXKqta), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+
## Declarative Rendering
+
+
At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
``` html
@@ -105,6 +109,8 @@ If you open up your JavaScript console again and enter `app2.message = 'some new
## Conditionals and Loops
+
+
It's easy to toggle the presence of an element, too:
``` html
@@ -189,6 +195,8 @@ In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a
## Handling User Input
+
+
To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances:
``` html
@@ -265,6 +273,8 @@ var app6 = new Vue({
## Composing with Components
+
+
The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

diff --git a/themes/vue/source/css/_scrimba.styl b/themes/vue/source/css/_scrimba.styl
new file mode 100644
index 0000000000..2a5d16e966
--- /dev/null
+++ b/themes/vue/source/css/_scrimba.styl
@@ -0,0 +1,31 @@
+.scrimba
+ background-color #e7ecf3
+ padding 1em 1.25em
+ border-radius 2px
+ color #486491
+ position relative
+ a
+ color #486491 !important
+ position relative
+ padding-left 36px
+ &:before
+ content ''
+ position absolute
+ display block
+ width 30px
+ height 30px
+ top -5px
+ left -4px
+ border-radius 50%
+ background-color #73abfe
+ &:after
+ content ''
+ position absolute
+ display block
+ width 0
+ height 0
+ top 5px
+ left 8px
+ border-top 5px solid transparent
+ border-bottom 5px solid transparent
+ border-left 8px solid #fff
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index cbb59ad9ab..5e9ca12b45 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -12,6 +12,7 @@
@import "https://github.com/_team"
@import "https://github.com/_style-guide"
@import "https://github.com/_modal"
+@import "https://github.com/_scrimba"
#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
@@ -255,4 +256,4 @@
&.tip
background-color: rgb(255,255,255)
border: 2px solid #e8e8e8
- border-left: 4px solid $red
\ No newline at end of file
+ border-left: 4px solid $red
From 1a16aa2bdd4519abfceddbf8b0c369bd7cc57360 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn
Date: Sun, 17 Jun 2018 01:55:26 +0300
Subject: [PATCH 024/760] Fix example indentation in the Unit Testing Vue
Components recipe (#1683)
---
.../cookbook/unit-testing-vue-components.md | 26 +++++++++----------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index f990e5763e..7bdfa5aae2 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -149,22 +149,22 @@ import { shallowMount } from '@vue/test-utils'
describe('Foo', () => {
it('renders a message and responds correctly to user input', () => {
- const wrapper = shallowMount(Foo, {
- data: {
- message: 'Hello World',
- username: ''
- }
- })
+ const wrapper = shallowMount(Foo, {
+ data: {
+ message: 'Hello World',
+ username: ''
+ }
+ })
- // see if the message renders
- expect(wrapper.find('.message').text()).toEqual('Hello World')
+ // see if the message renders
+ expect(wrapper.find('.message').text()).toEqual('Hello World')
- // assert the error is rendered
- expect(wrapper.find('.error').exists()).toBeTruthy()
+ // assert the error is rendered
+ expect(wrapper.find('.error').exists()).toBeTruthy()
- // update the `username` and assert error is no longer rendered
- wrapper.setData({ username: 'Lachlan' })
- expect(wrapper.find('.error').exists()).toBeFalsy()
+ // update the `username` and assert error is no longer rendered
+ wrapper.setData({ username: 'Lachlan' })
+ expect(wrapper.find('.error').exists()).toBeFalsy()
})
})
```
From f55d69362a60766b7b038acc00a3f58c4a637d31 Mon Sep 17 00:00:00 2001
From: Alexander Sokolov
Date: Sun, 17 Jun 2018 02:01:14 +0300
Subject: [PATCH 025/760] Update debugging-in-vscode.md (#1662)
---
src/v2/cookbook/debugging-in-vscode.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md
index fd2f0eb5af..9e9751c838 100644
--- a/src/v2/cookbook/debugging-in-vscode.md
+++ b/src/v2/cookbook/debugging-in-vscode.md
@@ -53,19 +53,19 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
-
+ 
2. Open your favorite terminal at the root folder and serve the app using Vue CLI:
-```
-npm start
-```
+ ```
+ npm start
+ ```
3. Go to the Debug view, select the **'vuejs: chrome'** configuration, then press F5 or click the green play button.
4. Your breakpoint should now be hit as the new instance of Chrome opens `http://localhost:8080`.
-
+ 
## Alternative Patterns
From 912d564e694995524e6f66aa60ac2a66860a3fe4 Mon Sep 17 00:00:00 2001
From: Kevin Young
Date: Sat, 16 Jun 2018 19:05:04 -0400
Subject: [PATCH 026/760] Added link to vuemeetups.org to the ecosystem
drop-down menu on website. (#1685)
---
themes/vue/layout/partials/ecosystem_dropdown.ejs | 1 +
1 file changed, 1 insertion(+)
diff --git a/themes/vue/layout/partials/ecosystem_dropdown.ejs b/themes/vue/layout/partials/ecosystem_dropdown.ejs
index b81da2dcfd..5a137e774f 100644
--- a/themes/vue/layout/partials/ecosystem_dropdown.ejs
+++ b/themes/vue/layout/partials/ecosystem_dropdown.ejs
@@ -5,6 +5,7 @@
From 4fe97c474286e59b9801d7caf3c19e4618d1effe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E7=BF=9B=E7=84=B6?=
Date: Sun, 17 Jun 2018 07:27:02 +0800
Subject: [PATCH 027/760] Correct mistake of Migration from Vue 1.x (#1686)
---
src/v2/guide/migration.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md
index 60c4ba7e8f..9802143ede 100644
--- a/src/v2/guide/migration.md
+++ b/src/v2/guide/migration.md
@@ -364,7 +364,7 @@ computed: {
Or with component methods:
``` js
-template: '
message: {{ getTimeMessage }}
',
+template: '
message: {{ getTimeMessage() }}
',
methods: {
getTimeMessage: function () {
return Date.now() + this.message
From 171e1985775baea7d3b5f13643ea3584a10f572b Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn
Date: Sun, 17 Jun 2018 16:25:54 +0300
Subject: [PATCH 028/760] Fix code style in Form Validation recipe (#1682)
* Fix code style in Form Validation recipe
* More style code slight improvement in Form Validation recipe
---
src/v2/cookbook/form-validation.md | 139 +++++++++++++++++------------
1 file changed, 82 insertions(+), 57 deletions(-)
diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md
index c525dd5a81..0832c632db 100644
--- a/src/v2/cookbook/form-validation.md
+++ b/src/v2/cookbook/form-validation.md
@@ -54,19 +54,28 @@ The final thing to note is that each of the three fields has a corresponding `v-
``` js
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:null,
- age:null,
- movie:null
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ age: null,
+ movie: null
},
methods:{
- checkForm:function(e) {
- if(this.name && this.age) return true;
+ checkForm: function (e) {
+ if (this.name && this.age) {
+ return true;
+ }
+
this.errors = [];
- if(!this.name) this.errors.push("Name required.");
- if(!this.age) this.errors.push("Age required.");
+
+ if (!this.name) {
+ this.errors.push('Name required.');
+ }
+ if (!this.age) {
+ this.errors.push('Age required.');
+ }
+
e.preventDefault();
}
}
@@ -122,26 +131,33 @@ While the change here is small, note the `novalidate="true"` on top. This is imp
``` js
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:null,
- email:null,
- movie:null
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ email: null,
+ movie: null
},
- methods:{
- checkForm:function(e) {
+ methods: {
+ checkForm: function (e) {
this.errors = [];
- if(!this.name) this.errors.push("Name required.");
- if(!this.email) {
- this.errors.push("Email required.");
- } else if(!this.validEmail(this.email)) {
- this.errors.push("Valid email required.");
+
+ if (!this.name) {
+ this.errors.push("Name required.");
+ }
+ if (!this.email) {
+ this.errors.push('Email required.');
+ } else if (!this.validEmail(this.email)) {
+ this.errors.push('Valid email required.');
+ }
+
+ if (!this.errors.length) {
+ return true;
}
- if(!this.errors.length) return true;
+
e.preventDefault();
},
- validEmail:function(email) {
+ validEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
@@ -197,29 +213,36 @@ Note the set of inputs covering the five different features. Note the addition o
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data:{
- errors:[],
- weapons:0,
- shields:0,
- coffee:0,
- ac:0,
- mousedroids:0
+ errors: [],
+ weapons: 0,
+ shields: 0,
+ coffee: 0,
+ ac: 0,
+ mousedroids: 0
},
- computed:{
- total:function() {
- // must parse cuz Vue turns empty value to string
- return Number(this.weapons)+
- Number(this.shields)+
- Number(this.coffee)+
+ computed: {
+ total: function () {
+ // must parse because Vue turns empty value to string
+ return Number(this.weapons) +
+ Number(this.shields) +
+ Number(this.coffee) +
Number(this.ac+this.mousedroids);
}
},
methods:{
- checkForm:function(e) {
+ checkForm: function (e) {
this.errors = [];
- if(this.total != 100) this.errors.push("Total must be 100!");
- if(!this.errors.length) return true;
+
+ if (this.total != 100) {
+ this.errors.push('Total must be 100!');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
e.preventDefault();
}
}
@@ -237,16 +260,16 @@ In my final example, we built something that makes use of Ajax to validate at th
``` js
function main(args) {
-
return new Promise((resolve, reject) => {
-
// bad product names: vista, empire, mbp
- let badNames = ['vista','empire','mbp'];
- if(badNames.includes(args.name)) reject({error:'Existing product'});
- resolve({status:'ok'});
-
+ const badNames = ['vista', 'empire', 'mbp'];
+
+ if (badNames.includes(args.name)) {
+ reject({error: 'Existing product'});
+ }
+
+ resolve({status: 'ok'});
});
-
}
```
@@ -280,22 +303,24 @@ There isn't anything special here. So let's go on to the JavaScript.
const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:''
+ el: '#app',
+ data: {
+ errors: [],
+ name: ''
},
methods:{
- checkForm:function(e) {
+ checkForm: function (e) {
e.preventDefault();
+
this.errors = [];
- if(this.name === '') {
- this.errors.push("Product name is required.");
+
+ if (this.name === '') {
+ this.errors.push('Product name is required.');
} else {
- fetch(apiUrl+encodeURIComponent(this.name))
+ fetch(apiUrl + encodeURIComponent(this.name))
.then(res => res.json())
.then(res => {
- if(res.error) {
+ if (res.error) {
this.errors.push(res.error);
} else {
// redirect to a new URL, or do something on success
From 779c5d5d332a645ed38c9e1d6beabe96fd0158cb Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn
Date: Sun, 17 Jun 2018 19:21:31 +0300
Subject: [PATCH 029/760] Fix code style in Client-Side Storage recipe (#1690)
---
src/v2/cookbook/client-side-storage.md | 37 ++++++++++++++++----------
1 file changed, 23 insertions(+), 14 deletions(-)
diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md
index ffeb70fb77..364e67dbbc 100644
--- a/src/v2/cookbook/client-side-storage.md
+++ b/src/v2/cookbook/client-side-storage.md
@@ -22,12 +22,14 @@ This example has one form field bound to a Vue value called `name`. Here's the J
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data: {
- name:''
+ name: ''
},
mounted() {
- if(localStorage.name) this.name = localStorage.name;
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
},
watch: {
name(newName) {
@@ -75,12 +77,16 @@ Now we've got two fields (again, bound to a Vue instance) but now there is the a
const app = new Vue({
el:'#app',
data: {
- name:'',
- age:0
+ name: '',
+ age: 0
},
mounted() {
- if(localStorage.name) this.name = localStorage.name;
- if(localStorage.age) this.age = localStorage.age;
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
+ if (localStorage.age) {
+ this.age = localStorage.age;
+ }
},
methods: {
persist() {
@@ -106,7 +112,7 @@ As mentioned above, Local Storage only works with simple values. To store more c
Cats
- {{cat}}
+ {{ cat }}
@@ -122,14 +128,14 @@ This "app" consists of a simple list on top (with a button to remove a cat) and
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data: {
- cats:[],
- newCat:null
+ cats: [],
+ newCat: null
},
mounted() {
- if(localStorage.getItem('cats')) {
+ if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) {
@@ -140,13 +146,16 @@ const app = new Vue({
methods: {
addCat() {
// ensure they actually typed something
- if(!this.newCat) return;
+ if (!this.newCat) {
+ return;
+ }
+
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();
},
removeCat(x) {
- this.cats.splice(x,1);
+ this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
From 9969aad615d4c7c0608e95ca2a981fb6bd068332 Mon Sep 17 00:00:00 2001
From: "Bruno J. S. Lesieur"
Date: Sun, 17 Jun 2018 18:24:19 +0200
Subject: [PATCH 030/760] [Doc EN]: `typescript.md` (#1679)
* New in with + symbol
Signed-off-by: Bruno Lesieur
* Review of 2.5.0 doc
Signed-off-by: Bruno Lesieur
* Review
Signed-off-by: Bruno Lesieur
* Fix syntax typo
Signed-off-by: Bruno Lesieur
* Add space between new line of documentation
Signed-off-by: MachinisteWeb
* Add @posva review
Signed-off-by: MachinisteWeb
* Add french str
Signed-off-by: MachinisteWeb
* Change directeur to director
Signed-off-by: MachinisteWeb
* Fix EN doc
Signed-off-by: MachinisteWeb
* Subtitle for typescript.md
Signed-off-by: MachinisteWeb
* Revert instance.md
Signed-off-by: MachinisteWeb
---
src/v2/guide/typescript.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md
index 80a13033ce..b4d7723208 100644
--- a/src/v2/guide/typescript.md
+++ b/src/v2/guide/typescript.md
@@ -35,7 +35,7 @@ See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handb
## Development Tooling
-## Project Creation
+### Project Creation
[Vue CLI 3](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:
@@ -47,7 +47,7 @@ npm install --global @vue/cli
vue create my-project-name
```
-## Editor Support
+### Editor Support
For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
From edbbf1a4a01a50492da9bcdf8f49b999ef2d58da Mon Sep 17 00:00:00 2001
From: Fabrizio Cucci
Date: Mon, 18 Jun 2018 18:48:47 +0100
Subject: [PATCH 031/760] [cookbook] Dockerize Vue.js App (#1483)
* First draft with 'Simple Example' section
* Fix typo on Docker 'build' command
* Fix copy of multiple files
* Remove unnecessary whitespace
* Fix typo in webpack template link
* First draft of 'Real-World Example'
* Update 'Real-World Example' with multi-stage build
* Add 'Why Dockerize a Vue.js App?' section
* Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context'
* Add 'Alternative Patterns' section
* Minor fix on 'Alternative Patterns'
* Fixed typo
* Update order to avoid collision with other cookbooks
* Clarify why NGINX in real-world example
---
src/v2/cookbook/dockerize-vuejs-app.md | 134 +++++++++++++++++++++++++
1 file changed, 134 insertions(+)
create mode 100644 src/v2/cookbook/dockerize-vuejs-app.md
diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md
new file mode 100644
index 0000000000..3491268038
--- /dev/null
+++ b/src/v2/cookbook/dockerize-vuejs-app.md
@@ -0,0 +1,134 @@
+---
+title: Dockerize Vue.js App
+type: cookbook
+order: 13
+---
+
+## Simple Example
+
+So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container.
+
+Let's start by creating a `Dockerfile` in the root folder of our project:
+
+```docker
+FROM node:9.11.1-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]
+```
+
+It may seem reduntant to first copy `package.json` and `package-lock.json` and then all project files and folders in two separate steps but there is actually [a very good reason for that](http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/) (spoiler: it allows us to take advantage of cached Docker layers).
+
+Now let's build the Docker image of our Vue.js app:
+
+```bash
+docker build -t vuejs-cookbook/dockerize-vuejs-app .
+```
+
+Finally, let's run our Vue.js app in a Docker container:
+
+```bash
+docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app
+```
+
+We should be able to access our Vue.js app on `localhost:8080`.
+
+## Real-World Example
+
+In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app which is perfectly ok for quick prototyping and _may_ even be ok for simple production scenarios. After all, the documentation says:
+
+> It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning.
+
+Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/) and that is exactly what we are going to do next: we are about to leverage NGINX to serve our vue.js app because it is considered to be one of the most performant and battle-tested solutions out there.
+
+Let's refactor our `Dockerfile` to use NGINX:
+
+ ```docker
+# build stage
+FROM node:9.11.1-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginx:1.13.12-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+Ok, let's see what's going on here:
+* we have split our original `Dockerfile` in multiple stages by leveraging the Docker [multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/) feature;
+* the first stage is responsible for building a production-ready artifact of our Vue.js app;
+* the second stage is responsible for serving such artifact using NGINX.
+
+Now let's build the Docker image of our Vue.js app:
+
+```bash
+docker build -t vuejs-cookbook/dockerize-vuejs-app .
+```
+
+Finally, let's run our Vue.js app in a Docker container:
+
+```bash
+docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app
+```
+
+We should be able to access our Vue.js app on `localhost:8080`.
+
+## Additional Context
+
+If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that.
+
+Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords:
+* Microservices
+* DevOps
+* Continuous Delivery
+
+Let's see how these concepts actually affect our decision of dockerizing our Vue.js app.
+
+### Effects of Microservices
+
+By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.
+
+So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service.
+
+### Effects of DevOps
+
+The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers").
+
+So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a deveveloper's laptop, the production environment or any environment we may think of.
+
+### Effects of Continuous Delivery
+
+By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters).
+
+So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence.
+
+## Alternative Patterns
+
+If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need.
+
+Common alternatives are:
+* leveraging an all-in-one platform like [netlify](https://www.netlify.com/);
+* hosting your SPA on [Amazon S3](https://aws.amazon.com/s3/) and serving it with [Amazon CloudFront](https://aws.amazon.com/cloudfront/) (see [this](https://serverless-stack.com/chapters/deploy-the-frontend.html) link for a detailed guide).
\ No newline at end of file
From e93b8371d73e4467dd8152703ddf1db423f489a2 Mon Sep 17 00:00:00 2001
From: Alexander Sokolov
Date: Mon, 18 Jun 2018 20:49:38 +0300
Subject: [PATCH 032/760] Update debugging-in-vscode.md (#1663)
---
src/v2/cookbook/debugging-in-vscode.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md
index 9e9751c838..2e133dc5a6 100644
--- a/src/v2/cookbook/debugging-in-vscode.md
+++ b/src/v2/cookbook/debugging-in-vscode.md
@@ -24,6 +24,16 @@ Go to `config/index.js` and find the `devtool` property. Update it to:
devtool: 'source-map',
```
+With Vue CLI 3 you need set `devtool` property inside `vue.config.js`:
+
+```js
+module.exports = {
+ configureWebpack: {
+ devtool: 'source-map'
+ }
+}
+```
+
### Launching the Application from VS Code
Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome** for the environment. Replace content of the generated launch.json with the following two configurations:
From 53b11fbbef932f3ba2cf0596fe198d6be8d70e23 Mon Sep 17 00:00:00 2001
From: Chris Fritz
Date: Tue, 26 Jun 2018 10:27:38 -0400
Subject: [PATCH 033/760] remove outdated information about polymer from
comparison
---
src/v2/guide/comparison.md | 10 ++--------
1 file changed, 2 insertions(+), 8 deletions(-)
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md
index f0f11eabf7..2c606826f3 100644
--- a/src/v2/guide/comparison.md
+++ b/src/v2/guide/comparison.md
@@ -216,15 +216,9 @@ There also seem to be philosophical differences in the API design which if you'r
## Polymer
-Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue's components can be loosely compared to Polymer's custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don't support those features natively. In contrast, Vue works without any dependencies or polyfills down to IE9.
+Polymer is another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue's components can be loosely compared to Polymer's custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don't support those features natively. In contrast, Vue works without any dependencies or polyfills down to IE9.
-In Polymer 1.0, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible.
-
-Polymer custom elements are authored in HTML files, which limits you to plain JavaScript/CSS (and language features supported by today's browsers). In comparison, Vue's single file components allows you to easily use ES2015+ and any CSS preprocessors you want.
-
-When deploying to production, Polymer recommends loading everything on-the-fly with HTML Imports, which assumes browsers implementing the spec, and HTTP/2 support on both server and client. This may or may not be feasible depending on your target audience and deployment environment. In cases where this is not desirable, you will have to use a special tool called Vulcanizer to bundle your Polymer elements. On this front, Vue can combine its async component feature with webpack's code-splitting feature to easily split out parts of the application bundle to be lazy-loaded. This ensures compatibility with older browsers while retaining great app loading performance.
-
-It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation - however at this moment we are still waiting for the specs to mature and be widely implemented in all mainstream browsers before making any serious commitments.
+In Polymer, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible.
## Riot
From 9fa45f08194f9b80d07d5d6332ca7930afd9217c Mon Sep 17 00:00:00 2001
From: Evan You
Date: Thu, 28 Jun 2018 10:55:46 -0400
Subject: [PATCH 034/760] update React comparison status
---
src/v2/guide/comparison.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md
index 2c606826f3..072bbe69dc 100644
--- a/src/v2/guide/comparison.md
+++ b/src/v2/guide/comparison.md
@@ -22,7 +22,7 @@ Being so similar in scope, we've put more time into fine-tuning this comparison
With that said, it's inevitable that the comparison would appear biased towards Vue to some React users, as many of the subjects explored are to some extent subjective. We acknowledge the existence of varying technical taste, and this comparison primarily aims to outline the reasons why Vue could potentially be a better fit if your preferences happen to coincide with ours.
-The React community [has been instrumental](https://github.com/vuejs/vuejs.org/issues/364) in helping us achieve this balance, with special thanks to Dan Abramov from the React team. He was extremely generous with his time and considerable expertise to help us refine this document until we were [both happy](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740) with the final result.
+Some of the sections below may also be slightly outdated due to recent updates in React 16+, and we are planning to work with the React community to revamp this section in the near future.
### Runtime Performance
From 78be5fca77ede2ae7e20036947b34f9f60efa126 Mon Sep 17 00:00:00 2001
From: Evan You
Date: Sun, 1 Jul 2018 09:45:07 -0400
Subject: [PATCH 035/760] chore: adjust sponsor placement
---
themes/vue/_config.yml | 7 ++-----
themes/vue/layout/index.ejs | 11 +++--------
themes/vue/source/css/index.styl | 3 +--
themes/vue/source/images/bit-wide.png | Bin 28222 -> 28340 bytes
4 files changed, 6 insertions(+), 15 deletions(-)
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index 6a3f09a718..a997f01584 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -6,13 +6,10 @@ vue_version: 2.5.16
special_sponsors:
- url: https://stdlib.com
img: stdlib.png
- - url: https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue
- img: bit.png
- wide_img: bit-wide.png
- big_width: 120px
- big_height: 120px
platinum_sponsors:
+ - url: https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue
+ img: bit-wide.png
- url: http://tooltwist.com/
img: tooltwist.png
- url: https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index aa01560739..af60370265 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -29,17 +29,12 @@