diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index 5e18247356..3cbbaafaa4 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -158,7 +158,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/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md index fd2f0eb5af..a90abe95ad 100644 --- a/src/v2/cookbook/debugging-in-vscode.md +++ b/src/v2/cookbook/debugging-in-vscode.md @@ -16,7 +16,7 @@ Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli ### Showing Source Code in the Chrome Devtools -Before you can debug your Vue components from VS Code you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack. +Before you can debug your Vue components from VS Code you need to update the generated webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by webpack. Go to `config/index.js` and find the `devtool` property. Update it to: diff --git a/src/v2/cookbook/index.md b/src/v2/cookbook/index.md index 1a0f0c24a9..3722289bbb 100644 --- a/src/v2/cookbook/index.md +++ b/src/v2/cookbook/index.md @@ -14,7 +14,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. ## Cookbook Contributions diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md index 988e130b48..ae9b18cb85 100644 --- a/src/v2/guide/components-dynamic-async.md +++ b/src/v2/guide/components-dynamic-async.md @@ -214,18 +214,18 @@ Vue.component('async-example', function (resolve, reject) { }) ``` -As you can see, 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 for demonstration; how to retrieve the component is 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/): +As you can see, 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 for demonstration; how to retrieve the component is 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/): ``` 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 and ES2015 syntax you can do: +You can also return a `Promise` in the factory function, so with webpack 2 and ES2015 syntax you can do: ``` js Vue.component( @@ -246,7 +246,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 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 using webpack for built-in, first-class async support.

### Handling Loading State diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index 88b8458224..cab791bf1a 100644 --- a/src/v2/guide/components-edge-cases.md +++ b/src/v2/guide/components-edge-cases.md @@ -290,7 +290,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. @@ -306,7 +306,7 @@ beforeCreate: function () { } ``` -Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally: +Or alternatively, you could use webpack's asynchronous `import` when you register the component locally: ``` js components: { diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 1fd04ec1c4..50fe8e59ea 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -72,7 +72,7 @@ This even applies to all subcomponents, meaning all three of these components wi ## Local Registration -Global registration often isn't ideal. For example, if you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download. +Global registration often isn't ideal. For example, if you're using a build system like webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download. In these cases, you can define your components as plain JavaScript objects: @@ -109,7 +109,7 @@ var ComponentB = { } ``` -Or if you're using ES2015 modules, such as through Babel and Webpack, that might look more like: +Or if you're using ES2015 modules, such as through Babel and webpack, that might look more like: ```js import ComponentA from './ComponentA.vue' @@ -133,7 +133,7 @@ If you're not using a module system with `import`/`require`, you can probably sk ### Local Registration in a Module System -If you're still here, then it's likely you're using a module system, such as with Babel and Webpack. In these cases, we recommend creating a `components` directory, with each component in its own file. +If you're still here, then it's likely you're using a module system, such as with Babel and webpack. In these cases, we recommend creating a `components` directory, with each component in its own file. Then you'll need to import each component you'd like to use, before you locally register it. For example, in a hypothetical `ComponentB.js` or `ComponentB.vue` file: @@ -184,7 +184,7 @@ Just to support relatively little markup in a template: ``` -Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): +Fortunately, if you're using webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): ```js import Vue from 'vue' diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md index e6dc44bdca..af56ba7a53 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') @@ -108,7 +108,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 @@ -116,7 +116,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](https://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured) +- [webpack + vue-loader](https://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://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=custom-handler) diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index a87cab4622..619371ff58 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -49,7 +49,7 @@ Make sure to read about [the different builds of Vue](#Explanation-of-Different- ## 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 @@ -119,7 +119,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 = { @@ -168,9 +168,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') @@ -219,7 +219,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 13c6dd1ebb..1d01fb6832 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 7c2ca16d4f..7925c34707 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 an 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 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. +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. ### What About Separation of Concerns? @@ -64,8 +64,8 @@ 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](https://vuejs-templates.github.io/webpack) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015, and hot-reloading in no time! -To learn more about Webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [Webpack Academy](https://webpack.academy/p/the-core-concepts). In Webpack, each file can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://vue-loader.vuejs.org) plugin to translate single-file (`.vue`) components. +To learn more about webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [webpack Academy](https://webpack.academy/p/the-core-concepts). In webpack, each file can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://vue-loader.vuejs.org) plugin to translate single-file (`.vue`) components. ### 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 f6190dffb7..1f04710092 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -6,7 +6,7 @@ order: 403 ## 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. 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) can 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. 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) can help you get started. ## Simple Assertions diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index afa30647d0..c54d871822 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -752,7 +752,7 @@ Some advantages of this convention: - Since component names should always be multi-word, this convention prevents you from having to choose an arbitrary prefix for simple component wrappers (e.g. `MyButton`, `VueButton`). -- Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack: +- Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with webpack: ``` js var requireComponent = require.context("./src", true, /^Base[A-Z]/)