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页面引用：

           

             

           

  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、在页面使用：

管理后台：

:label="$t('cms.announced.fields.title')"，是如何获得label中文的？

在系统设置/国际化配置模块。