一、首先建立一個vue專案，如：my-vue,其程式碼結構如下：

由上圖分析每個檔案的作用：

二、我們主要工作src資料夾的分析結構如圖：

這是src資料夾下面的初始情況，裡面有一些示例程式碼之類的。比如，它吧logo放在assets資料夾裡面。我個人很不喜歡這麼做，因為程式碼是程式碼，資源是資源，各歸其位比較好。
commponents 目錄裡面放了一個演示的元件檔案，你可以開啟看下。當然，也可以直接刪除，然後根據我的博文往下走。
App.vue 是專案入口檔案。當然，我們需要改造，改造成我們可以使用的樣子的。
main.js 這是專案的核心檔案。全域性的配置都在這個檔案裡面配置。

整理目錄

下面，我們開始動手，把不想管的幹掉，然後把src變成這個樣子:

如上圖所示，把資料夾和檔案都新建好，後面的博文我會詳細給出每個檔案的程式碼的。這裡，都新建空檔案即可。注意，我是用scss來寫css檔案的。所以看官你最好也學習一下scss的相關內容，我的部落格裡面有，搜尋也是一大把。