From 72c9f2a4475f99623d45422b5e44408a6d1ed47e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 4 May 2017 12:42:13 +0200 Subject: [PATCH 1/5] Add french translation link Signed-off-by: Bruno Lesieur --- themes/vue/layout/partials/language_dropdown.ejs | 1 + 1 file changed, 1 insertion(+) diff --git a/themes/vue/layout/partials/language_dropdown.ejs b/themes/vue/layout/partials/language_dropdown.ejs index dcebf0f71f..94aa4f69a8 100644 --- a/themes/vue/layout/partials/language_dropdown.ejs +++ b/themes/vue/layout/partials/language_dropdown.ejs @@ -6,5 +6,6 @@
  • Русский
  • 한국어
  • Português
    • +
  • Français
    • From e4a1fbd64b543551241c8fc7c5f51d85b162f118 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 11 May 2017 11:57:12 +0200 Subject: [PATCH 2/5] kebab-case explaination updates Signed-off-by: Bruno Lesieur --- src/v2/guide/components.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 841eee6f98..309913193a 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -1155,7 +1155,7 @@ When using _string_ templates however, we're not bound by HTML's case-insensitiv - kebab-case - camelCase or kebab-case if the component has been defined using camelCase -- kebab-case, camelCase or Title case if the component has been defined using TitleCase +- kebab-case, camelCase or TitleCase if the component has been defined using TitleCase ``` js components: { @@ -1166,14 +1166,14 @@ components: { ``` ``` html - + - - + + - - - + + + ``` This means that the TitleCase is the most universal _declaration convention_ and kebab-case is the most universal _usage convention_. @@ -1181,7 +1181,7 @@ This means that the TitleCase is the most universal _declaration convention_ and If your component isn't passed content via `slot` elements, you can even make it self-closing with a `/` after the name: ``` html - + ``` Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them. From 20d0d4e1fe544fa3d3eef9803af5c8735ae12835 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 11 May 2017 11:59:27 +0200 Subject: [PATCH 3/5] kebab-case to kebab-cased Signed-off-by: Bruno Lesieur --- src/v2/guide/components.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 309913193a..36e59f73f0 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -1159,21 +1159,21 @@ When using _string_ templates however, we're not bound by HTML's case-insensitiv ``` js components: { - 'kebab-case-component': { /* ... */ }, - camelCaseComponent: { /* ... */ }, - TitleCaseComponent: { /* ... */ } + 'kebab-cased-component': { /* ... */ }, + camelCasedComponent: { /* ... */ }, + TitleCasedComponent: { /* ... */ } } ``` ``` html - - + + - - - + + + ``` This means that the TitleCase is the most universal _declaration convention_ and kebab-case is the most universal _usage convention_. From 91befe80f301f082bdbe3aa7b9f92f8254aaed3f Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Thu, 18 May 2017 20:46:55 -0400 Subject: [PATCH 4/5] Remove space before self-closing component --- 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 36e59f73f0..c544bbfdaa 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -1181,7 +1181,7 @@ This means that the TitleCase is the most universal _declaration convention_ and If your component isn't passed content via `slot` elements, you can even make it self-closing with a `/` after the name: ``` html - + ``` Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them. From 2d271772a12553e23b27a751e24c8364e6f4eb6c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 2 Jun 2017 16:54:18 +0200 Subject: [PATCH 5/5] Update all `Webpack` occurences by `webpack` (no majuscule) Signed-off-by: Bruno Lesieur --- src/v2/cookbook/adding-instance-properties.md | 2 +- src/v2/cookbook/index.md | 2 +- src/v2/guide/components.md | 10 +++++----- src/v2/guide/deployment.md | 10 +++++----- src/v2/guide/installation.md | 10 +++++----- src/v2/guide/plugins.md | 2 +- src/v2/guide/single-file-components.md | 10 +++++----- src/v2/guide/unit-testing.md | 2 +- 8 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index 7ffd3a2aa9..27b18f9fdf 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -151,7 +151,7 @@ So what are the alternatives? ### When Not Using a Module System -In applications with __no__ module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. +In applications with __no__ module system (e.g. via webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: diff --git a/src/v2/cookbook/index.md b/src/v2/cookbook/index.md index 1729e743f4..1e7e80ba2a 100644 --- a/src/v2/cookbook/index.md +++ b/src/v2/cookbook/index.md @@ -18,7 +18,7 @@ How is the cookbook different from the guide? Why is this necessary? - __Teaching JavaScript__: In the guide, we assume at least intermediate familiarity with ES5 JavaScript. For example, we won't explain how `Array.prototype.filter` works in a computed property that filters a list. In the cookbook however, essential JavaScript features (including ES6/2015+) can be explored and explained in the context of how they help us build better Vue applications. -- __Exploring the Ecosystem__: For advanced features, we assume some ecosystem knowledge. For example, if you want to use single-file components in Webpack, we don't explain how to configure the non-Vue parts of the Webpack config. In the cookbook, we have the space to explore these ecosystem libraries in more depth - at least to the extent that is universally useful for Vue developers. +- __Exploring the Ecosystem__: For advanced features, we assume some ecosystem knowledge. For example, if you want to use single-file components in webpack, we don't explain how to configure the non-Vue parts of the webpack config. In the cookbook, we have the space to explore these ecosystem libraries in more depth - at least to the extent that is universally useful for Vue developers. ## Guidelines for Recipes diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index c544bbfdaa..cfa18ddaf9 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -1069,18 +1069,18 @@ Vue.component('async-example', function (resolve, reject) { }) ``` -The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is simply for demonstration; How to retrieve the component is entirely up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting-require/): +The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is simply for demonstration; How to retrieve the component is entirely up to you. One recommended approach is to use async components together with [webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting-require/): ``` js Vue.component('async-webpack-example', function (resolve) { - // This special require syntax will instruct Webpack to + // This special require syntax will instruct webpack to // automatically split your built code into bundles which // are loaded over Ajax requests. require(['./my-async-component'], resolve) }) ``` -You can also return a `Promise` in the factory function, so with Webpack 2 + ES2015 syntax you can do: +You can also return a `Promise` in the factory function, so with webpack 2 + ES2015 syntax you can do: ``` js Vue.component( @@ -1100,7 +1100,7 @@ new Vue({ }) ``` -

    If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.

    +

    If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using webpack for built-in, first-class async support.

    ### Advanced Async Components @@ -1235,7 +1235,7 @@ Then a `tree-folder-contents` component with this template: When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here. -However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error: +However, if you're requiring/importing components using a __module system__, e.g. via webpack or Browserify, you'll get an error: ``` Failed to mount component: template or render function not defined. diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md index b00b20c83d..63a8c68547 100644 --- a/src/v2/guide/deployment.md +++ b/src/v2/guide/deployment.md @@ -14,11 +14,11 @@ If you are using the full build, i.e. directly including Vue via a script tag wi ### With Build Tools -When using a build tool like Webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. All `vue-cli` templates have these pre-configured for you, but it would be beneficial to know how it is done: +When using a build tool like webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. All `vue-cli` templates have these pre-configured for you, but it would be beneficial to know how it is done: -#### Webpack +#### webpack -Use Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config: +Use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config: ``` js var webpack = require('webpack') @@ -69,7 +69,7 @@ When using in-DOM templates or in-JavaScript template strings, the template-to-r The easiest way to pre-compile templates is using [Single-File Components](single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings. -If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step. +If you are using webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step. ## Extracting Component CSS @@ -77,7 +77,7 @@ When using Single-File Components, the CSS inside components are injected dynami Refer to the respective build tool documentations to see how it's done: -- [Webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured) +- [webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured) - [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction) - [Rollup + rollup-plugin-vue](https://github.com/znck/rollup-plugin-vue#options) diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 2af3bf66e4..d485d6c4a6 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -37,7 +37,7 @@ Also available on [jsDelivr](//cdn.jsdelivr.net/vue/latest/vue.js) or [cdnjs](// ## NPM -NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](single-file-components.html). +NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](single-file-components.html). ``` bash # latest stable @@ -108,7 +108,7 @@ When using `vue-loader` or `vueify`, templates inside `*.vue` files are pre-comp Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler: -#### Webpack +#### webpack ``` js module.exports = { @@ -157,9 +157,9 @@ CommonJS and ES Module builds are intended for bundlers, therefore we don't prov CommonJS and ES Module builds also preserve raw checks for `process.env.NODE_ENV` to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing `process.env.NODE_ENV` with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size. -#### Webpack +#### webpack -Use Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): +Use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): ``` js var webpack = require('webpack') @@ -208,7 +208,7 @@ Also see [Production Deployment Tips](deployment.html). Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of `new Function()` for evaluating expressions. The full build depends on this feature to compile templates, so is unusable in these environments. -On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), your templates will be precompiled into `render` functions which work perfectly in CSP environments. +On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with [webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), your templates will be precompiled into `render` functions which work perfectly in CSP environments. ## Dev Build diff --git a/src/v2/guide/plugins.md b/src/v2/guide/plugins.md index 9c28f9eb59..9827be3006 100644 --- a/src/v2/guide/plugins.md +++ b/src/v2/guide/plugins.md @@ -70,7 +70,7 @@ Vue.use(MyPlugin, { someOption: true }) Some plugins provided by Vue.js official plugins such as `vue-router` automatically calls `Vue.use()` if `Vue` is available as a global variable. However in a module environment such as CommonJS, you always need to call `Vue.use()` explicitly: ``` js -// When using CommonJS via Browserify or Webpack +// When using CommonJS via Browserify or webpack var Vue = require('vue') var VueRouter = require('vue-router') diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 0ab7995e3b..6697f88fdb 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -15,7 +15,7 @@ This can work very well for small to medium-sized projects, where JavaScript is - **No CSS support** means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out - **No build step** restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel -All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify. +All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as webpack or Browserify. Here's a simple example of a file we'll call `Hello.vue`: @@ -31,7 +31,7 @@ As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modul -These specific languages are just examples. You could just 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. +These specific languages are just examples. You could just 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. ### What About Separation of Concerns? @@ -60,10 +60,10 @@ With `.vue` components, we're entering the realm of advanced JavaScript applicat After you've taken a day to dive into these resources, we recommend checking out the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015 and hot-reloading running in no time! -The template uses [Webpack](https://webpack.js.org/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). +The template uses [webpack](https://webpack.js.org/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications). -In Webpack, each module can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org). +In webpack, each module can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org). ### For Advanced Users -Whether you prefer Webpack or Browserify, we have documented templates for both simple and more complex projects. We recommend browsing [github.com/vuejs-templates](https://github.com/vuejs-templates), picking a template that's right for you, then following the instructions in the README to generate a new project with [vue-cli](https://github.com/vuejs/vue-cli). +Whether you prefer webpack or Browserify, we have documented templates for both simple and more complex projects. We recommend browsing [github.com/vuejs-templates](https://github.com/vuejs-templates), picking a template that's right for you, then following the instructions in the README to generate a new project with [vue-cli](https://github.com/vuejs/vue-cli). diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index e092de27f3..2160382bbf 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -6,7 +6,7 @@ order: 23 ## Setup and Tooling -Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [Webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) and [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) may help you get started. +Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) and [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) may help you get started. ## Simple Assertions