vue項目目錄結構

VUE項目目錄結構

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

目錄/文件	說明
build	這個是咱們最終發佈的時候會把代碼發佈在這裏，在開發階段，咱們基本不用管。
config	配置目錄，默認配置沒有問題，因此咱們也不用管
node_modules	這個目錄是存放咱們項目開發依賴的一些模塊，這裏面有不少不少內容，不太高興的是，咱們也不用管
src	咱們的開發目錄，基本上絕大多數工做都是在這裏開展的
static	資源目錄，咱們能夠把一些圖片啊，字體啊，放在這裏。
test	初始測試目錄，沒用，刪除便可
.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	存放自路由的文件夾
page	項目模板文件夾,全部的頁面文件所有存放與此，後面會根據須要來創建各類子目錄
style	樣式存放目錄

vue支持每個模板裏面寫css，這樣能夠作到隨用隨取。可是，我我的不太喜歡這樣，我仍是喜歡吧css給單獨放出來，由於這樣便於整理，另外，使用scss的朋友都知道，咱們會預設大量的變量，代碼片供咱們在寫css的時候使用，若是每一個模板文件裏面都須要引用一次那是及其操蛋的。

你能夠先根據我這一套來。而後等你所有融會貫通了以後，你能夠想怎麼玩兒怎麼玩兒。隨便。

這篇博文先到這裏，後面咱們繼續講。

首發地址：blog.csdn.net/fungleo/art…