nuxt.js框架使用小結(jié)
1、這種框架只要頁面有一個地方錯，都會出現(xiàn)404或者嚇人的報錯界面
如表單的prop屬性，在data函數(shù)return對象里面該字段找不到或者不一致，就會報404。
2、使用字典，對字典進行翻譯
在plugins/methods.js文件里面，加入
// 字典翻譯
selectDictLabel(datas, value, k = 'value', v = 'name') {
var actions = []
Object.keys(datas).some(key => {
if (datas[key][k] == '' + value) {
actions.push(datas[key][v])
return true
}
})
return actions.join('')
},在vue頁面引用：
<el-table-column label="信息" min-width="170">
<template slot-scope="{ row }">
<el-popover
placement="top-start"
width="100"
trigger="hover"
>
<div v-for="item in row.batteryList" :key="item.id">
{{ dictArrStr.BATTERY_TYPE_str }}
{{ item.num }}
</div>
<el-button size="small" type="text" slot="reference">{{ row.num || '-' }}</el-button>
</el-popover>
</template>
</el-table-column>data() {
return {
dictArr: {
BATTERY_TYPE: [], // 類型
TRADE_STATUS_RECOVERY:[],
},
dictArrStr: {
BATTERY_TYPE_str: '', // 類型翻譯
TRADE_STATUS_RECOVERY_str: '',
}
}
},methods函數(shù)里面：
_loadData() {
// 調(diào)用字典列表接口
this.getDictData('TRADE_STATUS_RECOVERY,BATTERY_TYPE')
},
getDictData(discts) {
// 獲取字典列表接口
Portal.dictTypes(discts).then((resp) => {
this.dictArr = resp.data
this.dictArrStr.BATTERY_TYPE_str = this.methods.selectDictLabel(this.dictArr.BATTERY_TYPE, row.batteryType)
})
},3、添加側(cè)邊欄菜單
1）在pages里面新建文件夾A和相關(guān)子文件并命好名A1，A2。
2）在assets/js/centerMenu.js，文件加路由。
evalbuy: [
{
"entity": {
"id": 1,
"parentMenuId": 0,
"name": "/A/A1", // 路由地址
"icon": "el-icon-rank",
"alias": "菜單名稱",
"state": "ENABLE",
"sort": 2,
"value": null,
"type": "NONE",
"discription": "",
"createUserId": 1
},
"childs": null
},
}4、如何使用Layout
1）在layouts文件夾里面，建立一個layout文件，名字自己可以是ALayout.vue,
然后在文件里面找到data方法，在這個地方修改：
data() {
????return {
??????modulesName: "名字",
??????moduleMenu: "evalbuy"???? // centerMenu.js文件里面找到這個關(guān)鍵字段，渲染菜單
????}
??}2）點擊一個菜單，如果要在當前頁面點擊打開一個新頁面，并且保持當前菜單高亮，那么就要在layout/center/siderbar.vue頁面里設(shè)置。
activeMenu() {
// 其他不在左側(cè)顯示的路由菜單，但是跳轉(zhuǎn)后的頁面，在左側(cè)想要有一個對應(yīng)菜單高亮選中顯示。
if (this.$route.path.includes('/center/evalsell/initiateRecyclepic')) {
this.active = '/center/evalsell/initiateRecycle' // 高亮菜單
} else if (this.$route.path.includes('/center/evalsell/initiateTradepic')) {
this.active = '/center/evalsell/initiateTrade' // 高亮菜單
} else {
this.active = this.$route.path // 刷新頁面顯示高光選中
}
},5、TDK：是網(wǎng)站的標題（title）、描述（description）和關(guān)鍵詞（keyword）的英文字母縮寫
使用tdk，是因為tdk有利于頁面的SEO優(yōu)化。搜索引擎蜘蛛爬取你的網(wǎng)站之后最先看到的就是TDK
設(shè)置tdk的兩種方式：
1）在nuxt.config.js設(shè)置全局的head的TKD
2）可以在單獨頁面設(shè)置head的TKD：在xxx.vue文件中設(shè)置 hid: 'name’表示唯一標識。而且設(shè)置局部頁面的hid: 'name’，會自動覆蓋全局的hid: ‘name’。
6、使用iconfont
1) 去iconfont下載iconfont.js。選擇symbol，下載至本地。
2) 在assets目錄中新建font文件夾--iconfont文件夾，文件夾內(nèi)放入下圖文件。
3、在assets目錄的base.css里面引入：@import '../fonts/iconfont/iconfont.css';
4、在頁面使用：
<i class="iconfont icon-caidanshouqi"></i>
到此這篇關(guān)于nuxt.js框架使用小結(jié)的文章就介紹到這了,更多相關(guān)nuxt.js框架使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
WebSocket就誕生了,它最大特點就是服務(wù)器可以主動向客戶端推送信息,客戶端也可以主動向服務(wù)器發(fā)送信息,是真正的雙向平等對話,下面這篇文章主要給大家介紹了關(guān)于Vue項目中Websocket使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue中搭配Bootstrap實現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時間，可以直接搭配vue使用2022-11-11
這篇文章主要介紹了vue動態(tài)添加store、路由和國際化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3渲染器將虛擬DOM轉(zhuǎn)為真實DOM,支持高效更新與跨平臺；渲染函數(shù)（h()）替代JSX,更靈活,與CompositionAPI結(jié)合可優(yōu)化性能,提升復(fù)雜場景下的開發(fā)效率與應(yīng)用性能2025-08-08
本文主要介紹了vue router-view嵌套顯示，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了如何利用vue3編寫一個有趣的牛馬時鐘并集成到小程序,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2025-07-07
vue2.0 和 animate.css的結(jié)合使用
animate.css是一款前端動畫庫，相似的有velocity-animate。這篇文章給大家介紹vue2.0 和 animate.css的結(jié)合使用，需要的朋友參考下吧2017-12-12
前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
文章分享了作者在處理多個form表單和動態(tài)select框下拉選擇項時遇到的問題和解決方案,作者首先提到使用空數(shù)組塞值不方便,于是將options配置為對象屬性值,以簡化操作,作者希望自己的經(jīng)驗?zāi)芙o大家?guī)韰⒖?并鼓勵大家支持腳本之家2026-02-02
這篇文章主要介紹了vue實現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11