Vue3+ts一些小知识点

Vue3+ts一些小知识点

1.@路径引入

import { GetSystemLogById } from "@/api/hole";

这里的​​@​​​ 是 ​​webpack​​设置的路径别名。

这东西在​​vue​​​标准模板里面的​​build/webpack.base.conf​​这个文件里面。

resolve: {
// 路径别名
alias: {
'@': resolve('src'),
'vue$': 'vue/dist/vue.esm.js'
}
},

就是说​​@​​​这东西代表着到​​src​​这个文件夹的路径

另外typescript也可以配置这个东西(​​tsconfig.json​​)。

"paths": {
      "@/*": [
        "src/*"
      ],
      "concrete": [
        "../concrete/src"
      ]
    },

2.异步请求

export async function GetSystemLogById(id: string): Promise<ISystemLogData> {
  const res = await request({
    url: `/v1/sys-chart/${id}`,
    method: 'get',
  })
  return res.data as ISystemLogData
}

注明传参类型和返回值类型。

url请求可以用插入模板字符串的格式 实现restful 风格的id。

返回类型可以断言为​​ISystemLogData​​，便于后序代码的提示和编写。

3.路由跳转

一些属性如何配置

{
            path: 'list',
            name: 'Hole List',
            meta: {
              title: '全部节点',
              icon: 'fas fa-bars',
              omitSub: true,
              attributes: {
                conditions: [
                  [{ key: 'role', value: 'admin' }]
                ]
              }
            },
            component: () => import(/* webpackChunkName: "admin" */ 'views/hole/List.vue'),
            children: [
              {
                path: 'sys-chart/:id',
                name: 'HoleChartInfo',
                props: true,
                component: () => import(/* webpackChunkName: "admin" */ '@/views/hole/ChartInfo.vue'),
                meta: {
                  title: '系统状态',
                  icon: 'fas fa-bars',
                  attributes: {
                    conditions: [
                      [{ key: 'role', value: 'admin' }]
                    ]
                  }
                }
              }
            ]
          },

`