一：目錄結(jié)構(gòu)介紹

二：項(xiàng)目介紹

build 文件夾 及 子目錄

這里面是一些webpack的配置，主要用于項(xiàng)目打包時(shí)的一些設(shè)置。這里不去更詳細(xì)的深入，相關(guān)的文件及配置會(huì)在后面用到時(shí)在詳細(xì)的介紹。

config 文件 及 子目錄

這個(gè)文件夾里裝的是整個(gè)項(xiàng)目 開發(fā)運(yùn)行時(shí)的一些配置，比如npm run dev 時(shí) 項(xiàng)目的啟動(dòng)端口 之類的 。

node_modules  文件 及 子目錄 

這個(gè)文件夾里面全部都是node的一些基礎(chǔ)的依賴包，當(dāng)我們拓展的安裝一些別的插件時(shí) 也會(huì)裝在這個(gè)文件夾里。

src  文件 及 子目錄

這個(gè)文件夾 是 整個(gè)項(xiàng)目的主文件夾 ， 我們的代碼大部分都在這里完成。來(lái)具體的看一下里面的內(nèi)容：

assets 文件夾

里面主要放置一些資源文件。比如js 、css 之類的文件。

assets放可能會(huì)變動(dòng)的文件

assets目錄中的文件，會(huì)被合并到一個(gè)文件中，然后進(jìn)行壓縮。多用來(lái)存放業(yè)務(wù)級(jí)的js、css等，如一些全局的scss樣式文件、全局的工具類js文件等。
拓展: assets目錄中可以自己分化出不同地子目錄，用來(lái)根據(jù)自己的需求存放文件。如assets/util/可以用來(lái)存放工具類js，assets/api/ 可以用來(lái)存放業(yè)務(wù)接口js等等

components 文件夾

可以說是vue 的 靈魂了 ， 組件文件全部都可以放到這里面。

組件 ！一個(gè)vue項(xiàng)目就是由一個(gè)個(gè)的組件拼裝起來(lái)的。

router 文件夾 及 子目錄

這個(gè)文件夾里的是整個(gè)vue項(xiàng)目的路由，vue 是單頁(yè)面應(yīng)用的代表，這里面就是設(shè)置一個(gè)一個(gè)組件的地址的文件。

在項(xiàng)目中使用vue-router管理路由，分為以下幾步

    第一步:在終端(terminal)中安裝vue-router

    npm install -g vue-router

    第二步:在src目錄下創(chuàng)建一-個(gè)router文件夾，在這個(gè)文件夾下創(chuàng)建router. js ( 也可以和main. js平級(jí)，直接創(chuàng)建router. js)，在router. js文件中配置相應(yīng)的信息

    第三步:入口文件main. js中引入路由實(shí)例router，然后在根實(shí)例中注冊(cè)

views文件夾

vi ews文件夾用來(lái)存放“頁(yè)面”。一個(gè)視圖可以具有一個(gè)或多個(gè)組件，并且一個(gè)視圖實(shí)際上打算由導(dǎo)航URL訪問。它們通常放在src/views。

app 文件 

這個(gè)文件是整個(gè)項(xiàng)目的入口文件，相當(dāng)于包裹整個(gè)頁(yè)面的最外層的div。

App. vue是我們的根組件(使用標(biāo)簽渲染整個(gè)工程的.vue組件) ，所有頁(yè)面都是在App. vue下進(jìn)行切換的。其實(shí)你也可以理解為所有的路由也是App. vue的子組件。所以我們將router 標(biāo)示為App. vue的子組件。

main.js 文件 

這個(gè)文件是項(xiàng)目的主js,全局的使用的各種變量、js、插件 都在這里引入 、定義。

static 文件夾 及 子目錄 

這個(gè)文件夾里是一些靜態(tài)資源文件。

這個(gè)四個(gè)文件是項(xiàng)目自帶文件 

基本上用不到。

index 文件

就是項(xiàng)目的承載頁(yè)面。

package 文件

是整個(gè)項(xiàng)目用的到的所有的插件的json的格式 比如 這個(gè)插件的 名稱 ， 版本號(hào)。 當(dāng)在項(xiàng)目里使用npm install 時(shí) node 會(huì)自動(dòng)安裝， 這個(gè)文件里的所有插件。

這是項(xiàng)目的一些說明文件。

 dist 文件夾

是在執(zhí)行了 npm run build 打包指令之后才會(huì)出現(xiàn)的， 整個(gè)項(xiàng)目寫好之，打包出來(lái)的所有文件都會(huì)在這里，只需要訪問文件夾里的index文件可以進(jìn)入應(yīng)用了。

最后再來(lái)一張圖吧

總結(jié) 

到此這篇關(guān)于vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹的文章就介紹到這了,更多相關(guān)vue項(xiàng)目結(jié)構(gòu)目錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論