目錄
專案開發流程
目錄風格
代碼組織格式
目錄結構
專案開發流程
- 劃分目錄
- 參考兩個css檔案
- 專案模塊劃分：tabbar->路由映射關系
目錄風格
檔案夾字母小寫，組件首字母大寫比較清晰
代碼組織格式
- 一個專案里頁面唯一的用id，多個用class
- methods，方法里面寫函式，生命周期只負責呼叫就行
- 頁面復雜的話就再分子組件
- $el：相當于根組件，可以拿到組件的js原生值比如瀏覽寬高
目錄結構
注意看每個檔案的后綴名，沒有后綴的就是檔案夾，
src
assets 靜態資源
css
base 地基（公共樣式，自己的）
normalize 標準化（初始化樣式，第三方的）
images
cart 購物車檔案夾
common 公共的檔案夾
detail 分支（詳情頁）
home 主頁
profile 個人檔案（個人頁）
tabbar 串列（標簽欄）
common 公共(放當前公共的js,混入和防抖，時間正則)
mixin 混入
utils 常用工具
components 公共組件（下面組件的js都放到自己的檔案夾內）
common 公共（組件，在別的專案也可以復用的）
navbar 導航條
scroll 滾動
swiper 插件（輪播圖插件）
tabbar 串列（tab欄）
toast 吐絲（加入購物車的彈窗）
content 內容（組件，在當前專案可以復用的）
backTop 回到頂部
checkButton 復選框
goods 商品
mainTabbar 最大的串列（我的，購物車，首頁等）
tabControl 選項卡控制元件（遍歷流行新款精選）
network 網路（網路請求相關js）
detail 分支（把沒有規律的資料封裝成一個類）
home 首頁（首頁面向首頁js開發）
request 請求（封裝axios,讓請求面向這個）
router 路由
index.js 索引 （創建路由物件和懶加載各頁面，默認顯示首頁）
store 倉庫
actions.js 行動（向到購物車添加商品數量）
getters.js 吸氣
index.js 索引（這個目錄里都是vuex的東西，官方推薦這樣分開封裝）
mutation-types.js 變化型
mutation.js 變化
views 視圖
cart 購物車
childComps (包含購物車的小組件)
Cart.vue
category 分類
detail 分支（詳情頁）
childComps （詳情頁的小組件）
Detail.vue
home 首頁
childComps （首頁的小組件）
Home.vue
profile 個人檔案
App.vue 平臺
main.js 最重要的（渲染主頁面）
.editorconfig 設定編程風格的統一
vue.config.js 配置 最后，喜歡學習的小伙伴可以關注下面公_號前端老實人，可以一起交流學習！！?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299362.html
標籤：其他
上一篇：??一個有趣小案例教你如何使用原生js使用和jquery應該如何使用jsonp??
下一篇：利用Vue寫一個購物車專案