vue項目目錄結構詳解


基於 vue.js 的前端開發環境,用於前后端分離后的單頁應用開發,可以在開發時使用 ES Next、scss 等最新語言特性。項目包含:

基礎庫: vue.js、vue-router、vuex、whatwg-fetch
編譯/打包工具:webpack、babel、node-sass
單元測試工具:karma、mocha、sinon-chai
本地服務器:express
目錄結構

├── README.md            項目介紹

├── index.html           入口頁面

├── build              構建腳本目錄

│  ├── build-server.js         運行本地構建服務器,可以訪問構建后的頁面

│  ├── build.js            生產環境構建腳本

│  ├── dev-client.js          開發服務器熱重載腳本,主要用來實現開發階段的頁面自動刷新

│  ├── dev-server.js          運行本地開發服務器

│  ├── utils.js            構建相關工具方法

│  ├── webpack.base.conf.js      wabpack基礎配置

│  ├── webpack.dev.conf.js       wabpack開發環境配置

│  └── webpack.prod.conf.js      wabpack生產環境配置

├── config             項目配置

│  ├── dev.env.js           開發環境變量

│  ├── index.js            項目配置文件

│  ├── prod.env.js           生產環境變量

│  └── test.env.js           測試環境變量

├── mock              mock數據目錄

│  └── hello.js

├── package.json          npm包配置文件,里面定義了項目的npm腳本,依賴包等信息

├── src               源碼目錄 

│  ├── main.js             入口js文件

│  ├── app.vue             根組件

│  ├── components           公共組件目錄

│  │  └── title.vue

│  ├── assets             資源目錄,這里的資源會被wabpack構建

│  │  └── images

│  │    └── logo.png

│  ├── routes             前端路由

│  │  └── index.js

│  ├── store              應用級數據(state)

│  │  └── index.js

│  └── views              頁面目錄

│    ├── hello.vue

│    └── notfound.vue

├── static             純靜態資源,不會被wabpack構建。

└── test              測試文件目錄(unit&e2e)

  └── unit              單元測試

    ├── index.js            入口腳本

    ├── karma.conf.js          karma配置文件

    └── specs              單測case目錄

      └── Hello.spec.js


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM