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）點擊一個菜單，如果要在當(dāng)前頁面點擊打開一個新頁面，并且保持當(dāng)前菜單高亮，那么就要在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)文章
Vue 使用v-model實現(xiàn)控制子組件顯隱效果
v-model 可以實現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了Vue+Vant實現(xiàn)頂部搜索欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例
這篇文章主要介紹了Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue中created和mounted區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家介紹了Vue的計算屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理
這篇文章主要介紹了理解Vue2.x和Vue3.x的自定義指令的用法及鉤子函數(shù)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2021-09-09
通過PPTXjs插件,實現(xiàn)PPTX文件在線預(yù)覽,需下載PPTXjs,將其引入HTML頁面,并編寫相應(yīng)的HTML和JS代碼,如果是移動端還需調(diào)整div大小,這是一種便捷的前端PPTX轉(zhuǎn)HTML技術(shù),適合網(wǎng)頁展示使用2024-09-09
從零開始學(xué)Vue，通過一些例子，讓大家概覽一些基本的概念和特性，理解Vue的基礎(chǔ)知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue echarts實現(xiàn)綁定事件和解綁事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03