建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
為nuxt項目寫一個面包屑cli工具實現(xiàn)自動生成頁面與面包屑配置-創(chuàng)新互聯(lián)
公司項目的面包屑導(dǎo)航是使用 element 的面包屑組件，配合一份 json 配置文件來實現(xiàn)的，每次寫新頁面都需要去寫 json 配置，非常麻煩，所以寫一個面包屑cli，自動生成頁面、自動配置面包屑數(shù)據(jù)，提高效率:rocket:
明確目標
- 提供 init 命令，在一個新項目中能夠通過初始化生成面包屑相關(guān)文件
- 能夠通過命令生成頁面，并且自動配置面包屑 json 數(shù)據(jù)
- 按照項目原有需求，能夠配置面包屑是否可點擊跳轉(zhuǎn)
- 按照項目原有需求，能夠配置某路徑下是否展示面包屑
- 支持僅配置而不生成文件，能夠為已存在的頁面生成配置
- 能夠動態(tài)配置當(dāng)前面包屑導(dǎo)航的數(shù)據(jù)
- …… （后續(xù)在使用中發(fā)現(xiàn)問題并優(yōu)化）
實現(xiàn)分成兩部分
- 面包屑實現(xiàn)
- cli 命令實現(xiàn)
面包屑實現(xiàn)
- 在路由前置守衛(wèi) beforEach 中根據(jù)當(dāng)前路徑在配置文件中匹配到相應(yīng)的數(shù)據(jù)
- 把這些配置存到 vuex
- 在面包屑組件中根據(jù) vuex 中的數(shù)據(jù) v-for 循環(huán)渲染出面包屑
JSON 配置文件
json 配置文件是通過命令生成的，一個配置對象包含 name path clickable isShow 屬性
[
{
"name": "應(yīng)用", // 面包屑名稱（在命令交互中輸入）
"path": "/app", // 面包屑對應(yīng)路徑（根據(jù)文件自動生成）
"clickable": true, // 是否可點擊跳轉(zhuǎn)
"isShow": true // 是否顯示
},
{
"name": "應(yīng)用詳情",
"path": "/app/detail",
"clickable": true, // 是否可點擊跳轉(zhuǎn)
"isShow": true // 是否顯示
}
]
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章標題：為nuxt項目寫一個面包屑cli工具實現(xiàn)自動生成頁面與面包屑配置-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.dlmjj.cn/article/dodhjh.html
