一、技術(shù)選型
- 使用vue-cli基于webpack結(jié)合的
- 核心使用 vue、vue-router
- 使用vuex做全局?jǐn)?shù)據(jù)的狀態(tài)管理
- better-scroll 滾動(dòng)回彈
- mock 模擬數(shù)據(jù)
- axios/fetch 進(jìn)行網(wǎng)絡(luò)請(qǐng)求
二、項(xiàng)目目錄結(jié)構(gòu)
├── index.html 入口頁面
├── build 構(gòu)建腳本目錄
│ ├──build.js 生產(chǎn)環(huán)境構(gòu)建（編譯打包）腳本
│ ├──check-versions.js 版本驗(yàn)證工具
│ ├──utils.js 主要用來處理css類文件的loader
│ ├──vue-loader.conf.js 處理vue中的樣式
│ ├── webpack.base.conf.js webpack基礎(chǔ)配置
│ ├── webpack.dev.conf.js webpack開發(fā)環(huán)境配置
│ └── webpack.prod.conf.js webpack生產(chǎn)環(huán)境配置
├── config 項(xiàng)目配置
│ ├── dev.env.js 開發(fā)環(huán)境變量
│ ├── index.js 項(xiàng)目配置文件
│ ├── prod.env.js 生產(chǎn)環(huán)境變量
│ └── test.env.js 測(cè)試環(huán)境變量
├── dist 打包好的項(xiàng)目
├── node_modules 項(xiàng)目依賴模塊
├── src 項(xiàng)目源碼目錄
│ ├── main.js 入口js文件
│ ├── app.vue 根組件
│ ├── components 公共組件目錄
│ ├── assets 資源目錄，資源會(huì)被wabpack構(gòu)建
│ │ └── css 第三方css文件，全局css文件
│ │ └── font 字體
│ │ └── scss 全局scss
│ │ └── images 圖片
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── pages 前端頁面文件
│ │ └── index.vue
│ ├── vuex 應(yīng)用級(jí)數(shù)據(jù)（state）
│ │ └── store.js 分組數(shù)據(jù)存貯
│ ├── service 公共服務(wù)文件
│ │ └── service.js 處理公共請(qǐng)求，響應(yīng)數(shù)據(jù)
│ │ └── util.js 處理公共js操作方法
├── static 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建。
系統(tǒng)功能模塊
- Loading
- 菜單管理
- 店鋪、商品詳情
- 購(gòu)物車彈窗效果
- 附近的店
- 確認(rèn)訂單
- 選擇、新增收貨地址
- 付款
- 全部訂單、已退款、完成、確認(rèn)詳情
- 登錄
三、Css要求 - css用scss寫，.vue以局部css來寫<style lang="scss" scoped></style>只作用于當(dāng)前vue文件。
- 遇到經(jīng)常公用的，比如百分比計(jì)算，一定要寫在全局var.scss里面。
- 公共使用的css要單獨(dú)放在一個(gè)文件夾里
四、 文件名要求
- 有意義的名詞、簡(jiǎn)短、具有可讀性
- 以小寫開頭，采用短橫線分割命名
- 公共組件命名以公司名稱簡(jiǎn)拼為命名空間(app-xx.vue)
- 文件夾命名主要以功能模塊代表命名
五、 js
- 將公共的js邏輯寫在單獨(dú)文件中。
- 在數(shù)據(jù)請(qǐng)求前需要顯示loading層，請(qǐng)求到數(shù)據(jù)后，再隱藏loading層。
- 彈框、select等需要大量代碼去實(shí)現(xiàn)，要以組件的方式引入。
- 使用嚴(yán)格的條件判斷符。用===代替==，用!==代替!=
六、Gitflow工作流
每個(gè)新功能位于一個(gè)自己的分支,使用develop分支作為父分支。當(dāng)新功能完成時(shí)，合并回develop分支。新功能提交應(yīng)該從不直接與master分支交互
Gitflow用預(yù)設(shè)兩個(gè)主分支在倉(cāng)庫中:
master分支: 存儲(chǔ)了正式發(fā)布的歷史
包括產(chǎn)品代碼。不能直接工作在這個(gè) master 分支上，而是在其他指定的，獨(dú)立的特性分支中不直接提交改動(dòng)到 master 分支
develop分支: 作為功能的集成分支
進(jìn)行任何新的開發(fā)的基礎(chǔ)分支。當(dāng)你開始一個(gè)新的功能分支時(shí)，它將是開發(fā)的基礎(chǔ)該分支也匯集所有已經(jīng)完成的功能，并等待被整合到 master 分支中
hotfix
對(duì)產(chǎn)品代碼進(jìn)行修復(fù)，這個(gè) hotfix 分支是基于 “master” 分支
項(xiàng)目運(yùn)行
# 安裝依賴
npm install 或 yarn(推薦)
# 開啟本地服務(wù)器localhost:8088
npm run dev
# 發(fā)布環(huán)境
npm run build
