vue cli 工程目錄結構介紹 詳細介紹

2022-08-09 11:27:09 字數 1388 閱讀 7290

vue-cli目錄結構:

vue-cli目錄解析:

build 資料夾:用於存放 webpack 相關配置和指令碼。開發中僅 偶爾使用 到此資料夾下 webpack.base.conf.js 用於配置 less、sass等css預編譯庫,或者配置一下 ui 庫。

config 資料夾:主要存放配置檔案,用於區分開發環境、線上環境的不同。 常用到此資料夾下 config.js 配置開發環境的 埠號、是否開啟熱載入 或者 設定生產環境的靜態資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。

dist 資料夾:預設 npm run build 命令打包生成的靜態資源檔案,用於生產部署。

src: 存放專案原始碼及需要引用的資源檔案。

src下assets:存放專案中需要用到的資源檔案,css、js、images等。

src下componets:存放vue開發中一些公共元件:header.vue、footer.vue等。

src下emit:自己配置的vue集中式事件管理機制。

src下router:vue-router vue路由的配置檔案。

src下service:自己配置的vue請求後台介面方法。

src下page:存在vue頁面元件的資料夾。

src下util:存放vue開發過程中一些公共的.js方法。

src下vuex:存放 vuex 為vue專門開發的狀態管理器。

src下main.js:vue-cli工程的入口檔案。

用於掛載 vue 節點。

package.json:用於 node_modules資源部 和 啟動、打包專案的 npm 命令管理。

config資料夾 下 index.js 的對於工程 開發環境 和 生產環境 的配置

build 物件下 對於 生產環境 的配置:

dev 物件下 對於 開發環境 的配置:

常用物件解析:

vue cli目錄結構介紹

乙個vue cli的專案結構如下 1.build webpack配置 build檔案主要是webpack的配置,主要啟動檔案是dev server.js,當我們輸入npm run dev首先啟動的就是dev server.js,它會去檢查node及npm版本,載入配置檔案,啟動服務。2.config...

vue cli目錄結構介紹002

總體框架 1.build webpack配置 build檔案主要是webpack的配置,主要啟動檔案是dev server.js,當我們輸入npm run dev首先啟動的就是dev server.js,它會去檢查node及npm版本,載入配置檔案,啟動服務。2.config vue專案配置 con...

vue cli專案的目錄結構介紹

vue.js是一套構建使用者介面的漸進式框架。vue採用自底向上增量開發的設計。vue的核心庫只關心檢視層,非常容易學習,非常容易與其它庫和已有專案整合。vue完全有能力驅動採用單檔案元件和vue生態系統支援的庫開發的複雜單頁應用。vue.js的目標是通過盡可能簡單的api實現響應的資料繫結和組合的...