Skip to content

Commit 4ac3b8e

Browse files
committed
update runtime build info
1 parent e738ce9 commit 4ac3b8e

File tree

3 files changed

+44
-19
lines changed

3 files changed

+44
-19
lines changed

src/guide/installation.md

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,46 @@ Simply download and include with a script tag. `Vue` will be registered as a glo
3030

3131
### CDN
3232

33-
Available on [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.min.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) (takes some time to sync so the latest version might not be available yet).
33+
Recommended: [unpkg](https://unpkg.com/vue), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/vue/](https://unpkg.com/vue/).
3434

35-
Also available on [unpkg](https://unpkg.com/vue/dist/vue.min.js), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/vue/](https://unpkg.com/vue/).
36-
37-
### CSP environments
38-
39-
Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of `new Function()` for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.
40-
41-
There _is_ a solution however. When using Vue in a build system with [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple-2.0) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple-2.0), your templates will be precompiled into `render` functions which work perfectly in CSP environments.
35+
Also available on [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js), but these two services take some time to sync so the latest release may not be available yet.
4236

4337
## NPM
4438

4539
NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](application.html#Single-File-Components).
4640

4741
``` bash
4842
# latest stable
49-
$ npm install vue@next
43+
$ npm install vue
5044
```
5145

52-
### Note on NPM Builds
46+
### Standalone vs. Runtime-only Build
47+
48+
There are two builds available, the standalone build and the runtime-only build.
5349

54-
Because Single File Components pre-compile the templates into render functions at build time, the default export of the `vue` NPM package is the **runtime-only build**, which does not support the `template` option. If you still wish to use the `template` option, you will need to configure your bundler to alias `vue` to the standalone build.
50+
- The standalone build includes the compiler and supports the `template` option.
5551

56-
With webpack, add the following alias to your webpack config:
52+
- The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build, but it works with single-file components, because single-file components' templates are pre-compiled into `render` functions during the build step. The runtime-only build is roughly 30% lighter-weight than the standalone build, weighing only 16kb min+gzip.
53+
54+
By default, the NPM package exports the standalone build. To use the runtime-only build, add the following alias to your webpack config:
5755

5856
``` js
5957
resolve: {
6058
alias: {
61-
vue: 'vue/dist/vue.js'
59+
vue: 'vue/dist/vue.common.js'
6260
}
6361
}
6462
```
6563

66-
For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) for the same effect.
64+
For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) to achieve the same.
65+
66+
<p class="tip">Do NOT do `import Vue from 'vue/dist/vue.common.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>
67+
68+
### CSP environments
69+
70+
Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of `new Function()` for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.
6771

68-
<p class="tip">Do NOT do `import Vue from 'vue/dist/vue'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>
72+
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-2.0) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple-2.0), your templates will be precompiled into `render` functions which work perfectly in CSP environments.
6973

7074
## CLI
7175

@@ -84,12 +88,11 @@ $ npm run dev
8488

8589
## Dev Build
8690

87-
**Important**: the CommonJS bundle distributed on NPM (`vue.common.js`) is only checked in during releases on the `next` branch. To use Vue from the latest source code on GitHub, you will have to build it yourself!
91+
**Important**: the built files in GitHub's `/dist` folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself!
8892

8993
``` bash
9094
git clone https://github.com/vuejs/vue.git node_modules/vue
9195
cd node_modules/vue
92-
git checkout next
9396
npm install
9497
npm run build
9598
```
@@ -98,7 +101,7 @@ npm run build
98101

99102
``` bash
100103
# latest stable
101-
$ bower install vue#next
104+
$ bower install vue
102105
```
103106

104107
## AMD Module Loaders

src/guide/single-file-components.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,25 @@ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
9999
``` bash
100100
NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js
101101
```
102+
103+
### Use the Runtime-Only Build
104+
105+
There are two builds available, the standalone build and the runtime-only build.
106+
107+
- The standalone build includes the compiler and supports the `template` option.
108+
109+
- The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build, but it works with single-file components, because single-file components' templates are pre-compiled into `render` functions during the build step. The runtime-only build is roughly 30% lighter-weight than the standalone build, weighing only 16kb min+gzip.
110+
111+
By default, the NPM package exports the standalone build. To use the runtime-only build, add the following alias to your webpack config:
112+
113+
``` js
114+
resolve: {
115+
alias: {
116+
vue: 'vue/dist/vue.common.js'
117+
}
118+
}
119+
```
120+
121+
For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) to achieve the same.
122+
123+
<p class="tip">Do NOT do `import Vue from 'vue/dist/vue.common.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>

themes/vue/layout/layout.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
88
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
99
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
10-
<link href='//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue.js' rel='stylesheet' type='text/css'>
10+
<link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'>
1111
<link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
1212
<link rel="icon" href="/images/logo.png" type="image/x-icon">
1313
<script>

0 commit comments

Comments
 (0)