亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

安裝

在使用 Vue 時,我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。


目錄


兼容性

Vue 不支持 IE8 及以下版本,因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器


更新日志

最新穩(wěn)定版本:2.6.10

每個版本的更新日志見 GitHub。


Vue Devtools


在使用 Vue 時,我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。


直接用 <script> 引入


直接下載并用 <script> 標簽引入,Vue 會被注冊為一個全局變量。

在開發(fā)環(huán)境下不要使用壓縮版本,不然你就失去了所有常見錯誤相關的警告!

開發(fā)版本包含完整的警告和調試模式

生產版本刪除了警告,33.30KB min+gzip


CDN

對于制作原型或學習,你可以這樣使用最新版本:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

對于生產環(huán)境,我們推薦鏈接到一個明確的版本號和構建文件,以避免新版本造成的不可預期的破壞:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

如果你使用原生 ES Modules,這里也有一個兼容 ES Module 的構建文件:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。

Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)。

請確認了解不同構建版本并在你發(fā)布的站點中使用生產環(huán)境版本,把 vue.js 換成 vue.min.js。這是一個更小的構建,可以帶來比開發(fā)環(huán)境下更快的速度體驗。


NPM


在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpackBrowserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發(fā)單文件組件

# 最新穩(wěn)定版
$ npm install vue


命令行工具 (CLI)


Vue 提供了一個官方的 CLI,為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint 校驗,以及生產環(huán)境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。

CLI 工具假定用戶對 Node.js 和相關構建工具有一定程度的了解。如果你是新手,我們強烈建議先在不用構建工具的情況下通讀 指南,在熟悉 Vue 本身之后再使用 CLI。


對不同構建版本的解釋


NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構建版本。這里列出了它們之間的差別:


UMDCommonJSES Module (基于構建工具使用)ES Module (直接用于瀏覽器)
完整版vue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
只包含運行時版vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js-
完整版 (生產環(huán)境)vue.min.js--vue.esm.browser.min.js
只包含運行時版 (生產環(huán)境)vue.runtime.min.js---


術語

  • 完整版:同時包含編譯器和運行時的版本。

  • 編譯器:用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。

  • 運行時:用來創(chuàng)建 Vue 實例、渲染并處理虛擬 DOM 等的代碼?;旧暇褪浅ゾ幾g器的其它一切。

  • UMD:UMD 版本可以通過 <script> 標簽直接用在瀏覽器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默認文件就是運行時 + 編譯器的 UMD 版本 (vue.js)。

  • CommonJS:CommonJS 版本用來配合老的打包工具比如 Browserifywebpack 1。這些打包工具的默認文件 (pkg.main) 是只包含運行時的 CommonJS 版本 (vue.runtime.common.js)。

  • ES Module:從 2.6 開始 Vue 會提供兩個 ES Modules (ESM) 構建文件:

    • 為打包工具提供的 ESM:為諸如 webpack 2Rollup 提供的現(xiàn)代打包工具。ESM 格式被設計為可以被靜態(tài)分析,所以打包工具可以利用這一點來進行“tree-shaking”并將用不到的代碼排除出最終的包。為這些打包工具提供的默認文件 (pkg.module) 是只有運行時的 ES Module 構建 (vue.runtime.esm.js)。

    • 為瀏覽器提供的 ESM (2.6+):用于在現(xiàn)代瀏覽器中通過 <script type="module"> 直接導入


運行時 + 編譯器 vs. 只包含運行時

如果你需要在客戶端編譯模板 (比如傳入一個字符串給 template 選項,或掛載到一個元素上并以其 DOM 內部的 HTML 作為模板),就將需要加上編譯器,即完整版:

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})
// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

當使用 vue-loadervueify 的時候,*.vue 文件內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的,所以只用運行時版本即可。

因為運行時版本相比完整版體積要小大約 30%,所以應該盡可能使用這個版本。如果你仍然希望使用完整版,則需要在打包工具里配置一個別名:

webpack

module.exports = {  // ...
  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({  // ...
  plugins: [
    alias({      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

添加到你項目的 package.json

{  // ...
  "browser": {    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

在你項目的 package.json 中添加:

{  // ...
  "alias": {    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}


開發(fā)環(huán)境 vs. 生產環(huán)境模式

對于 UMD 版本來說,開發(fā)環(huán)境/生產環(huán)境模式是硬編碼好的:開發(fā)環(huán)境下用未壓縮的代碼,生產環(huán)境下使用壓縮后的代碼。

CommonJS 和 ES Module 版本是用于打包工具的,因此我們不提供壓縮后的版本。你需要自行將最終的包進行壓縮。

CommonJS 和 ES Module 版本同時保留原始的 process.env.NODE_ENV 檢測,以決定它們應該運行在什么模式下。你應該使用適當?shù)拇虬ぞ吲渲脕硖鎿Q這些環(huán)境變量以便控制 Vue 所運行的模式。把 process.env.NODE_ENV 替換為字符串字面量同時可以讓 UglifyJS 之類的壓縮工具完全丟掉僅供開發(fā)環(huán)境的代碼塊,以減少最終的文件尺寸。

webpack

在 webpack 4+ 中,你可以使用 mode 選項:

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中,你需要使用 DefinePlugin

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

使用 rollup-plugin-replace

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

為你的包應用一次全局的 envify 轉換。

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

也可以移步生產環(huán)境部署。


CSP 環(huán)境

有些環(huán)境,如 Google Chrome Apps,會強制應用內容安全策略 (CSP),不能使用 new Function() 對表達式求值。這時可以用 CSP 兼容版本。完整版本依賴于該功能來編譯模板,所以無法在這些環(huán)境下使用。

另一方面,運行時版本則是完全兼容 CSP 的。當通過 webpack + vue-loader 或者 Browserify + vueify 構建時,模板將被預編譯為 render 函數(shù),可以在 CSP 環(huán)境中完美運行。


開發(fā)版本


重要: GitHub 倉庫的 /dist 文件夾只有在新版本發(fā)布時才會提交。如果想要使用 GitHub 上 Vue 最新的源碼,你需要自己構建!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build


Bower


Bower 只提供 UMD 版本。

# 最新穩(wěn)定版本
$ bower install vue


AMD 模塊加載器


所有 UMD 版本都可以直接用作 AMD 模塊。


譯者注
[1] 對于中國大陸用戶,建議將 NPM 源設置為國內的鏡像,可以大幅提升安裝速度。