diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md index 3481ccdc98..b6504795cb 100644 --- a/src/v2/guide/deployment.md +++ b/src/v2/guide/deployment.md @@ -1,9 +1,11 @@ --- title: Production Deployment type: guide -order: 401 +order: 404 --- +> Most of the tips below are enabled by default if you are using [Vue CLI](https://cli.vuejs.org). This section is only relevant if you are using a custom build setup. + ## Turn on Production Mode During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode. @@ -41,6 +43,7 @@ module.exports = { ] } ``` + #### Browserify - Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code. diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 86f9fc0638..c7de7d32a3 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -1,7 +1,7 @@ --- title: Single File Components type: guide -order: 402 +order: 401 --- ## Introduction @@ -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 [Vue CLI 3](https://cli.vuejs.org/). Follow the instructions and you should have a Vue project with `.vue` components, ES2015, Webpack 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. - ### 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). +The CLI takes care of most of the tooling configurations for you, but also allows fine-grained customization through its own [config options](https://cli.vuejs.org/config/). + +In case you prefer setting up your own build setup from scratch, you will need to manually configure webpack with [vue-loader](https://vue-loader.vuejs.org). 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). diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index b4d7723208..26f5fabb48 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -1,10 +1,10 @@ --- title: TypeScript Support type: guide -order: 404 +order: 403 --- -> In Vue 2.5.0+ we have greatly improved our type declarations to work with the default object-based API. At the same time it introduces a few changes that require upgrade actions. Read [this blog post](https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08) for more details. +> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support. In our next major version of Vue (3.x), we are also planning to considerably improve our TypeScript support with built-in class based components API and TSX support. ## Official Declaration in NPM Packages diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index ff9265b797..292a438525 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -1,12 +1,10 @@ --- title: Unit Testing type: guide -order: 403 +order: 402 --- -## 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. +> [Vue CLI](https://cli.vuejs.org/) has built-in options for unit testing with [Jest](https://github.com/facebook/jest) or [Mocha](https://mochajs.org/) that works out of the box. We also have the official [vue-test-utils](https://vue-test-utils.vuejs.org/) which provides more detailed guidance for custom setups. ## Simple Assertions @@ -31,7 +29,7 @@ You don't have to do anything special in your components to make them testable. ``` -Then import the component options along with Vue, and you can make many common assertions: +Then import the component options along with Vue, and you can make many common assertions (here we are using Jasmine/Jest style `expect` assertions just as an example): ``` js // Import Vue and the component being tested @@ -129,6 +127,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/) and our cookbook entry about [unit testing vue components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html). diff --git a/themes/vue/layout/partials/toc.ejs b/themes/vue/layout/partials/toc.ejs index ebe1968b32..9e19cc6fd5 100644 --- a/themes/vue/layout/partials/toc.ejs +++ b/themes/vue/layout/partials/toc.ejs @@ -14,7 +14,7 @@ <% if (fileName === 'mixins') { %>