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

vue-cli目錄結構：

 

vue-cli目錄解析：

1. build 文件夾：用於存放 webpack 相關配置和腳本。開發中僅 偶爾使用 到此文件夾下 webpack.base.conf.js 用於配置 less、sass等css預編譯庫，或者配置一下 UI 庫。
2. config 文件夾：主要存放配置文件，用於區分開發環境、線上環境的不一樣。 經常使用到此文件夾下 config.js 配置開發環境的 端口號、是否開啓熱加載 或者 設置生產環境的靜態資源相對路徑、是否開啓gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
3. dist 文件夾：默認 npm run build 命令打包生成的靜態資源文件，用於生產部署。
4. node_modules：存放npm命令下載的開發環境和生產環境的依賴包。
5. src: 存放項目源碼及須要引用的資源文件。
6. src下assets：存放項目中須要用到的資源文件，css、js、images等。
7. src下componets：存放vue開發中一些公共組件：header.vue、footer.vue等。
8. src下emit：本身配置的vue集中式事件管理機制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：本身配置的vue請求後臺接口方法。
11. src下page：存在vue頁面組件的文件夾。
12. src下util：存放vue開發過程當中一些公共的.js方法。
13. src下vuex：存放 vuex 爲vue專門開發的狀態管理器。
14. src下app.vue：使用標籤<route-view></router-view>渲染整個工程的.vue組件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：設置項目的一些meta頭信息和提供<div id="app"></div>用於掛載 vue 節點。
17. package.json：用於 node_modules資源部 和 啓動、打包項目的 npm 命令管理。

 

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

build 對象下 對於 生產環境 的配置：

• index：配置打包後入口.html文件的名稱以及文件夾名稱
• assetsRoot：配置打包後生成的文件名稱和路徑
• assetsPublicPath：配置 打包後 .html 引用靜態資源的路徑，通常要設置成 "./"
• productionGzip：是否開發 gzip 壓縮，以提高加載速度

 

dev 對象下 對於 開發環境 的配置：

• port：設置端口號
• autoOpenBrowser：啓動工程時，自動打開瀏覽器
• proxyTable：vue設置的代理，用以解決 跨域 問題

經常使用對象解析：

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