Vue 專案建立完成後，使用 Web Storm 開啟專案，專案目錄如下：

build 資料夾，用來存放專案構建指令碼config 中存放專案的一些基本配置資訊，最常用的就是埠轉發node_modules 這個目錄存放的是專案的所有依賴，即 npm install 命令下載下來的檔案src 這個目錄下存放專案的原始碼，即開發者寫的程式碼放在這裡static 用來存放靜態資源index.html 則是專案的首頁，入口頁，也是整個專案唯一的HTML頁面package.json 中定義了專案的所有依賴，包括開發時依賴和釋出時依賴

對於開發者來說，以後 99.99% 的工作都是在 src 中完成的，src 中的檔案目錄如下：

assets 目錄用來存放資產檔案components 目錄用來存放元件（一些可複用，非獨立的頁面），當然開發者也可以在 components 中直接建立完整頁面。推薦在 components 中存放元件，另外單獨新建一個 page 資料夾，專門用來放完整頁面。router 目錄中，存放了路由的js檔案App.vue 是一個Vue元件，也是專案的第一個Vue元件main.js相當於Java中的main方法，是整個專案的入口js

main.js 內容如下：

在main.js 中，首先匯入 Vue 物件匯入 App.vue ，並且命名為 App匯入router，注意，由於router目錄下路由預設檔名為 index.js ，因此可以省略所有東西都匯入成功後，建立一個Vue物件，設定要被Vue處理的節點是 "#app"，"#app" 指提前在index.html 檔案中定義的一個div將 router 設定到 vue 物件中，這裡是一個簡化的寫法，完整的寫法是 router:router，如果 key/value 一模一樣，則可以簡寫。宣告一個元件 App，App 這個元件在一開始已經匯入到專案中了，但是直接匯入的元件無法直接使用，必須要宣告。template 中定義了頁面模板，即將 App 元件中的內容渲染到 "#app" 這個div 中。

因此，可以猜測，專案啟動成功後，看到的頁面效果定義在 App.vue 中

App.vue 是一個vue元件，這個元件中包含三部分內容：1.頁面模板（template）；2.頁面指令碼（script）；3.頁面樣式（style）頁面模板中，定義了頁面的 HTML 元素，這裡定義了兩個，一個是一張圖片，另一個則是一個 router-view頁面指令碼主要用來實現當前頁面資料初始化、事件處理等等操作頁面樣式就是針對 template 中 HTML 元素的頁面美化操作

需要額外解釋的是，router-view，這個指展示路由頁面的位置，可以簡單理解為一個佔位符，這個佔位符展示的內容將根據當前具體的 URL 地址來定。具體展示的內容，要參考路由表，即 router/index.js 檔案，該檔案如下：

這個檔案中，首先匯入了Vue物件、Router物件以及 HelloWorld 元件，建立一個Router物件，並定義路由表這裡定義的路由表，path為 / ，對應的元件為 HelloWorld，即瀏覽器地址為 / 時，在router-view位置顯示 HelloWorld 元件