vue專案目錄結構詳解

2022-07-19 20:39:19 字數 1845 閱讀 6578

基於 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檔案

│  ├── 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

vue專案目錄結構詳解

專案簡介 基於 vue.js 的前端開發環境,用於前後端分離後的單頁應用開發,可以在開發時使用 es next scss 等最新語言特性。專案包含 基礎庫 vue.js vue router vuex whatwg fetch 編譯 打包工具 webpack babel node sass 單元測試...

vue專案目錄結構詳解

vue的目錄結構相對而言比較簡單,我們主要要操作的就是src目錄,在components目錄下寫主鍵,在router目錄下寫路由基於 vue.js 的前端開發環境,用於前後端分離後的單頁應用開發,可以在開發時使用 es next scss 等最新語言特性。或參考 vue專案目錄結構詳解 專案簡介 基...

vue專案目錄結構詳解

基於 vue.js 的前端開發環境,用於前後端分離後的單頁應用開發,可以在開發時使用 es next scss 等最新語言特性。專案包含 基礎庫 vue.js vue router vuex whatwg fetch 編譯 打包工具 webpack babel node sass 單元測試工具 ka...