關於項目
- 目前該
vue-cli使用的是 3.0.0 版本。 - 該項的
src文件夾中加入了一些我在寫vue項目時的一些常用目錄構架，下面會詳細說。 - 另外項目中我都有對代碼的註釋，來了解
vue-cli這個腳手架。 - 該項並不可以直接使用，目的是瞭解vue-cli 項目結構。
- 某些目錄下面也會有詳細的說明和官網鏈接以及相關文章鏈接。
目錄結構講解
|-- build // 項目構建(webpack以及簡易node服務)相關代碼
| |-- build.js // 生產環境構建代碼 （執行npm run build 時，執行此文件）
| |-- check-version.js // 檢查node、npm等版本
| |-- utils.js // 主要處理一些css相關的loader
| |-- vue-loader.config.js // vue-loader 的配置項設置（utils 中的一些配置，也是在這裏傳進去的）
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- router // 路由文件
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些不需要編譯的圖片、font字體、json數據等
|-- test // 關於測試的文件
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義和維護一致的編碼風格 1
|-- .eslintignore // 設置那些文件忽略eslint 代碼檢測 2
|-- .eslintrc.js // eslint代碼檢測配置 2
|-- .gitignore // git上傳需要忽略的文件格式
|-- .postcssrc.js // 處理css 比如，給css加上兼容性前綴
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
|-- package-lock.json // 鎖定插件版本的文件(當你第二下載插件時，自動生成)
|-- README.md // 項目說明
src 目錄說明
src目錄中我添加了一些自己寫項目時唱搭建的目錄結構
|-- src // 源碼目錄
| |-- api // api請求接口目錄（裏面apis 存儲所有api接口，還可以對應頁面建目錄，來寫api請求）
| | |--apis // 存儲所有api接口
| |-- components // vue公共組件
| | |-- layout // 存放頁面整體結構目錄（例如頭部，尾部，客服浮動框）
| | |-- Home.vue // 網站首頁
| | |-- Main.vue // 網站整體構架的搭建
| |-- public // 公共方法
| |-- store // vuex的狀態管理
| |-- router // 路由文件
| |-- theme // 存放一些公共主題樣式，比如頁面的主色調，副色調，hover色調，按鈕色調
| |-- utils // 針對項目對異步請求的一些封裝目錄（我這裏對axios進行了簡單的封裝）
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件