Skip to content

Commit 6ed1da8

Browse files
committed
update larger app section
1 parent 372b9c0 commit 6ed1da8

File tree

1 file changed

+12
-8
lines changed

1 file changed

+12
-8
lines changed

source/guide/application.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,31 @@ Vue.js is designed to be as flexible as possible - it's just an interface librar
77

88
## Modularization
99

10-
Although the standalone build of Vue.js can be used as a global, it is often better to utilize a modularized build system to better organize your code. The recommended approach of doing so is by writing your source code in CommonJS modules (the format used by Node.js, and also the format used by Vue.js source code) and bundle them using [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/).
10+
Although the standalone build of Vue.js can be used as a global, it is often better to utilize a modularized build system to better organize your code. The recommended approach of doing so is by writing your source code in CommonJS modules (the format used by Node.js, and also the format used by Vue.js source code) and bundle them using [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/).
1111

12-
Here are some build setup examples on GitHub:
13-
14-
- [Vue + Browserify](https://github.com/vuejs/vue-browserify-example)
15-
- [Vue + Webpack](https://github.com/vuejs/vue-webpack-example)
12+
Webpack and Browserify are more than just module bundlers, though. They both provide source transform APIs that allow you to transform your source code with other pre-processors. For example, you can write your code with future ES6/7 syntax using [babel-loader](https://github.com/babel/babel-loader) or [babelify](https://github.com/babel/babelify).
1613

1714
## Single File Components
1815

19-
In a typical Vue.js project we will be breaking up our code into many small components, and it would be nice to have each component encapsulate its CSS styles, template and JavaScript definition in the same place. A bonus for using the previously mentioned build tools is that they both provided mechanisms to transform the source code before bundling them together, and with a bit of pre-processing we can write our components like this:
16+
In a typical Vue.js project we will be breaking up our code into many small components, and it would be nice to have each component encapsulate its CSS styles, template and JavaScript definition in the same place. As mentioned above, when using Webpack or Browserify, with proper source transforms we can write our components like this:
2017

2118
<img src="/images/vueify.png">
2219

2320
If you are into pre-processors, you can even do this:
2421

2522
<img src="/images/vueify_with_pre.png">
2623

27-
This is achieved via using the [Vueify](https://github.com/vuejs/vueify) transform for Browserify, or with [Vue-loader](https://github.com/vuejs/vue-loader) for Webpack.
24+
You can build these single-file Vue components with Webpack + [vue-loader](https://github.com/vuejs/vue-loader) or Browserify + [vueify](https://github.com/vuejs/vueify). It is recommended to use the Webpack setup because Webpack's loader API enables better file dependency tracking and caching if you are using pre-processors.
25+
26+
You can find examples of the build setups on GitHub:
27+
28+
- [Webpack + vue-loader](https://github.com/vuejs/vue-loader-example)
29+
- [Browserify + vueify](https://github.com/vuejs/vueify-example)
2830

2931
## Routing
3032

33+
<p class="tip">The official `vue-router` module is in active development and will be released soon.</p>
34+
3135
You can implement some rudimentary routing logic by manually listening on hashchange and utilizing a dynamic component:
3236

3337
**Example:**
@@ -116,4 +120,4 @@ describe('my-component', function () {
116120

117121
The [Vue.js Hackernews Clone](https://github.com/yyx990803/vue-hackernews) is an example application that uses Webpack + vue-loader for code organization, Director.js for routing, and HackerNews' official Firebase API as the backend. It's by no means a big application, but it demonstrates the combined usage of the concepts discussed on this page.
118122

119-
Next: [Extending Vue](/guide/extending.html).
123+
Next: [Extending Vue](/guide/extending.html).

0 commit comments

Comments
 (0)