You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/installation.md
+21-18Lines changed: 21 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -30,42 +30,46 @@ Simply download and include with a script tag. `Vue` will be registered as a glo
30
30
31
31
### CDN
32
32
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/).
34
34
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.
42
36
43
37
## NPM
44
38
45
39
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).
46
40
47
41
```bash
48
42
# latest stable
49
-
$ npm install vue@next
43
+
$ npm install vue
50
44
```
51
45
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.
53
49
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.
55
51
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:
57
55
58
56
```js
59
57
resolve: {
60
58
alias: {
61
-
vue:'vue/dist/vue.js'
59
+
vue:'vue/dist/vue.common.js'
62
60
}
63
61
}
64
62
```
65
63
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
+
<pclass="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.
67
71
68
-
<pclass="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.
69
73
70
74
## CLI
71
75
@@ -84,12 +88,11 @@ $ npm run dev
84
88
85
89
## Dev Build
86
90
87
-
**Important**: the CommonJS bundle distributed on NPM (`vue.common.js`) is only checkedin 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!
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
+
<pclass="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>
0 commit comments