uTools-Manuals/docs/vue/guide/installation.html
2019-04-21 11:50:48 +08:00

204 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="content guide with-sidebar installation-guide">
<h1>安装</h1>
<h3 id="兼容性"><a class="headerlink" href="#兼容性" title="兼容性"></a>兼容性</h3><p>Vue <strong>不支持</strong> IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有<a href="https://caniuse.com/#feat=es5" rel="noopener" target="_blank">兼容 ECMAScript 5 的浏览器</a></p>
<h3 id="更新日志"><a class="headerlink" href="#更新日志" title="更新日志"></a>更新日志</h3><p>最新稳定版本2.6.10</p>
<p>每个版本的更新日志见 <a href="https://github.com/vuejs/vue/releases" rel="noopener" target="_blank">GitHub</a></p>
<h2 id="Vue-Devtools"><a class="headerlink" href="#Vue-Devtools" title="Vue Devtools"></a>Vue Devtools</h2><p>在使用 Vue 时,我们推荐在你的浏览器上安装 <a href="https://github.com/vuejs/vue-devtools#vue-devtools" rel="noopener" target="_blank">Vue Devtools</a>。它允许你在一个更友好的界面中审查和调试 Vue 应用。</p>
<h2 id="直接用-lt-script-gt-引入"><a class="headerlink" href="#直接用-lt-script-gt-引入" title="直接用 &lt;script&gt; 引入"></a>直接用 <code>&lt;script&gt;</code> 引入</h2><p>直接下载并用 <code>&lt;script&gt;</code> 标签引入,<code>Vue</code> 会被注册为一个全局变量。</p>
<p class="tip">在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!</p>
<div id="downloads"><br/> <a class="button" download="" href="https://vuejs.org/js/vue.js" rel="noopener" target="_blank">开发版本</a><span class="light info">包含完整的警告和调试模式</span><br/><br/> <a class="button" download="" href="https://vuejs.org/js/vue.min.js" rel="noopener" target="_blank">生产版本</a><span class="light info">删除了警告33.30KB min+gzip</span><br/></div>
<h3 id="CDN"><a class="headerlink" href="#CDN" title="CDN"></a>CDN</h3><p>对于制作原型或学习,你可以这样使用最新版本:</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
<p>对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
<p>如果你使用原生 ES Modules这里也有一个兼容 ES Module 的构建文件:</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'</span>
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
<p>你可以在 <a href="https://cdn.jsdelivr.net/npm/vue/" rel="noopener" target="_blank">cdn.jsdelivr.net/npm/vue</a> 浏览 NPM 包的源代码。</p>
<p>Vue 也可以在 <a href="https://unpkg.com/vue@2.6.10/dist/vue.js" rel="noopener" target="_blank">unpkg</a><a href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" rel="noopener" target="_blank">cdnjs</a> 上获取 (cdnjs 的版本更新可能略滞后)。</p>
<p>请确认了解<a href="#对不同构建版本的解释">不同构建版本</a>并在你发布的站点中使用<strong>生产环境版本</strong>,把 <code>vue.js</code> 换成 <code>vue.min.js</code>。这是一个更小的构建,可以带来比开发环境下更快的速度体验。</p>
<h2 id="NPM"><a class="headerlink" href="#NPM" title="NPM"></a>NPM</h2><p>在用 Vue 构建大型应用时推荐使用 NPM 安装<sup><a href="#footnote-1">[1]</a></sup>。NPM 能很好地和诸如 <a href="https://webpack.js.org/" rel="noopener" target="_blank">webpack</a><a href="http://browserify.org/" rel="noopener" target="_blank">Browserify</a> 模块打包器配合使用。同时 Vue 也提供配套工具来开发<a href="single-file-components.html">单文件组件</a></p>
<pre><code class="hljs bash"><span class="hljs-comment"># 最新稳定版</span>
$ npm install vue</code></pre>
<h2 id="命令行工具-CLI"><a class="headerlink" href="#命令行工具-CLI" title="命令行工具 (CLI)"></a>命令行工具 (CLI)</h2><p>Vue 提供了一个<a href="https://github.com/vuejs/vue-cli" rel="noopener" target="_blank">官方的 CLI</a>,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 <a href="https://cli.vuejs.org" rel="noopener" target="_blank">Vue CLI 的文档</a></p>
<p class="tip">CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读<a href="./">指南</a>,在熟悉 Vue 本身之后再使用 CLI。</p>
<h2 id="对不同构建版本的解释"><a class="headerlink" href="#对不同构建版本的解释" title="对不同构建版本的解释"></a>对不同构建版本的解释</h2><p><a href="https://cdn.jsdelivr.net/npm/vue/dist/" rel="noopener" target="_blank">NPM 包的 <code>dist/</code> 目录</a>你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:</p>
<table>
<thead>
<tr>
<th></th>
<th>UMD</th>
<th>CommonJS</th>
<th>ES Module (基于构建工具使用)</th>
<th>ES Module (直接用于浏览器)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>完整版</strong></td>
<td>vue.js</td>
<td>vue.common.js</td>
<td>vue.esm.js</td>
<td>vue.esm.browser.js</td>
</tr>
<tr>
<td><strong>只包含运行时版</strong></td>
<td>vue.runtime.js</td>
<td>vue.runtime.common.js</td>
<td>vue.runtime.esm.js</td>
<td>-</td>
</tr>
<tr>
<td><strong>完整版 (生产环境)</strong></td>
<td>vue.min.js</td>
<td>-</td>
<td>-</td>
<td>vue.esm.browser.min.js</td>
</tr>
<tr>
<td><strong>只包含运行时版 (生产环境)</strong></td>
<td>vue.runtime.min.js</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="术语"><a class="headerlink" href="#术语" title="术语"></a>术语</h3><ul>
<li><p><strong>完整版</strong>:同时包含编译器和运行时的版本。</p>
</li>
<li><p><strong>编译器</strong>:用来将模板字符串编译成为 JavaScript 渲染函数的代码。</p>
</li>
<li><p><strong>运行时</strong>:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。</p>
</li>
<li><p><strong><a href="https://github.com/umdjs/umd" rel="noopener" target="_blank">UMD</a></strong>UMD 版本可以通过 <code>&lt;script&gt;</code> 标签直接用在浏览器中。jsDelivr CDN 的 <a href="https://cdn.jsdelivr.net/npm/vue" rel="noopener" target="_blank">https://cdn.jsdelivr.net/npm/vue</a> 默认文件就是运行时 + 编译器的 UMD 版本 (<code>vue.js</code>)。</p>
</li>
<li><p><strong><a href="http://wiki.commonjs.org/wiki/Modules/1.1" rel="noopener" target="_blank">CommonJS</a></strong>CommonJS 版本用来配合老的打包工具比如 <a href="http://browserify.org/" rel="noopener" target="_blank">Browserify</a><a href="https://webpack.github.io" rel="noopener" target="_blank">webpack 1</a>。这些打包工具的默认文件 (<code>pkg.main</code>) 是只包含运行时的 CommonJS 版本 (<code>vue.runtime.common.js</code>)。</p>
</li>
<li><p><strong><a href="http://exploringjs.com/es6/ch_modules.html" rel="noopener" target="_blank">ES Module</a></strong>:从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件:</p>
<ul>
<li><p>为打包工具提供的 ESM为诸如 <a href="https://webpack.js.org" rel="noopener" target="_blank">webpack 2</a><a href="https://rollupjs.org/" rel="noopener" target="_blank">Rollup</a> 提供的现代打包工具。ESM 格式被设计为可以被静态分析所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (<code>pkg.module</code>) 是只有运行时的 ES Module 构建 (<code>vue.runtime.esm.js</code>)。</p>
</li>
<li><p>为浏览器提供的 ESM (2.6+):用于在现代浏览器中通过 <code>&lt;script type="module"&gt;</code> 直接导入。</p>
</li>
</ul>
</li>
</ul>
<h3 id="运行时-编译器-vs-只包含运行时"><a class="headerlink" href="#运行时-编译器-vs-只包含运行时" title="运行时 + 编译器 vs. 只包含运行时"></a>运行时 + 编译器 vs. 只包含运行时</h3><p>如果你需要在客户端编译模板 (比如传入一个字符串给 <code>template</code> 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:</p>
<pre><code class="hljs js"><span class="hljs-comment">// 需要编译器</span>
<span class="hljs-keyword">new</span> Vue({
<span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;{{ hi }}&lt;/div&gt;'</span>
})
<span class="hljs-comment">// 不需要编译器</span>
<span class="hljs-keyword">new</span> Vue({
render (h) {
<span class="hljs-keyword">return</span> h(<span class="hljs-string">'div'</span>, <span class="hljs-keyword">this</span>.hi)
}
})</code></pre>
<p>当使用 <code>vue-loader</code><code>vueify</code> 的时候,<code>*.vue</code> 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的所以只用运行时版本即可。</p>
<p>因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:</p>
<h4 id="webpack"><a class="headerlink" href="#webpack" title="webpack"></a>webpack</h4><pre><code class="hljs js"><span class="hljs-built_in">module</span>.exports = {
<span class="hljs-comment">// ...</span>
resolve: {
<span class="hljs-attr">alias</span>: {
<span class="hljs-string">'vue$'</span>: <span class="hljs-string">'vue/dist/vue.esm.js'</span> <span class="hljs-comment">// 用 webpack 1 时需用 'vue/dist/vue.common.js'</span>
}
}
}</code></pre>
<h4 id="Rollup"><a class="headerlink" href="#Rollup" title="Rollup"></a>Rollup</h4><pre><code class="hljs js"><span class="hljs-keyword">const</span> alias = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rollup-plugin-alias'</span>)
rollup({
<span class="hljs-comment">// ...</span>
plugins: [
alias({
<span class="hljs-string">'vue'</span>: <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'vue/dist/vue.esm.js'</span>)
})
]
})</code></pre>
<h4 id="Browserify"><a class="headerlink" href="#Browserify" title="Browserify"></a>Browserify</h4><p>添加到你项目的 <code>package.json</code></p>
<pre><code class="hljs js">{
<span class="hljs-comment">// ...</span>
<span class="hljs-string">"browser"</span>: {
<span class="hljs-string">"vue"</span>: <span class="hljs-string">"vue/dist/vue.common.js"</span>
}
}</code></pre>
<h4 id="Parcel"><a class="headerlink" href="#Parcel" title="Parcel"></a>Parcel</h4><p>在你项目的 <code>package.json</code> 中添加:</p>
<pre><code class="hljs js">{
<span class="hljs-comment">// ...</span>
<span class="hljs-string">"alias"</span>: {
<span class="hljs-string">"vue"</span> : <span class="hljs-string">"./node_modules/vue/dist/vue.common.js"</span>
}
}</code></pre>
<h3 id="开发环境-vs-生产环境模式"><a class="headerlink" href="#开发环境-vs-生产环境模式" title="开发环境 vs. 生产环境模式"></a>开发环境 vs. 生产环境模式</h3><p>对于 UMD 版本来说,开发环境/生产环境模式是硬编码好的:开发环境下用未压缩的代码,生产环境下使用压缩后的代码。</p>
<p>CommonJS 和 ES Module 版本是用于打包工具的,因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。</p>
<p>CommonJS 和 ES Module 版本同时保留原始的 <code>process.env.NODE_ENV</code> 检测,以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把 <code>process.env.NODE_ENV</code> 替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块,以减少最终的文件尺寸。</p>
<h4 id="webpack-1"><a class="headerlink" href="#webpack-1" title="webpack"></a>webpack</h4><p>在 webpack 4+ 中,你可以使用 <code>mode</code> 选项:</p>
<pre><code class="hljs js"><span class="hljs-built_in">module</span>.exports = {
<span class="hljs-attr">mode</span>: <span class="hljs-string">'production'</span>
}</code></pre>
<p>但是在 webpack 3 及其更低版本中,你需要使用 <a href="https://webpack.js.org/plugins/define-plugin/" rel="noopener" target="_blank">DefinePlugin</a></p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>)
<span class="hljs-built_in">module</span>.exports = {
<span class="hljs-comment">// ...</span>
plugins: [
<span class="hljs-comment">// ...</span>
<span class="hljs-keyword">new</span> webpack.DefinePlugin({
<span class="hljs-string">'process.env'</span>: {
<span class="hljs-attr">NODE_ENV</span>: <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-string">'production'</span>)
}
})
]
}</code></pre>
<h4 id="Rollup-1"><a class="headerlink" href="#Rollup-1" title="Rollup"></a>Rollup</h4><p>使用 <a href="https://github.com/rollup/rollup-plugin-replace" rel="noopener" target="_blank">rollup-plugin-replace</a></p>
<pre><code class="hljs js"><span class="hljs-keyword">const</span> replace = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rollup-plugin-replace'</span>)
rollup({
<span class="hljs-comment">// ...</span>
plugins: [
replace({
<span class="hljs-string">'process.env.NODE_ENV'</span>: <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-string">'production'</span>)
})
]
}).then(...)</code></pre>
<h4 id="Browserify-1"><a class="headerlink" href="#Browserify-1" title="Browserify"></a>Browserify</h4><p>为你的包应用一次全局的 <a href="https://github.com/hughsk/envify" rel="noopener" target="_blank">envify</a> 转换。</p>
<pre><code class="hljs bash">NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m &gt; build.js</code></pre>
<p>也可以移步<a href="deployment.html">生产环境部署</a></p>
<h3 id="CSP-环境"><a class="headerlink" href="#CSP-环境" title="CSP 环境"></a>CSP 环境</h3><p>有些环境,如 Google Chrome Apps会强制应用内容安全策略 (CSP),不能使用 <code>new Function()</code> 对表达式求值。这时可以用 CSP 兼容版本。完整版本依赖于该功能来编译模板,所以无法在这些环境下使用。</p>
<p>另一方面,运行时版本则是完全兼容 CSP 的。当通过 <a href="https://github.com/vuejs-templates/webpack-simple" rel="noopener" target="_blank">webpack + vue-loader</a> 或者 <a href="https://github.com/vuejs-templates/browserify-simple" rel="noopener" target="_blank">Browserify + vueify</a> 构建时,模板将被预编译为 <code>render</code> 函数,可以在 CSP 环境中完美运行。</p>
<h2 id="开发版本"><a class="headerlink" href="#开发版本" title="开发版本"></a>开发版本</h2><p><strong>重要</strong>: GitHub 仓库的 <code>/dist</code> 文件夹只有在新版本发布时才会提交。如果想要使用 GitHub 上 Vue 最新的源码,你需要自己构建!</p>
<pre><code class="hljs bash">git <span class="hljs-built_in">clone</span> https://github.com/vuejs/vue.git node_modules/vue
<span class="hljs-built_in">cd</span> node_modules/vue
npm install
npm run build</code></pre>
<h2 id="Bower"><a class="headerlink" href="#Bower" title="Bower"></a>Bower</h2><p>Bower 只提供 UMD 版本。</p>
<pre><code class="hljs bash"><span class="hljs-comment"># 最新稳定版本</span>
$ bower install vue</code></pre>
<h2 id="AMD-模块加载器"><a class="headerlink" href="#AMD-模块加载器" title="AMD 模块加载器"></a>AMD 模块加载器</h2><p>所有 UMD 版本都可以直接用作 AMD 模块。</p>
<p><small><br/><strong>译者注</strong><br/><a id="footnote-1"></a>[1] 对于中国大陆用户,建议将 NPM 源设置为<a href="https://npm.taobao.org/" rel="noopener" target="_blank">国内的镜像</a>,可以大幅提升安装速度。<br/></small></p>
<div class="guide-links">
<span style="float: right;"><a href="index.html">介绍</a></span>
</div>
<div class="footer">
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
</script>
发现错误?想参与编辑?
<a href="https://github.com/vuejs/cn.vuejs.org/blob/master/srcinstallation.md" target="_blank">
在 GitHub 上编辑此页!
</a>
</div>
</div>