vue-cli3 項目目錄結構淺析

上文寫了如何使用 Vue Cli3 創建一個 Vue 項目,今天分析一下 Vue cli3 項目的目錄結構

結構列表

目錄.png

1.node_modules 項目依賴目錄

這里面存放的是項目的相關依賴和插件
依賴就是項目啟動所必須的前置文件或者代碼
插件可以幫助項目實現更多功能的,或者讓某些功能變得更便捷,健壯

2.public 靜態資源目錄

特性: 1.此目錄下的文件不會經過webpack打包 2.該目錄下的文件使用根目錄調用

基本文件:
項目ico圖標: favicon.ico
母板文件: index.html

可選文件:
可選文件根據項目需求,是否創建(例如: img等)

3.src 資源目錄

assets 靜態資源目錄
項目中需要的 img js css 文件都在該目錄下

components 公共組件目錄
在vue中,公共組件是很重要的一個功能,此目錄就是用于存放組件

router 路由目錄
路由配置文件: index.js 用于定義與使用路由

store 狀態管理目錄
store管理文件: index.js 相當于vue的緩存倉庫以及狀態管理器,詳細可以查閱相關文檔

views 頁面目錄
項目的大部分代碼都在這里,用于存放vue項目的各個頁面(也叫做 組件)

根組件
根組件: App.vue 也叫做頂級組件,所有組件都是掛載在 App.vue 之上運行,相當于index.html文件調用了這個根組件,根組件再調用別的組件

入口文件
項目的入口文件: main.js 通過此入口文件,引入 App.vue, router, store等,到項目中才能使用,并且 插件,組件 如果想要全局使用,都必須在該文件下 注冊,使用.

4.項目描述文件

package.json
包含項目的描述信息,比如: 項目名稱,版本號,入口文件名,關鍵字,作者,依賴列表,等等

5.項目配置文件

vue.config.js
是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。

目錄中還有一個 babel.config.js 文件,當你使用了 基于vue開發的 ui 時,需要在該文件下進行配置

粗略的介紹了 vue-cli3 所構建項目的目錄結構,看完目錄結構接下來就要準備代碼的開發了.
前端的基本能力不僅僅是寫炫酷的靜態頁面,還需要通過接口和后端的同事進行數據交互,那我們一個人的時候該如何開發呢?明天處理如何一個人"完成"項目