nuxt.js框架使用小结
更新时间：2023年08月10日 15:12:04 作者：程序媛之博客
本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1、这种框架只要页面有一个地方错，都会出现404或者吓人的报错界面
如表单的prop属性，在data函数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函数里面：
_loadData() {
// 调用字典列表接口
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、添加侧边栏菜单
1）在pages里面新建文件夹A和相关子文件并命好名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文件里面找到这个关键字段，渲染菜单
}
}2）点击一个菜单，如果要在当前页面点击打开一个新页面，并且保持当前菜单高亮，那么就要在layout/center/siderbar.vue页面里设置。
activeMenu() {
// 其他不在左侧显示的路由菜单，但是跳转后的页面，在左侧想要有一个对应菜单高亮选中显示。
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：是网站的标题（title）、描述（description）和关键词（keyword）的英文字母缩写
使用tdk，是因为tdk有利于页面的SEO优化。搜索引擎蜘蛛爬取你的网站之后最先看到的就是TDK
设置tdk的两种方式：
1）在nuxt.config.js设置全局的head的TKD
2）可以在单独页面设置head的TKD：在xxx.vue文件中设置 hid: 'name’表示唯一标识。而且设置局部页面的hid: 'name’，会自动覆盖全局的hid: ‘name’。
6、使用iconfont
1) 去iconfont下载iconfont.js。选择symbol，下载至本地。
2) 在assets目录中新建font文件夹--iconfont文件夹，文件夹内放入下图文件。
3、在assets目录的base.css里面引入：@import '../fonts/iconfont/iconfont.css';
4、在页面使用：
<i class="iconfont icon-caidanshouqi"></i>
到此这篇关于nuxt.js框架使用小结的文章就介绍到这了,更多相关nuxt.js框架使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
WebSocket就诞生了,它最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,下面这篇文章主要给大家介绍了关于Vue项目中Websocket使用的相关资料,需要的朋友可以参考下2023-02-02
日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间，可以直接搭配vue使用2022-11-11
这篇文章主要介绍了vue动态添加store、路由和国际化配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
Vue3渲染器将虚拟DOM转为真实DOM,支持高效更新与跨平台；渲染函数（h()）替代JSX,更灵活,与CompositionAPI结合可优化性能,提升复杂场景下的开发效率与应用性能2025-08-08
本文主要介绍了vue router-view嵌套显示，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要为大家详细介绍了如何利用vue3编写一个有趣的牛马时钟并集成到小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2025-07-07
animate.css是一款前端动画库，相似的有velocity-animate。这篇文章给大家介绍vue2.0 和 animate.css的结合使用，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了前端vue中实现文件下载的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
文章分享了作者在处理多个form表单和动态select框下拉选择项时遇到的问题和解决方案,作者首先提到使用空数组塞值不方便,于是将options配置为对象属性值,以简化操作,作者希望自己的经验能给大家带来参考,并鼓励大家支持脚本之家2026-02-02
这篇文章主要介绍了vue实现广告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论