1. 程式人生 > >Vue筆記——專案結構說明

Vue筆記——專案結構說明

說明資料夾=黃色檔案=綠色

資料夾 說明 包含內容 包含內容說明
build webpa相關配置,或構建指令碼的目錄 build.js 生產環境構建檔案
check-version.js 版本檢查檔案
dev-client.js 開發伺服器的熱過載檔案,實現開發階段頁面的自動重新整理功能
dev-server.js 執行本地伺服器檔案,即命令:npm run dev
utils.js 構建相關的工具
vue-loader.conf.js 載入器配置
webpack.base.conf.js webpack基礎配置
webpack.dev.conf.js webpack開發環境配置
webpack.prod.conf.js webpack生產環境配置
config 專案相關的配置目錄 dev.env.js 專案在開發環境下的配置
index.js 專案的主要配置
prod.env.js 專案在生產環境下的配置
dist 編譯後的檔案儲存 static 編譯後的靜態檔案儲存,js,css等
index.html 主頁面
node_modules 依賴包    
src 專案的核心檔案即程式碼存放的目錄 assets 資源存放,會被webpack構建

components

公共元件
routerindex.js 專案路由所在:基本路由
APP.vue 根元件,一個vue檔案由template、script、style三部分組成
main.js 入口檔案
static 純靜態資源,不會被webpack構建    
.babelrc babel編譯引數    
.editorconfig 編輯相關配置,即程式碼風格    
.gitignore git上傳忽略的檔案配置    
.postcssrc.js css轉換工具    
index.html 專案的主頁,一般情況下會定義一個空根節點,main.js中的例項會載入這裡,內容用vue元件填充    
package.json 專案基本資訊,包配置檔案    
README.md 專案說明