通過一個小產(chǎn)品總結(jié)過去一段時間的學(xué)習(xí)惠啄。
- vue 框架
- webpack 打包單頁面應(yīng)用程序
產(chǎn)品效果
需求分解
第一頁組件, 顯示載入數(shù)據(jù)按鈕點擊之后顯示第二頁組件间涵。
第二頁嫌疑人詳細(xì)信息列表
1.帶滾動條, 可以上下滾動
2.在嫌疑人社會關(guān)系中點擊聯(lián)系人時, 會自動滾動到嫌疑人詳細(xì)信息列表并添加背景顏色標(biāo)記法竞。
3.嫌疑人組件支持左鍵單擊, 狀態(tài)為選中
第三頁嫌疑人社會關(guān)系
1.回退按鈕, 記錄每一次操作數(shù)據(jù), 每次回退的時候刪除數(shù)據(jù)。
2.聯(lián)系人, 選中后嫌疑人組件展示并選中列表項組件, 展示聯(lián)系人詳情参歹。
3.可以進(jìn)一步點擊聯(lián)系人轧坎。 不論點擊多少步都支持單步回退到起點。
數(shù)據(jù)字段設(shè)計
嫌疑人詳細(xì)信息列表
const Peopelist = [
{name:'張三',sex:'男',phone:12345678},
{name:'張三2',sex:'男',phone:12345678},
{name:'張三3',sex:'男',phone:12345678},
{name:'張三4',sex:'男',phone:12345678},
]
嫌疑人社會關(guān)系詳情
const ContactDetails = {
"張三": ["張三2", "張三3", "張三4"],
"張三1": ["張三", "張三3", "張三4"],
"張三2": ["張三8", "張三3", "張三1"],
"張三3": ["張三6", "張三2", "張三"],
"張三4": ["張三2", "張三3", "張三5"],
"張三5": ["張三3", "張三3", "張三7"],
"張三6": ["張三4", "張三3", "張三"],
"張三7": ["張三2", "張三3"],
"張三8": ["張三4"],
}
開發(fā)步驟
1.創(chuàng)建一個 html 快速做出功能泽示。
2.分解 html 和 vue 各個組件代碼到對應(yīng)目錄缸血。
3.引入 webpack, 配置 webpack 常用插件。
開發(fā)步驟（1.0.0)
1.引入 vue.js ( 通過 script 標(biāo)簽直接引入在線 cdn 文件), 實例化 vue 組件械筛。
2.創(chuàng)建兩個局部組件作為人物關(guān)系頁/人物詳情頁(局部/全局組件知道就好)捎泻。
5.通過組件模板布局組件 html。
6.使用 css 給布局的 html 穿上衣服埋哟。
7.實現(xiàn)組件之間的父傳子, 子傳父通信笆豁。
8.使用 vue 基礎(chǔ)語法實現(xiàn)數(shù)據(jù)的展示。
開發(fā)步驟（2.0.0)
1.拆分 css赤赊、js, 使用 style闯狱、script 標(biāo)簽引入。
2.拆分 vue 各個組件使用模塊化方式引入抛计。
3.使用 npm 來初始化項目引入 webpack 基本插件哄孤。
4.配置 webpack 的熱更新、別名吹截、開發(fā)/生產(chǎn)環(huán)境等等瘦陈。
以上步驟只用于當(dāng)前項目凝危。
