Vue項目目錄結構梳理
by:授客 QQ：1033553122
- 1. 結構梳理
.
├── build/ # webpack 配置檔案；
│ └── ...
├── config/ # 與項目建構相關的常用的配置選項；
│ ├── index.js # 主配置檔案
│ ├── dev.env.js # 開發環境變量
│ ├── prod.env.js # 生産環境變量
│ └── test.env.js # 測試環境變量
│
├── src/
│ ├── main.js # webpack 的入口檔案；
│ ├── mock/ # 存放mockjs資料檔案，建議添加modules存放不同子產品的mock資料 .js檔案；
│ ├── store/ # 存放store倉庫檔案；
│ ├── common/ # 存放項目共用的資源，如：常用的圖檔、圖示，共用的元件、子產品、樣式，常量檔案等等；
│ │ ├── assets/ # 存放項目共用的代碼以外的資源，如：圖檔、圖示、視訊 等；
│ │ ├── components/ # 存放項目共用的元件，如：封裝的導覽列、頁籤等等； 備注：這裡的存放的元件應該都是展示元件；
│ │ ├── network/ # 存放項目的網絡子產品，如：接口；
│ │ ├── compatible/ # 存放項目的相容子產品，如：适合App和微信各種接口的子產品；
│ │ ├── extension/ # 存放已有類的擴充子產品，如：對 Array 類型進行擴充的子產品；
│ │ ├── libraries/ # 存放自己封裝的或者引用的庫；
│ │ ├── utils/ # 自己封裝的一些工具
│ │ ├── constant.js # 存放js的常量；
│ │ ├── constant.scss # 存放scss的常量；
│ │ └── ...
│ └── app/ # 存放項目業務代碼；
│ ├── App.vue # app 的根元件；
│ └── ...
├── views # 我們的頁面元件檔案夾 │ ├── content.vue # 準備些 cnodejs 的内容頁面 │ └── index.vue # 準備些 cnodejs 的清單頁面 ├── style # 樣式存放目錄 │ └── index.css # 主樣式檔案 ├── static/ # 純靜态資源，該目錄下的檔案不會被webpack處理，隻會被拷貝到輸出目錄下；
├── test/ # 測試
│ ├── unit/ # 單元測試
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # 專為單元測試配置的eslint配置檔案
│ │ ├── index.js # 測試編譯的入口檔案
│ │ ├── jest.conf.js # Jest的配置檔案
│ │ └── karma.conf.js # Karma的配置檔案
│ │ └── setup.js # 在Jest之前運作的啟動檔案；
│ └── e2e/ # e2e 測試
│ ├── specs/ # test spec files
│ ├── custom-assertions/ # 自定義的斷言
│ ├── runner.js # test runner 腳本
│ └── nightwatch.conf.js # test runner 的配置檔案
├── .babelrc # babel 的配置檔案
├── .editorconfig # 編輯器的配置檔案；可配置如縮進、空格、制表類似的參數；
├── .eslintrc.js # eslint 的配置檔案
├── .eslintignore # eslint 的忽略規則
├── .gitignore # git的忽略配置檔案
├── .postcssrc.js # postcss 的配置檔案
├── index.html # HTML模闆,入口頁面
├── package.json # npm包配置檔案，裡面定義了項目的npm腳本，依賴包等資訊
└── README.md
- 2. 檔案修改
調整目錄後需要對相關檔案進行修改
src/App.vue存放路徑更改，需要修改預設src/main.js
修改
import App from './App'
為
import App from './app/App';
- 3. 參考連結
https://www.jianshu.com/p/75cf57e53451 https://www.cnblogs.com/zhaowy/p/8513070.html 作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群
