Web前端(一)-Vue專案執行流程分析(一)
阿新 • • 發佈:2018-12-20
去年年底離職了創業去了哈,把寫部落格的事情給落下了!
一直盯著專案幾乎很少休息,一個月能休息一天算好的啦,煎熬將近一年啊。
都說 “離職窮半年,創業窮三年”,終於嚐到其中滋味!哎。。。現在終於涼了!哈哈!
最近靜下心來,好好反思總結,其中寫部落格這件事,還是不能停止......
專注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進行載入
參考部落格: