1. 程式人生 > >Web前端(一)-Vue專案執行流程分析(一)

Web前端(一)-Vue專案執行流程分析(一)

去年年底離職了創業去了哈,把寫部落格的事情給落下了!

一直盯著專案幾乎很少休息,一個月能休息一天算好的啦,煎熬將近一年啊。

都說 “離職窮半年,創業窮三年”,終於嚐到其中滋味!哎。。。現在終於涼了!哈哈!

最近靜下心來,好好反思總結,其中寫部落格這件事,還是不能停止......

專注Android,但由於上段時間創業需要也做了Web前端開發,所以想把這方面的知識給總結分享下!

後面還會為自己這次創業經歷做些總結,畫個句號!

一、快速啟動Vue環境

指定專案目錄:

cd + 專案目錄,如:cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh

啟動專案:

npm run dev

demodemoyyh檔案下面的目錄:

命令列介面:

顯示效果介面:

二、執行流程分析

1、首先把demodemoyyh拖到sublime Text 或Visual Studio Code 裡面展示

2、專案建立成功後在瀏覽器中開啟

(1)進入頁面首先載入index.html

(2)main.js檔案中給id="app"的div建立一個Vue的例項

(3)這個Vue的例項,Vue在呼叫render方法時,會傳入一個createElement函式作為引數,也就是這裡的h的實參是createElement函式,然後createElement會以App為引數進行呼叫。然後跳轉到App.vue

等價於

等價於

等價於

(3)跳轉到App.vue進行載入

參考部落格: