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

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 命令打包生成的靜態資源文件,用於生產部署。
node_modules:存放npm命令下載的開發環境和生產環境的依賴包。
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下app.vue:使用標籤渲染整個工程的.vue組件。
src下main.js:vue-cli工程的入口文件。
index.html:設置項目的一些meta頭信息和提供

用於掛載 vue 節點。
package.json:用於 node_modules資源部 和 啓動、打包項目的 npm 命令管理。
在這裏插入圖片描述
build 對象下 對於 生產環境 的配置:

index:配置打包後入口.html文件的名稱以及文件夾名稱
assetsRoot:配置打包後生成的文件名稱和路徑
assetsPublicPath:配置 打包後 .html 引用靜態資源的路徑,一般要設置成 “./”
productionGzip:是否開發 gzip 壓縮,以提升加載速度
在這裏插入圖片描述
dev 對象下 對於 開發環境 的配置:

port:設置端口號
autoOpenBrowser:啓動工程時,自動打開瀏覽器
proxyTable:vue設置的代理,用以解決 跨域 問題
在這裏插入圖片描述
在這裏插入圖片描述
常用對象解析:

scripts:npm run xxx 命令調用node執行的 .js 文件
dependencies:生產環境依賴包的名稱和版本號,即這些 依賴包 都會打包進 生產環境的JS文件裏面
devDependencies:開發環境依賴包的名稱和版本號,即這些 依賴包 只用於 代碼開發 的時候,不會打包進 生產環境js文件 裏面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章