寫在前面
一般情況下各種 js框架 會在不同的模塊規范下提供不同的版本的 .js 文件，常用的模塊規范是 umd（統一模塊定義）。在同一模塊規范下也可定義使用不同場景的 .js 文件。
常見的就是 umd模塊規范下的 .js 和 .min.js 兩個 主文件 類型的 js 文件。二者的區別就是，.js 文件是未壓縮的、帶有注釋和縮進格式的源文件，體積大，但易於查看源代碼。.min.js 文件是壓縮后的、無注釋和縮進、體積更小的文件。一般我們在使用時 CDN 引入時會選擇 .min.js 文件。
許多更為復雜的 js庫 會提供更多適用不同場景的庫文件。
vue 就提供了兩個完全不同版本的 .js 文件，這就導致用戶在開發 vue項目 時要根據需要選擇對應版本的 vue 引入。
1. 完整版
1.1 完整版的 vue 文件名
vue.js
vue.min.js
1.2 完整版定義公式
完整版 = 編譯器 + 運行時
因此由版本定義公式可知，完整版包含非完整版的一切功能，也就是說，用戶可以安裝完整版的 vue 后僅僅使用非完整版的功能，但用戶不能安裝非完整版的 vue 后使用完整版的某些功能。
1.3 完整版自帶的編譯器公式
完整版自帶的編譯器 = 編譯器（vue-template-compiler）+ vue-loader
1.4 完整版的 html 的書寫位置
完整版的 vue 的 html 書寫位置有兩個，一個是在 .html 文件中寫 vue 對應的 xml 語法，如下：
<div>{{ hi }}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
另外一個 html 書寫位置在 new Vue() 的構造選項里的 template: 變量 處寫 vue 對應的 xml 語法，如下：
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
當然了，因為是完整版，在引入 vue-loader 后完全可以按照非完整版書寫 html 位置的方式寫。唯一需要注意的是，在 new Vue() 構造選項中，template: 和 render() 只能出現一個。
2. 非完整版（只包含運行時版）
2.1 非完整版的 vue 文件名
vue.runtime.js
vue.runtime.min.js
2.2 非完整版定義公式
非完整版 = 運行時
2.3 非完整版自帶的編譯器公式
非完整版自帶的編譯器 = vue-loader
2.4 非完整版的 html 的書寫位置
非完整版的 vue，html 的書寫位置有且僅有兩種方式，一種是直接通過原生 vue.js 的 render() 函數，嚴格按照 vue.js 提供的接口和傳參方式進行 DOM元素 的創建，如下：
// 不需要編譯器
new Vue({
data(){
return {
hi: 'say hi'
}
}
render(h) {
return h('div', this.hi)
}
})
//h 就是 createElement函數，vue 的作者常用 h 簡寫 createElement
//此時的 render()函數就是 vue.js 暴露出的創建 DOM元素 的接口，h() 的大致實現內容就是使用原生 DOM接口，創建一個 div 元素，設置其里面的內容為 hi 變量的值。
另外一種書寫位置，就是寫在一個單獨的 *.vue 文件中的
標簽內，通過 vue-loader 加載器，將其轉化為對應的 render() 函數里面的內容。vue-loader 配合 webpack ，便於更好地、更方便地開發 vue項目。如下是個 .vue 文件
<template>
<div id="app">
<div>{{ hi }}</div>
</div>
</template>
<script>
export default{
data(){
return{
hi: 'say hi'
}
}
}
</script>
<style scoped>
#app{
color: red
}
</style>
非完整版不能直接在 .html 文件中寫 html，也不能使用 template: 變量。
補充：
在 .vue 文件中的 <template></template> 標簽里面的內容不是 HTML 語法，是 XML 語法，因此應遵循 XML 的語法標准。XML 和 HTML 語法差不多，但是 XML 相比於 HTML 要更嚴格一些，比如在 XML 中有閉合標簽一說，且單標簽必須閉合，如 <input/>，但在 HTML 中單標簽不閉合是正確的、最新的語法。同時還有一個區別是在 XML 中當標簽內沒有內容時可直接 / 閉合，如 <div/> ，但在 HTML 中，則不行。嚴格的 XML 語法比松散的 HTML 語法相比起來更容易編譯，因此 Vue 就選擇了 XML 語法
3. 完整版和非完整版的優缺點
目前 Vue 的使用基本都是非完整版，@vue/cli引入 和 webpack引入 的vue文件都是非完整版。若想在 webpack 中堅持使用完整版，則需要額外的配置信息，詳見vue官網配置
完整版：
優點：
1.可以在 html 文件中直接寫 Vue 語句，可讀性強些
缺點：
1.體積比非完整版大
2.耦合性太大，在 html 文件中夾雜 vue 語法，導致各類型文件融合到一塊，耦合性大
非完整版：
優點：
1.體積小，非完整版的體積比完整版小了30%多
2.耦合性低，模塊化強
缺點：
1.目前不知
4. vue 中設計的兩個編譯器的區別
4.1 編譯器（vue-template-compiler）
編譯器的作用就是將 Vue 語句在編譯時還原成 html 元素才能在瀏覽器上渲染出來，完整版的 Vue 是通過編譯器來實現的。
4.2 webpack加載器（vue-loader）
vue-loader 就是將*.vue文件翻譯成 render() 函數里元素創建語法的。因此非完整版用到了 vue-loader ，但是沒有用到 compiler 即編譯器，因為 render() 函數就是渲染 html 元素的，不再需要編譯器。