Vue3+ts一些小知识点

Posted 2022-11-27 Harris-H

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' ]
                    ]
                  
                
              
            ]
          ,

`