推薦我的vue教程：VUE系列教程目錄
通過上一篇文章vue最簡單的入門教程+實(shí)戰(zhàn)+Vue2+VueRouter2+webpack（一）偶翅，我們已經(jīng)新建好了一個(gè)基于vue+webpack的項(xiàng)目城榛。本篇文章將詳細(xì)的幫助大家對這個(gè)項(xiàng)目的結(jié)構(gòu)進(jìn)行搭建，然后我們要從這里慢慢進(jìn)入實(shí)戰(zhàn)至会。
提示：希望大家還是多去官網(wǎng)看看教程，踩踩坑酌予，你會有些疑問永票，我呢則會把我踩過的坑告訴你們，讓你們知道怎么解決肖抱，不要害怕有疑問柏卤，這正是你駛向成功的顛簸阁将。
一、項(xiàng)目目錄以及文件結(jié)構(gòu)
如上圖所示肚吏，我們新建的目錄結(jié)構(gòu)就是這樣的了。
通過表格給大家展示一下這些目錄結(jié)構(gòu)的作用：
| 目錄/文件 | 說明 |
|---|---|
| build | 這個(gè)是我們最終發(fā)布的時(shí)候會把代碼發(fā)布在這里荤崇，在開發(fā)階段拌屏，我們基本不用管。 |
| config | 配置目錄术荤，我們可以進(jìn)行端口的配置倚喂，默認(rèn)配置沒有問題，所以我們也不用管 |
| node_modules | 這個(gè)目錄是存放我們項(xiàng)目開發(fā)依賴的一些模塊瓣戚，這里面有很多很多內(nèi)容端圈，有時(shí)我們需要安裝一些其他東西，那些東西放在這里子库，不過高興的是舱权，我們也不用管 |
| src | 我們的開發(fā)目錄，基本上絕大多數(shù)工作都是在這里開展的仑嗅，這里才是我們需要關(guān)注的 |
| static | 資源目錄宴倍，我們可以把一些圖片啊，字體啊仓技，放在這里鸵贬。 |
| test | 初始測試目錄，沒用脖捻，刪除即可 |
| .xxxx文件 | 這些是一些配置文件阔逼，包括語法配置，git配置等地沮⊙占郏基本不用管，放著就是了 |
| index.html | 首頁入口文件诉濒，基本不用管周伦，如果是開發(fā)移動(dòng)端項(xiàng)目，可以在head區(qū)域加上你合適的meta頭未荒，有時(shí)偶爾會進(jìn)行一些改動(dòng) |
| package.json | 項(xiàng)目配置文件专挪。前期基本不用管，但是你可以找一下相關(guān)的資料片排，學(xué)習(xí)一下里面的各項(xiàng)配置寨腔。至少，要知道分別是干嘛的率寡。初期就不管了迫卢。 |
| README.md | 不用管 |
如上，基本上就是這么個(gè)情況冶共。對于我們來說其實(shí)最重要的乾蛤，還是src文件夾每界。
二、SRC文件夾的情況
如上圖所示家卖，這是src文件夾下面的初始情況眨层，里面有一些示例代碼之類的。比如上荡，它吧logo放在assets文件夾里面趴樱。我個(gè)人很不喜歡這么做，因?yàn)榇a是代碼酪捡，資源是資源叁征，各歸其位比較好。
commponents目錄（組件文件目錄）：里面放了一個(gè)演示的組件文件逛薇，一般在開發(fā)中我比較喜歡把VUE組件放在這里面航揉，你可以打開看下。當(dāng)然金刁，也可以直接刪除帅涂。
App.vue是項(xiàng)目入口文件（最終的編譯全靠它）。當(dāng)然尤蛮，我們需要改造媳友，改造成我們可以使用的樣子的。后面的博文會說产捞。
main.js這是項(xiàng)目的核心文件醇锚。全局的配置都在這個(gè)文件里面配置，這里可以配置全局組件和指令等坯临，很好奇吧焊唬？我后面會詳細(xì)的講這里怎么搞。
整理目錄
上面只是讓大家了解一下具體是什么情況看靠，下面赶促，我們開始動(dòng)手，把不想管的干掉挟炬，然后把src變成這個(gè)樣子:
這里關(guān)于目錄這樣構(gòu)建是有原因的鸥滨，其中：
| 文件\目錄 | 說明 |
|---|---|
| component | 是存放VUE組件的，組件文件夾我們寫的一些公用的內(nèi)容可以放在這里的谤祖。 |
| config | 核心配置文件夾婿滓，是放一些基礎(chǔ)配置，比如一些路由粥喜，和api接口 |
| frame | 存放自路由的文件夾或者框架 |
| page | 項(xiàng)目模板文件夾凸主，存放我們的單頁面富應(yīng)用，所有的頁面文件全部存放與此额湘，后面會根據(jù)需要來建立各種子目錄 |
| style | 樣式存放目錄 |
我會在以后文章中慢慢詳細(xì)給出每個(gè)文件的代碼的卿吐，注意旁舰，我們開發(fā)采取用scss來寫css文件的。所以看官你最好也學(xué)習(xí)一下scss的相關(guān)內(nèi)容但两。
vue雖然支持每一個(gè)模板里面寫css，這樣可以做到隨用隨取供置。但是谨湘，在開發(fā)中不要這樣做，因?yàn)檫@樣會讓我們很難維護(hù)芥丧，并且樣式之間不能夠復(fù)用紧阔，最好是把css給單獨(dú)放出來，因?yàn)檫@樣便于整理续担，另外擅耽，使用scss的朋友都知道，我們會預(yù)設(shè)大量的變量物遇，代碼片供我們在寫css的時(shí)候使用乖仇，如果每個(gè)模板文件里面都需要引用一次那并不是明智之舉。
你可以根據(jù)我的這一套來询兴。然后等你全部融會貫通了之后乃沙，你如果有更好的意見你可以提出來我們進(jìn)行探討。
小結(jié)：
很簡單的項(xiàng)目目錄搭建诗舰，了了幾句警儒，單獨(dú)提出來，只是希望教會大家有一個(gè)良好的項(xiàng)目目錄搭建眶根。
由于每天的時(shí)間不夠蜀铲，所以文章很短，但是依然感謝大家對我的支持與厚愛属百。
提示：在最近幾天我會慢慢附上VUE系列教程的其他后續(xù)篇幅记劝，后面還有精彩敬請期待，請大家關(guān)注我的專題：web前端族扰。如有意見可以進(jìn)行評論隆夯，每一條評論我都會認(rèn)真對待。
