Skip to content

Commit

Permalink
brush up tooling section with redirects to CLI
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Dec 14, 2018
1 parent eb2f374 commit 2f6dbef
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 15 deletions.
5 changes: 4 additions & 1 deletion src/v2/guide/deployment.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions src/v2/guide/single-file-components.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Single File Components
type: guide
order: 402
order: 401
---

## Introduction
Expand Down Expand Up @@ -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).
4 changes: 2 additions & 2 deletions src/v2/guide/typescript.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
10 changes: 3 additions & 7 deletions src/v2/guide/unit-testing.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -31,7 +29,7 @@ You don't have to do anything special in your components to make them testable.
</script>
```

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
Expand Down Expand Up @@ -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).
2 changes: 1 addition & 1 deletion themes/vue/layout/partials/toc.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<% if (fileName === 'mixins') { %>
<li><h3>Reusability & Composition</h3></li>
<% } %>
<% if (fileName === 'deployment') { %>
<% if (fileName === 'single-file-components') { %>
<li><h3>Tooling</h3></li>
<% } %>
<% if (fileName === 'routing') { %>
Expand Down

0 comments on commit 2f6dbef

Please sign in to comment.