vue目錄結構總結

├── readme.md 專案介紹 ├── index.html 入口頁面 ├── build webpack基本配置 │ ├── 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

config目錄下的index.js解析

// see  for documentation.
// path是node.js的路徑模組，用來處理路徑統一的問題
var path = require('path')
module.exports = ,
dev: 
},'/pop-shared-web-components': }},
// css sourcemaps off by default because relative paths are "buggy"
// with this option, according to the css-loader readme
// (
// in our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// 是否生成css，map檔案，上面這段英文就是說使用這個cssmap可能存在問題，但是按照經驗，問題不大，可以使用 
// 給人覺得沒必要用這個，css出了問題，直接控制台不就完事了
csssourcemap: false
}}

config下的dev.env.js和prod.env.js檔案

(1)下面是prod.env.js的配置內容
module.exports = 
(2)下面是dev.env.js的配置內容
// 首先引入的是webpack的merge外掛程式，該外掛程式是用來合併物件，也就是配置檔案用的，相同的選項會被後者覆蓋，至於這裡為什麼多次一舉，可能另有他圖吧
var merge = require('webpack-merge')
// 匯入prod.env.js配置檔案
var prodenv = require('./prod.env')
// 將兩個配置物件合併，最終結果是 node_env: '"development"'
module.exports = merge(prodenv, )
(3)下面是proxytable的一般用法
//vue-cli使用這個功能是借助http-proxy-middleware外掛程式，一般解決跨域請求api
proxytable: 
}}

vue目錄結構總結

Vue專案目錄結構

vue專案結構目錄

vue 檔案目錄結構詳解

vue目錄結構總結

Vue專案目錄結構

vue專案結構目錄

vue 檔案目錄結構詳解

相關推薦