1. As long as there is an error on the page in this framework, 404 or a scary error interface will appear.
For example, if the prop attribute of the form cannot be found or is inconsistent in the return object of the data function , 404 will be reported.
2. Use a dictionary to translate the dictionary.
In the plugins/methods.js file, add
// dictionary translation
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('')
},
Quoted on the vue page:
<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: [], // type
TRADE_STATUS_RECOVERY:[],
},
dictArrStr: {
BATTERY_TYPE_str: '', // type translation
TRADE_STATUS_RECOVERY_str: '',
}
}
},
Inside the methods function:
_loadData() {
// Call the dictionary list interface
this.getDictData('TRADE_STATUS_RECOVERY,BATTERY_TYPE')
},
getDictData(discts) {
// Get dictionary list interface
Portal.dictTypes(discts).then((resp) => {
this.dictArr = resp.data
this.dictArrStr.BATTERY_TYPE_str = this.methods.selectDictLabel(this.dictArr.BATTERY_TYPE, row.batteryType)
})
},
3. Add a sidebar menu.
1) Create a new folder A and related sub-files in pages and name them A1, A2.
2) In assets/js/centerMenu.js, add routing to the file.
evalbuy: [
{
"entity": {
"id": 1,
"parentMenuId": 0,
"name": "/A/A1", // routing address
"icon": "el-icon-rank",
"alias": "menu name",
"state": "ENABLE",
"sort": 2,
"value": null,
"type": "NONE",
"discription": "",
"createUserId": 1
},
"childs": null
},
}
4. How to use Layout
1) In the layouts folder, create a layout file whose name can be ALayout.vue,
Then find the data method in the file and modify it here:
data() {
return {
modulesName: "Name",
moduleMenu: "evalbuy" // Find this key field in the centerMenu.js file and render the menu
}
}
2) Click on a menu. If you want to open a new page by clicking on the current page and keep the current menu highlighted , you must set it in the layout/center/siderbar.vue page.
activeMenu() {
// Other routing menus that are not displayed on the left, but the pages after the jump, want to have a corresponding menu highlighted on the left.
if (this.$route.path.includes('/center/evalsell/initiateRecyclepic')) {
this.active = '/center/evalsell/initiateRecycle' // highlight menu
} else if (this.$route.path.includes('/center/evalsell/initiateTradepic')) {
this.active = '/center/evalsell/initiateTrade' // highlight menu
} else {
this.active = this.$route.path // Refresh the page to display the highlighted selection
}
},
5. TDK: It is the English abbreviation of the website title (title), description (description) and keywords (keyword).
Using tdk is because tdk is conducive to the SEO optimization of the page. The first thing search engine spiders see after crawling your website is TDK
Two ways to set tdk:
1) Set the TKD of the global head in nuxt.config.js
2) You can set the TKD of the head on a separate page: set hid in the xxx.vue file: 'name' means a unique identifier. And setting the hid: 'name' of the local page will automatically override the global hid: 'name'.
6. Use icons.
1) Go to iconfont to download iconfont.js. Select symbol and download it locally.
2) Create a new font folder --iconfont folder in the assets directory, and put the following file in the folder.
3. Introduce in the base.css of the assets directory: @import '../fonts/iconfont/iconfont.css';
4. Use on the page:
<span><i class="iconfont icon-caidanshouqi"></i></span>
Management background:
:label="$t('cms.announced.fields.title')", how to get the Chinese label?
in the system