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

二：項目介紹

build 文件夾 及 子目錄

這里面是一些webpack的配置，主要用于項目打包時的一些設置。這里不去更詳細的深入，相關的文件及配置會在后面用到時在詳細的介紹。

config 文件 及 子目錄

這個文件夾里裝的是整個項目 開發(fā)運行時的一些配置，比如npm run dev 時 項目的啟動端口 之類的 。

node_modules  文件 及 子目錄 

這個文件夾里面全部都是node的一些基礎的依賴包，當我們拓展的安裝一些別的插件時 也會裝在這個文件夾里。

src  文件 及 子目錄

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

assets 文件夾

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

assets放可能會變動的文件

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

components 文件夾

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

組件 ！一個vue項目就是由一個個的組件拼裝起來的。

router 文件夾 及 子目錄

這個文件夾里的是整個vue項目的路由，vue 是單頁面應用的代表，這里面就是設置一個一個組件的地址的文件。

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

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

    npm install -g vue-router

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

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

views文件夾

vi ews文件夾用來存放“頁面”。一個視圖可以具有一個或多個組件，并且一個視圖實際上打算由導航URL訪問。它們通常放在src/views。

app 文件 

這個文件是整個項目的入口文件，相當于包裹整個頁面的最外層的div。

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

main.js 文件 

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

static 文件夾 及 子目錄 

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

這個四個文件是項目自帶文件 

基本上用不到。

index 文件

就是項目的承載頁面。

package 文件

是整個項目用的到的所有的插件的json的格式 比如 這個插件的 名稱 ， 版本號。 當在項目里使用npm install 時 node 會自動安裝， 這個文件里的所有插件。

這是項目的一些說明文件。

 dist 文件夾

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

最后再來一張圖吧

總結(jié) 

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