實戰Vue簡易項目（3）需求分析

CompileYouth 發布于2019-08-23 10:35 / 3542人閱讀

摘要：頁面布局頁面整體布局分上中下上下部門導航欄，每個頁面所共有頁面的主體，隨內容可滾動欄，頁面可選，有的有，有的無可分離組件日期組件審批流組件列表組件可分離的工具庫申請單類型事假病假年假對應數據類型應該為，需要一個轉換為對應的方法申請單狀

頁面布局

App頁面整體布局分上中下 || 上下部門；

NavigationBar -> 導航欄，每個頁面所共有；

MainContext -> 頁面的主體，隨內容可滾動；

TabBar -> Tab欄，頁面可選，有的有，有的無；

可分離組件

日期組件；

審批流組件：

列表組件；

可分離的工具庫

申請單類型： ‘事假’、‘病假’、‘年假’；

對應數據類型應該為Number，需要一個轉換為對應icon的方法；

申請單狀態： ‘審批中’、‘已拒絕’、‘執行中’、‘已結束’；

對應數據類型應該為Number，需要一個轉換為對應icon的方法；

審批狀態：‘未到達’、‘待處理’、‘已拒絕’、‘已同意’；

對應數據類型應該為Number，需要一個轉換為提示文字的方法；

日期時間字段

可能需要時間格式化工具庫；

項目文件結構

~~以下是項目資源src/下的預期文件結構，可以先不看，后續一步步填充，甚至可能修改：~~

Views

Layout

只需加載一次的視圖主結構；

業務文件夾

index.vue

others

Components

公用的才提取出來；

styles

全局樣式文件

公用樣式文件

router

路由配置文件

store

狀態管理文件

assets

圖片、字體等資源文件

utils

公用的工具；

constants

常量配置文件

~~mixins~~

通用繼承組件

接下來聊點具體的業務：

角色

當前項目中，有兩類人：

申請人

申請人對應著“我的申請”、“詳情頁”、“新建申請”三個視圖；

“我的申請”分為“審批中”、“已完成”；

“審批中”的列表數據；

“已完成”的列表數據；

“詳情頁”有兩種情況：

“審批中”的申請單，無操作性；

“執行中”的申請單，可以“結束”申請單；

“新建申請”：

收集申請單必要字段；

有“提交”操作；

審批人

審批人對應著“我的審批”、“詳情頁”兩個視圖；

“我的審批”分為“待處理”、“已完成”；

“待處理”的列表數據；

“已完成”的列表數據；

“詳情頁”有兩種情況：

“待處理”的申請單，可以“同意”、“拒絕”申請單；

“已完成”的申請單，無操作性；

表單數據 “新建申請”表單數據； “詳情頁”（審批）意見； 章節回顧

該如何劃分視圖Views，為什么這樣劃分

該如何提取組件，為什么這樣提取

該如何分離工具，為什么這樣分離

思考

接下來如何實現Views呢？

云服務器 GPU云服務器項目實戰 python實戰項目 python項目實戰 php項目實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96495.html

實戰Vue簡易項目（1）初始化環境配置

摘要：目前，我們還沒有創建項目，進入預期項目目錄的上一級文件目錄下即可。使用腳手架初始化項目最后一個為項目名稱，可以自定義其它名稱。本章以下命令都是在cmd命令行中進行的。安裝命令行 npm i -g vue-cli 安裝完成后，輸入vue -V返回版本號，即安裝成功；初始化項目切換到項目目錄下項目目錄，即項目所在目錄。目前，我們還沒有創建項目，進入預期項目目錄的上一級文件目...

mindwind 2019-08-23 10:30 評論0 收藏0
實戰Vue簡易項目（5）模擬數據

摘要：若需要傳參，傳第二個參數不接受多個參數的傳入，最多只接收兩個參數請求數據目前，通過以上步驟，我們獨立的構建了模擬數據和狀態管理，但還沒有將它們結合起來。驗證如果你想驗證寫出來的模擬數據是否正確，可以在示例頁打開控制臺，直接運行。關于模擬數據，這里使用Mock.js這個庫，關于用法，官網說的也比較詳細，這里我就簡單的帶一下。列表數據我們先將項目中src/components/Hel...

Magicer 2019-08-23 10:43 評論0 收藏0
前端經典文章

摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，...

lowett 2019-08-22 13:58 評論0 收藏0
實戰Vue簡易項目（2）定制開發環境

摘要：至于，為什么跟蹤文件因為這個功能是開發環境下獨有的，要修改開發環境吖，必然找開發環境的配置文件進行跟蹤。測試可行性重啟項目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網內的其他端可以訪問。然而，這樣并沒有結束。本章內容包含上一章思考的解決，還有一些其它的定制... CSS預處理關于對.vue文件模塊處理規則的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 評論0 收藏0
實戰Vue簡易項目（4）定義視圖

摘要：是中的條件指令，根據返回的布爾值動態添加或移除元素。傳值方式我是標題需要在中定義函數傳的值為字符串，不需要前綴傳的值為非字符串數字布爾值函數數組對象，為前綴，值為表達式計算結果在程序中，如引用的值。為該組件內，元素綁定的事件處理函數。視圖包含內容#NavigationBar、#TabBar、#MainContext；為什么#NavigationBar、#TabBar分在Layou...

LeoHsiun 2019-08-23 10:40 評論0 收藏0