Vue專案原始碼分析系列一
Vue相關的基礎知識我們已經介紹了不少，官網也有很詳細的使用說明，那麼從本篇文章開始，我會陸續為大家介紹一款開源的Vue專案。首先感謝唐崗在github上分享的“基於vue.js重寫Cnodejs.org社群的webapp”，原始碼地址如下：https://github.com/shinygang/Vue-cnodejs。接下來我會不定期閱讀該專案，把其中的一些細節分享出來，和大家一起進行Vuew的學習與實戰。
一、專案目錄結構分析
這個專案的目錄如下所示：
專案目錄
其中assets目錄下是圖片資源以及css檔案，components下為各個元件，views下為各個前端展示的頁面，vuex下是使用者資訊的管理，採用的是Vuex的狀態管理模式，routers.js為路由相關的定義，filters.js為過濾器，入口即是main.js。
執行專案後的效果如下：
效果
二、專案載入過程分析
首先頁面載入過程我們首先看到一個logo：
logo
兩秒之後，出現載入的動畫之後，進入列表展示的頁面：
動畫
（1）頁面的跳轉是通過路由來實現的，我們看routers.js這個檔案：
routers.js
routers.js
路由表定義了很多頁面，我們這一節只關注Home和List，Home載入的是views目錄下的index.vue頁面。
index.vue
index.vue中只包括一張圖片：<img class="index" src="../assets/images/index.png">，在js中有如下的程式碼片段：
mounted
這裡mounted的用法我們來看以下vue的生命週期：
vue生命週期
mounted掛在例項，el被新建立的 vm.$el替換，並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素，當mounted 被呼叫時 vm.$el也在文件內。
Vue例項掛載之後，首先載入了home頁面，展示了log，同時執行setTimeout方法。HTML DOM Window 物件的setTimeout用於在指定的毫秒數後呼叫函式或計算表示式，這裡我將2秒延遲到10秒，使log顯示的時間更長方便我們察看，10秒之後頁面跳轉到List檢視。
this.$router.push({
name: 'list'
});
（2）動畫的效果是怎麼產生的呢？
所有頁面都會有轉圈的動畫，在assets/scss/common/common.scss中，有如下的css程式碼片段：
body {
height: 100%;
width: 100%;
font-size: 14px;
color: #313131;
overflow-x: hidden;
line-height: 1;
background: url('../images/loading.gif') no-repeat center 250px;
}
定義了gif圖片，動畫效果就產生了。下一篇文章我們重點介紹路由的過程。