VUE項目目錄結構

 

如上圖所示，我們的目錄結構就是這樣的了。

 

目錄/文件	說明
build	這個是我們最終發布的時候會把代碼發布在這里，在開發階段，我們基本不用管。
config	配置目錄，默認配置沒有問題，所以我們也不用管
node_modules	這個目錄是存放我們項目開發依賴的一些模塊，這里面有很多很多內容，不過高興的是，我們也不用管
src	我們的開發目錄，基本上絕大多數工作都是在這里開展的
static	靜態資源
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。基本不用管，放着就是了
index.html	首頁入口文件，基本不用管，如果是開發移動端項目，可以在head區域加上你合適的meta頭
package.json	項目配置文件。前期基本不用管，但是你可以找一下相關的資料，學習一下里面的各項配置。至少，要知道分別是干嘛的。
README.md	備注文件

 

如上，基本上就是這么個情況。重要的，還是src文件夾。

SRC文件夾的情況

 

如上圖所示，這是src文件夾下面的初始情況，里面有一些示例代碼之類的。比如，它吧logo放在assets文件夾里面。我個人很不喜歡這么做，因為代碼是代碼，資源是資源，各歸其位比較好。

commponents目錄里面放了一個演示的組件文件，你可以打開看下。當然，也可以直接刪除，然后根據我的博文往下走。

App.vue是項目入口文件。當然，我們需要改造，改造成我們可以使用的樣子的。后面的博文會說。

main.js這是項目的核心文件。全局的配置都在這個文件里面配置，我后面會詳細的講這里怎么搞。

整理目錄

上面只是讓大家了解一下具體是什么情況，下面，我們開始動手，把不想管的干掉，然后把src變成這個樣子:

 

如上圖所示，把文件夾和文件都新建好，后面的博文我會詳細給出每個文件的代碼的。這里，都新建空文件即可。注意，我是用scss來寫css文件的。所以看官你最好也學習一下scss的相關內容，我的博客里面有，搜索也是一大把。

文件\目錄	說明
component	組件文件夾我們寫的一些公用的內容可以放在這里的。
config	核心配置文件夾
frame	存放自路由的文件夾
style	樣式存放目錄

vue支持每一個模板里面寫css，這樣可以做到隨用隨取。但是，我個人不太喜歡這樣，我還是喜歡吧css給單獨放出來，因為這樣便於整理，另外，使用scss的朋友都知道，我們會預設大量的變量，代碼片供我們在寫css的時候使用，如果每個模板文件里面都需要引用一次那是及其麻煩的。