vue專案搭建目錄以及標準(慢慢摸索)
專案搭建:
1.專案公共元件放在src/components。
2.由於程式碼結構複雜拆分出去的,業務元件放在子目錄components。
3.vue檔案裡面把資料處理程式碼拆分出去,寫好的檔案css也獨立拆分出去(細小的元件一行兩行的未拆分)。使得vue檔案
元件劃分:
View層減重的基礎,將可共用的檢視元件剝離出去,改為訊息機制進行通訊,甚至直接剝離出包含檢視和業務程式碼的業務邏輯元件,都可以有效地拆分View層,降低程式碼的複雜度。
Api/ axios的統一放置
/api_user 介面地址編寫
/env 切換介面地址
/index axios配置
Directive/ 公共自定義指令,沒必要全域性掛載的就別全域性掛載。
Assets/ 靜態檔案資源 (專案為單位的靜態都放這)
/font 本地字型
/image 圖片
Style/ 樣式檔案(scss,less,css)
Components/ 公共元件
Vender/ 第三方元件本地化
Utils/ 工具類:放置一些公用的方法類,以專案為單位。
(一個類方法越少越好,特殊的最好一個類一個方法,以功能命名)
Filter/ 過濾器,放置過濾器和一些資料格式過濾
/index eg:時間格式化,把格式化歸到了過濾裡邊
/htmlFilter 全域性過濾器
Mixin/ 混入元件的程式碼,數量不多直接以功能命名。動態資料變化的放在這裡面。
staticData/ 靜態資料,多個js檔案以資料功能命名。
Router/ 路由根據模組拆分,模組單位,油田、儲氣庫…
Store/ vuex,僅僅放置一些全域性狀態,謹慎用。
Js/ 業務資料處理層
js/common 放置業務元件的公共方法,以單個方法命名,減少檔案佔用。
…
資料處理層按照業務剝離(js的剝離):在對應的js/ 中,對應頁面有相應的js。
Js細分標準,多數檔案用到的提出到common,單個元件用到的,提出到檔案頂端。公共data提出到,staticData/
方法優化。規範返回值,引用資料型別的返回。
相關文章
- python標準庫目錄Python
- vue-cli3專案搭建配置以及效能優化Vue優化
- Maven精選系列--標準目錄結構Maven
- Mac 下 vue 開發環境的搭建以及專案建立MacVue開發環境
- vite+vue3專案配置二級訪問目錄ViteVue
- IndexedDB 程式碼封裝、效能摸索以及多標籤支援Index封裝
- webloginc配置專案根目錄Web
- 使用vue-cli搭建VUE專案Vue
- vue(16)vue-cli建立專案以及專案結構解析Vue
- Vue專案搭建 + 引入ElementUIVueUI
- 用webstorm搭建vue專案WebORMVue
- webpack初步搭建Vue專案WebVue
- Vue搭建專案環境Vue
- 使用webpack搭建vue專案WebVue
- vue cli 快速搭建專案Vue
- Vue-CLI 專案搭建Vue
- 第一講、建立執行Vue3.x專案、分析Vue目錄結構Vue
- vite + ts 快速搭建 vue3 專案 以及介紹相關特性ViteVue
- vue3+vite專案中使用alias設定目錄別名VueVite
- Maven專案沒有resources目錄Maven
- springboot+vue前後端分離專案-vue專案搭建Spring BootVue後端
- Webpack4 搭建 Vue 專案WebVue
- 如何搭建一個vue專案Vue
- Vue3的專案搭建Vue
- springboot+vue前後端分離專案-vue專案搭建2Spring BootVue後端
- springboot+vue前後端分離專案-vue專案搭建3Spring BootVue後端
- springboot+vue前後端分離專案-vue專案搭建4Spring BootVue後端
- springboot+vue前後端分離專案-vue專案搭建5Spring BootVue後端
- VUE - 配置根目錄(用@代表src目錄)Vue
- 如何定義專案的成功標準?
- nginx配置web訪問以及檢視目錄檔案NginxWeb
- thinkphp6 專案搭建記錄PHP
- 03、Promise,Vue-cli搭建專案PromiseVue
- 使用腳手架搭建VUE專案Vue
- vue3+ts+elementPlus專案搭建Vue
- Vue-Cli 專案基礎搭建Vue
- 從零搭建一個vue專案Vue
- 使用 webpack 手動搭建 vue 專案WebVue