Vue專案目錄結構

2021-08-27 03:49:50 字數 2456 閱讀 7501

project

├── build 構建指令碼目錄

│ ├── build.js 生產環境構建(編譯打包)指令碼

│ ├── check-version.js 檢查node、npm等版本

│ ├── dev-client.js 開發伺服器熱過載指令碼,主要用來實現開發階段頁面自動重新整理

│ ├── dev-server.js 執行本地開發伺服器

│ ├── utils.js 構建相關工具方法,主要用來處理css類檔案的loader

│ ├── vue-loader.conf

.js 處理vue中的樣式

│ ├── vebpack.base

.conf

.js webpack基本配置

│ ├── vebpack.dev

.conf

.js webpack開發環境配置

│ └── vebpack.prod

.conf

.js webpack生產環境配置

│├── config 專案配置

│ ├── dev.env

.js 開發環境變數

│ ├── index.js 專案配置檔案

│ └── prod.env

.js 生產環境變數

│├── dist 使用生產環境配置構建專案,構建好的目錄放到該目錄

│ ├── dev.env

.js 開發環境變數

│ ├── index.js 專案配置檔案

│ ├── prod.env

.js 生產環境變數

│ └── test.env

.js 測試環境變數

│├── node_modules node的依賴包

│├── src 專案原始碼目錄

│ ├── api

│ │ └── api.js 介面檔案

│ ├── assets 資源目錄,這裡的資源會被webpack構建

│ │ ├── css 第三方css檔案,全域性css檔案

│ │ ├── fonts 字型

│ │ ├── less 全域性less

│ │ ├── sass 全域性sass

│ │ └── images

│ ├── components 元件目錄

│ ├── directive 自定義指令

│ │ └── http.js 介面請求封裝

│ ├── libs 工具箱

│ │ └── util.js 常用工具類

│ ├── locale 語言配置

│ ├── mock mock資料目錄

│ ├── views 頁面目錄

│ ├── router 前端路由

│ │ └── index.js

│ ├── vuex vuex狀態管理

│ │ └── store.js

│ └── main.js 入口js檔案

│├── static 純靜態資源,不會被webpack構建

│├── index.html 入口頁面

│├── .babelrc es6語法編譯配置

│├── .editorconfig 定義**格式

│├── .gitignore git 上傳需要忽略的檔案

│├── .postcssrc

.js 指定使用的 css 預編譯器,預設配置了 autoprefixer

│├── package.json 專案基本資訊

│└── readme.md 專案介紹

vue專案結構目錄

readme.md專案的說明檔案 package.json需要的第三方的依賴包 package lock.json第三方包的一些具體版本資訊,保持團隊開發的統一 index.html專案預設的模板檔案 static放置的靜態資源 json資料等 src檔案放置的是整個專案的源 src目錄下幾個檔案的...

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專案目錄結構詳解 專案簡介 基...