优惠券项目，部分实战写法

路由的拆分，每个项目单独设置路由，最终合并到一起进行挂载
把原本写在一个路由文件里的一大坨路由代码，提取出来，单独放一个文件，如
原本以下代码都在router目录里的index.js里面，现在单独提取出来，放到一个新的文件里面
新建一个jishu.js的路由文件，导出一个数组，数组里面放原来提取过来的一系列对象。

import Layout from "@/views/layout";//下面要用的，必须依赖的部分，也带过来

export const jishu = [
    {
      path: "/jishu",
      component: Layout,
      redirect: "/jishu/admin",
      name: "Jishu",
      meta: { title: "小技术", icon: "eye-open" },
      alwaysShow: true,
      children: [
        {
          path: "chat",
          name: "chat",
          component: () => import("@/views/jishu/chat"),
          meta: { title: "在线聊天", icon: "user" },
        },
          {
            path: "admin",
            name: "admin",
            component: () => import("@/views/jishu/admin"),
            meta: { title: "管理员", icon: "user" },
          },
      ],
    },
]

//然后再原来的路由首页文件里，导入这个数组，再在需要挂载的地方扩展开来即可。
import {jishu} from "./jishu.js"

[
{
    path: "/login",
    component: () => import("@/views/login/index"),
    hidden: true,
  },

...jishu,

 { path: "*", redirect: "/404", hidden: true },

]

//使用数组的展开运算符...把数组内容展开即可。

v-for循环里面，获取最后一个item，给最后一个item加样式的写法
<div
       v-for="(item,index) in tableData"
       :key="index"
      :class="index===tableData.length-1  ?  'last-item-class': ''  "
>
        <span>{{item.title}}</span>
</div>
最后一个item就会加上last-item-class这样一个类

//计算属性，可以返回一个对象
comPrice() {
      let price = 0;
      this.orderItems.forEach(item => {
        price += item.salePrice * item.buyNumber;
      });
      let tempAllPrice =
        price +
        this.freightPrice -
        this.defaultCouponAmount.couponAmountAll -
        this.sendFee.sendFeeAll;

      return {
        goodsPrice: price.toFixed(2),
        allPrice: tempAllPrice > 0 ? tempAllPrice : 0
      };
    },
//调用的地方，只需使用对象.属性的形式，如
<span class="red">{{comPrice.goodsPrice}} 福豆</span>

路由懒加载的写法
官方文档里面，需要先引入组件，再写入路由配置里，如下
const Foo = () => import('./Foo.vue')
{ path: '/foo', component: Foo }
这种写法，如果很多的话，前后间隔很大，会看起来很混乱，不利于检查问题
改良如下，上面定义一个引入组件的方法，下面直接使用方法引入即可
const __import__ = file => () => import(`@/views/${file}.vue`);
{path:"/",component:__import__("home")}

或者直接这样写，更简洁直观（注意，箭头后面没有大括号）
{ path: '/foo', component: () => import('./Foo.vue')}
{path: 'reg',component: () => import('../views/lifepayment/reg.vue')},