腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

理順8個(gè)版本vue的區(qū)別(小結(jié))

更新時(shí)間：2018年09月17日 10:08:52 作者：ziwei3749

這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一共8個(gè)版本的vue

術(shù)語(yǔ)

完整版：同時(shí)包含編譯器和運(yùn)行時(shí)的版本。
編譯器：用來(lái)將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
運(yùn)行時(shí)：用來(lái)創(chuàng)建 Vue 實(shí)例、渲染并處理虛擬 DOM 等的代碼?；旧暇褪浅ゾ幾g器的其它一切。
UMD：UMD 版本可以通過(guò) <script> 標(biāo)簽直接用在瀏覽器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本 (vue.js)。
CommonJS：CommonJS 版本用來(lái)配合老的打包工具比如 Browserify 或 webpack 1。這些打包工具的默認(rèn)文件 (pkg.main) 是只包含運(yùn)行時(shí)的 CommonJS 版本 (vue.runtime.common.js)。
ES Module：ES module 版本用來(lái)配合現(xiàn)代打包工具比如 webpack 2 或 Rollup。這些打包工具的默認(rèn)文件 (pkg.module) 是只包含運(yùn)行時(shí)的 ES Module 版本 (vue.runtime.esm.js)。

重點(diǎn)：

如果你需要在客戶端編譯模板 (比如傳入一個(gè)字符串給 template 選項(xiàng)，或掛載到一個(gè)元素上并以其 DOM 內(nèi)部的 HTML 作為模板)，就將需要加上編譯器

通俗來(lái)說(shuō)，就是runtime版本是無(wú)法對(duì)template進(jìn)行解析的

一共8個(gè)vue版本,都是用在什么情況下的?

不急,從2個(gè)維度去理解這8個(gè)版本。

【運(yùn)行時(shí)版本】和【完整版】的區(qū)別: 用不用編譯?

完整版: 包括編譯器和運(yùn)行時(shí)的版本
編譯器: vue里用的<template></template>語(yǔ)法是需要被編譯的
運(yùn)行時(shí): 用來(lái)創(chuàng)建Vue實(shí)例、渲染、處理虛擬Dom,可以理解為除了編譯器剩下的代碼都屬于運(yùn)行時(shí)

如果你需要使用template的語(yǔ)法,就需要編譯器,那么就要使用完整版

用了.vue文件的大多數(shù)情況下,你可以用運(yùn)行時(shí)版本

當(dāng)你使用vue-loader或vueify的時(shí)候, *.vue文件內(nèi)部會(huì)預(yù)編譯成JS,所以你在最終打好的包里,

實(shí)際上是不需要編譯器的,所以這種情況,應(yīng)該用運(yùn)行時(shí)版本,畢竟運(yùn)行時(shí)版本的體積比完整版要小30%

如果我一定要用完整版的呢? 如何選擇版本呢?

你需要在webpack里配置alias

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

UMD / CommonJS / ES Module 的區(qū)別: 你的vue用在什么地方?

其他

類(lèi)似這樣

  new webpack.DefinePlugin({
   'process.env': env
  }),

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片