本文阅读量次

1. Arco-Design-Pro 学习¶

1.1 登录页¶

通过如下控制 banner 部分在小鱼 screen-lg 的屏幕上时显示占用 25%，正常是固定宽度 550px

<style lang="less" scoped>
  // responsive
  @media (max-width: @screen-lg) {
    .container {
      .banner {
        width: 25%;
      }
    }
  }

  ...

  .container {
    display: flex;
    height: 100vh;

    .banner {
      width: 550px;
      background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
    }
</style>

1.2 absolute 下再套 absolute 会怎样渲染？¶

1.3 text-align 属性¶

1.4 Arco 布局相关的组件有¶

<a-layout>
<a-layout-header>
<a-layout-content>
<a-layout-footer>
<a-layout-sider>
<a-space>
:align
:direction
:size
:wrap
:flill

栅格相关 * <a-row> - :gutter - justify 水平布局 - align 垂直布局 * <a-col> - :span - :offset - :order 顺序 - :xs, :sm, :md, :lg, :xl, :xxl 响应式布局\ - flex * <a-grid> * <a-grid-item>

<a-typography>
<a-typography-title>
<a-typography-paragraph>
copyable, editable
:ellipsis
<a-typography-text>
underline, code, bold, mark

1.5 其它相关¶

<a-result>
<a-drawer>
<a-affix>

1.6 :deep 为类是什么¶

.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

1.7 CSS 变量 `var(--arcoblue-6)`¶

1.8 可以直接引用图片资源¶

  import bannerImage from '@/assets/images/login-banner.png';

1.9 组件及文件命名¶

文件使用: login-form.vue
组件使用:

¶

font-size, line-weight, font-weight 配合起来调整文字大小的展示

1.11 form 相关的¶

<a-form>
<a-form-item>
<a-input>
<a-input-password>
<a-checkbox>
<a-link>

1.12 Vue 带 `:` 传进去和不带传进去有什么不一样¶

      <a-form-item
        field="username"
        :rules="[{ required: true, message: $t('login.form.userName.errMsg') }]"
        :validate-trigger="['change', 'blur']"
        hide-label
        :size="large"
      >

1.13 数据转换¶

1.14 Not-Found 页里的负 margin 作用是什么？¶

<style scoped lang="less">
  .content {
    // padding-top: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -95px;
    margin-top: -121px;
    text-align: center;
  }
</style>

看起来是需要个垂直、水平居中，为什么不用 flex, 而用 absolute+百分比

1.15 `RouteRecordRaw` 是什么¶

import type { RouteRecordRaw } from 'vue-router';


export const REDIRECT_MAIN: RouteRecordRaw = {
  path: '/redirect',
  name: 'redirectWrapper',
  component: DEFAULT_LAYOUT,
  meta: {
    requiresAuth: true,
    hideInMenu: true,
  },
  children: [
    {
      path: '/redirect/:path',
      name: REDIRECT_ROUTE_NAME,
      component: () => import('@/views/redirect/index.vue'),
      meta: {
        requiresAuth: true,
        hideInMenu: true,
      },
    },
  ],
};

1.16 `useRouter()` 和 `useRoute()` 的区别¶

1.17 `AppRouteRecordRaw` 是什么?¶

1.18 路由的处理¶

1.19 路由守护¶

1.20 这一段代码是什么意思¶

路径: src\router\routes\types.ts

export type Component<T = any> =
  | ReturnType<typeof defineComponent>
  | (() => Promise<typeof import('*.vue')>)
  | (() => Promise<T>);

1.21 import.meta 是如何解释¶

路径: src\router\routes\index.ts

const modules = import.meta.glob('./modules/*.ts', { eager: true });
const externalModules = import.meta.glob('./externalModules/*.ts', {
  eager: true,
});

function formatModules(_modules: any, result: RouteRecordNormalized[]) {
  Object.keys(_modules).forEach((key) => {
    const defaultModule = _modules[key].default;
    if (!defaultModule) return;
    const moduleList = Array.isArray(defaultModule)
      ? [...defaultModule]
      : [defaultModule];
    result.push(...moduleList);
  });
  return result;
}

作用参考这里: https://vitejs.cn/vite3-cn/guide/features.html#glob-import ⧉

1.22 菜单的高亮是通过 `name` 区分的¶

export default {
  path: 'https://qianbitou.net',
  name: 'qbt',
  meta: {
    locale: 'menu.qbt',
    icon: 'icon-question-circle',
    requiresAuth: true,
    order: 10,
  },
};

export default {
  path: 'https://arco.design/vue/docs/pro/faq',
  name: 'faq',
  meta: {
    locale: 'menu.faq',
    icon: 'icon-question-circle',
    requiresAuth: true,
    order: 9,
  },
};

1.23 VueUse 的使用¶

1.23.1 useToggle¶

  const toggleTheme = useToggle(isDark);

1.23.2 useClipboard¶

1.23.3 useStorage¶

1.23.4 useDebounceFn¶

1.23.5 useDark¶

1.23.6 useFullscreen¶

1.24 PageLayout 的详细解释¶

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in" appear>
      <component
        :is="Component"
        v-if="route.meta.ignoreCache"
        :key="route.fullPath"
      />
      <keep-alive v-else :include="cacheList">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

keep-alive 是做什么用的

1.25 template 中的 ref="xxx" 具体是什么作用？¶

<template>
  <div class="tab-bar-container">
    <a-affix ref="affixRef" :offset-top="offsetTop">
      <div class="tab-bar-box">
        <div class="tab-bar-scroll">
          <div class="tags-wrap">
            <tab-item
              v-for="(tag, index) in tagList"
              :key="tag.fullPath"
              :index="index"
              :item-data="tag"
            />
          </div>
        </div>
        <div class="tag-bar-operation"></div>
      </div>
    </a-affix>
  </div>
</template>

1.26 `tag-bar-operation` 是做什么用的¶

<div class="tag-bar-operation"></div>
      </div>

1.27 这个 TS/JS 的语法如何解释¶

路径: src\components\global-setting\block.vue

    appStore.updateSettings({ [key]: value });

1.28 `Object.entries` 的使用¶

1.29 `<a-space>` 会自动在下一级插入 `<a-space-item>` ??¶

源码里是没有 space-item 的，但最终渲染出来的结果里有

<template>
  <div class="container">
    <Breadcrumb
      :items="[
        'menu.visualization',
        'menu.visualization.multiDimensionDataAnalysis',
      ]"
    />
    <a-space direction="vertical" :size="16" fill>
      <a-grid :cols="24" :col-gap="16" :row-gap="16">
        <a-grid-item
          :span="{ xs: 24, sm: 24, md: 24, lg: 18, xl: 18, xxl: 18 }"
        >
          <DataOverview />
        </a-grid-item>
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 6, xl: 6, xxl: 6 }">
          <UserActions style="margin-bottom: 16px" />
          <ContentTypeDistribution />
        </a-grid-item>
      </a-grid>
      <DataChainGrowth />
      <ContentPublishingSource />
    </a-space>
  </div>
</template>