資訊專欄INFORMATION COLUMN
摘要：因為僅僅包含運行時編譯比完整版少的代碼體積，如果你需要使用完整包也是可以的，你需要調整配置。顯式的改變運行時引用包模塊在引入時做了什么看完了這幾個文件的用途之后我們再來看看引入的時候做了什么帶著這個疑問我們繼續(xù)探索。
Vue Runtime Full Analysis - Import Vue Module 回顧系列文章之《VueCLI3上手》
上一節(jié) 《Vue運行時全解析 - VueCLI3上手（一）》中介紹了VueCLI3的一些信息，包括以下幾點：
官方主推VueCLI3的原因
CLI3的核心概念
CLI3的安裝
CLI3簡單創(chuàng)建一個項目
Vue ui的使用介紹
使用CLI3按照舊版方式創(chuàng)建項目的方法
安裝插件vuex,router方法
修改項目配置的方式
使用VueCLI3的serve命令 打開一個vue文件
閱讀本節(jié)你能學到什么？
查看項目的配置文件的2種方法
vue inspect 命令方式
vue ui 可視化方式
在腳手架項目中引入vue的方式
腳手架項目入口文件的位置
Webpack 引入模塊的機制
vue 編譯后的文件的用途
引入的vue做了哪些前置工作
導出配置文件開始分析之前，我們先把項目配置文件先導出來，以做分析備用，在VueCLI3配置的文檔中可以找到倆中方式找到配置內容：
inspect命令：通過下面命令將項目的默認配置導出到文件中，這里命名為preset-default-vue-cli-3.js
yanyue$ vue inspect > preset-default-vue-cli-3.js
vue ui 的inspect面板，點擊運行可以獲取到。
可以通過 vue ui 啟動可視化配置界面 如下圖，在這里可以看到 task(任務) 面板，task面板有4個task, 選擇 inspect 面板能夠看到 run(運行按鈕) ，點擊后，便能夠查看到輸出的配置信息，在這里查看到的是文本方式查看，由于內容較多，像我這次要分析，需要折疊代碼看到這個配置的整體信息，一般情況，我們不會所有配置都去修改，在這里查閱非常方便，而且運行一次，下次切換過來這個內容還在。
就僅僅配置文件足有1000+行... 從這里看vue也是花了大功夫把各種工具的配置文件都進行了優(yōu)化整合，并提供統(tǒng)一的修改方式，之后我們會講到如何在項目中修改配置。
項目引入vue的方式要知道項目是怎么引入vue框架的，我們先從最開始了解一下的程序入口main.js文件，因為vue的引入時在這個文件中，那我們先看看這個文件被引入的過程是怎么工作的？
main.jssrc/main.js是整個程序的入口文件，在上面導出的配置文件中我們搜索entry這個關鍵字，可以看到下圖的配置信息：
entry: {
app: [
"./src/main.js"
]
}
VueCLI3項目的入口文件就是通過該配置字段來定義輸入給 webpack 的，最后通過 HtmlWebpackPlugin 插件將打包好的腳本注入進根據public中的index.html模板生成的新的html文件中, 如下面配置中插件中的template選項：
new HtmlWebpackPlugin({
templateParameters: function () { /* omitted long function */ },
template: "path/to/project-root/public/index.html"
})
將vue引入項目
第一行代碼
import Vue from "vue"
使用了ES2015的語法將vue的運行時作為依賴模塊引入程序。
我們關注一下模塊細節(jié)使用VueCLI3安裝的項目，項目的基本依賴（包括babel, vue等）已經被安裝好了，我們去node_modules目錄中找到vue模塊目錄，從目錄下package.json文件能夠看到如下圖：
從圖中能看到 vue對多種引入方式以不同文件提供支持，包括符合CommonJS模塊規(guī)范的 vue.runtime.common.js 、符合ES Module模塊規(guī)范的vue.runtime.esm.js和符合UMD模塊規(guī)范的 vue.js以及支持TypeScript的類型定義文件index.d.ts。
我們的項目使用webpack打包各個模塊，webpack優(yōu)先會選取ES模塊方式引入包(原因：webpack中的處理 參考：roollup相關的解釋)
在web環(huán)境中，webpack會依據resolve下的mainFields字段中配置的屬性所指定的位置讀取文件，而當前版本的vue項目配置中配置了pkg.module和pkg.main這倆個位置，所以webpack優(yōu)先讀取了module指向的dist/vue.runtime.esm.js文件，忽略了pkg.main字段指向的位置文件。
編譯后的文件上面說到了vue.runtime.esm.js這個文件被webpack作為vue項目提供的vue模塊引入到我們的項目中，但是從安裝的vue模塊目錄的dist下卻發(fā)現了好幾個文件，如下圖：
以下大多參考官方文檔內容，并做了簡單解釋性翻譯：
解釋編譯后的文件Explanation of Build Files
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
Full: builds that contains both the compiler and the runtime.
完整版，包含 compiler 和 runtime
Compiler: code that is responsible for compiling template strings into JavaScript render functions.
Compiler : 負責將模板字符串編譯成render函數
注意: 請留意后面會講到的render函數
Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
runtime: 負責創(chuàng)建vue實例， 渲染和調整虛擬DOM等，基本上等效于除去compiler的所有一切。
UMD: UMD builds can be used directly in the browser via a
類型檢測定義
瀏覽器環(huán)境檢測 Browser environment sniffing
虛擬DOM的實現定義
globals MessageChannel
初始化數據方法定義
initState
initProps
initData
initComputed
initMethods
initWatch
initRender
initMixin
初始化調用
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
這一步vue做了很多的前期準備工作，我們在后面章節(jié)還會細化...
本節(jié)結束這一節(jié)我們只關注最基礎的這一塊，下一節(jié)，我們將繼續(xù)關注細節(jié)。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/97888.html
摘要：可以譯作運行時過程全面分析和解析，這個全面分析涉及到比較基礎的或者復雜的重要前端概念和中的概念等。注本篇是運行時全解析系列文章的第一篇，首次發(fā)表于，友善轉載蟹蟹。附更多內容請參考核心維護者蔣豪群同學的的公開課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...
摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執(zhí)行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架 介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架 庫和框架的區(qū)別 我們所說的前端框架與庫的區(qū)別？ Library 庫，本質上是一...
摘要：樣式通過標簽包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加，如要引入外部文件，首先需給項目安裝依賴包，打開，進入項目目錄，輸入回車。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安裝node.js 首先需要安裝node環(huán)境，可以直接到中文官網http://nodejs.cn/...
摘要：除此之外，你還可以運行打包命令此時之前說的打包生成的文件應該就生成了，或者選擇用瀏覽器打開應該也可以看見和剛剛一樣的結果。而如何創(chuàng)建一個對象是知道，因此開頭引入了，并使用它常見了一個對象，然后這個對象就管理了這一塊區(qū)域。 作者：心葉時間：2018-04-25 16:33 本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...
閱讀 3417·2021-11-22 15:22
閱讀 2934·2021-10-12 10:12
閱讀 2260·2021-08-21 14:10
閱讀 3895·2021-08-19 11:13
閱讀 2902·2019-08-30 15:43
閱讀 3292·2019-08-29 16:52
閱讀 520·2019-08-29 16:41
閱讀 1507·2019-08-29 12:53
