宣告：本教程不收取任何費用，歡迎轉載，尊重作者勞動成果，不得用於商業用途，侵權必究！！！！

上兩篇講了Vue框架專案實戰整理：1、快速啟動Vue、開發工具介紹 和 Vue框架專案實戰整理：2、Vue環境搭建，今天應該到Vue專案執行流程分析的時候了，為什麼會有這方便的研究呢？因為接觸Android開發也將近7年了，根據程式設計經驗當時的想法是整個專案的執行流程都清晰了，到時候如果有機會自己搭建Vue專案架構就會得心應手、獨擋一面了，畢竟語言是相通的......好了，繞的有點遠開始乾貨。。。

一、快速啟動Vue環境

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh

npm run dev

demodemoyyh檔案下面的目錄：

命令列介面：

顯示效果介面：

二、執行流程分析

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

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進行載入，然後顯示頁面

參考部落格：

https://blog.csdn.net/knqiufan/article/details/79267093

https://blog.csdn.net/kkae8643150/article/details/52910389

下一篇文章我將整理：Vue框架專案實戰整理：4、Vue專案執行流程分析（二）