第三课：基础搭建

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/uwfnq6

本节代码
1dae42f?branch=1dae42f1f01207e92c6c42d3602fc9b530c660c1&diff=split

请发与本节课有关的讨论。

[bruce-zhang932]

老师您好，构建项目之后，自带的页面很多都报模块引入错误？

[aspirantzhang]

这个，两步走。第一步，把node-modules文件夹删了，重新yarn或者npm install一次。第二步，yarn start或者npm run start，开启项目。然后再回来看看这个定义，应该就没问题了。这个是我经常发生，我估计就是某个模块没编译好，没加载出来。

[laofan1ku]

大佬,这个问题咋解决呢?

[laofan1ku]

后缀.ts改为.tsx即可

[littleprince612]

张老师你好，当我在index.tsx中 import React from 'react';时，代码显示灰色，但是项目能正常跑起来，我看视频里面之前也是这样，后面就正常了，不知道是什么原因。

[aspirantzhang]

这个后续课程中会有解释，主要是新版的react 这句话可以不写。先留着吧，后面课程中会一起删除

[ycd12345]

代码中没用React 就会变灰啊

[ycd12345]

ts-node 和 code runner 是这么配置的？我全局安装ts-node 后，用code runner运行一直报错

[ycd12345]

1.全局安装 typescript 和 ts-node
npm i -g typescript ts-node
2.使用命令获取 npm config get prefix 获取 ts-node安装地方 C:\Users\xxx\AppData\Roaming\npm
3.将2获得的路径添加到环境变量path中

[ccccc-fm]

有三点比较疑惑
1：在路由中添加了basic-list，为什么能在菜单栏里直接显示，我之前都是用手动添加的。
2：为什么用card组件包裹table、beforeTableLayout、afterTableLayout区域，能让beforeTableLayout、afterTableLayout底色变白
3：国际化怎么配置，我启动项目后，是中文的，我在config.ts中修改zh-CN为en-US没有效果
~~感谢

[aspirantzhang]

1. umi自己把菜单和路由关联了起来，所以咱们加了路由，菜单就自动出现了，属于umi内置快捷功能。
2. antd的Card组件好像默认背景色就是白的，其它区域背景色默认没有，让它一包裹，就变白了。
3. 国际化在第后续<第十一课：组件优化>有讲解。慢慢看。

[LCZQY]

老师请问下 为什么tsx文件一直有这个提示呢 jsx就不报错 我的vscode 环境设置问题吗

[aspirantzhang]

没有见过这个错误，只能搜索了一下，可以参考：
https://www.cnblogs.com/yezi1116/p/14120406.html
https://www.jianshu.com/p/973cb5cff956
https://www.5axxw.com/questions/content/1qublt

[kingsh2012]

老师你好，请问https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd这个接口项目可以私有部署么，目前接口访问很慢，经常超时。

[aspirantzhang]

可直接看第十六课：跨域代理，可以快速部署接口到本地。

[kingsh2012]

老师，提示这个错误，我没有找到是哪里报错的。

// import React from 'react';
import {Button, Card, Col, Pagination, Row, Space, Table} from 'antd';
import {useRequest} from "umi"
import {PageContainer} from '@ant-design/pro-layout';
import styles from './index.less';

function Index() {

  const init = useRequest("https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd");
  console.log(init)

  const searchLayout = () => {};

  const beforeTableLayout = () => {
    return (
      <Row>
        <Col xs={24} sm={12}>
          ...
        </Col>
        <Col className={styles.tableToolbar} xs={24} sm={12}>
          <Space>
            <Button type="primary">Add</Button>
            <Button type="primary">Add</Button>
          </Space>
        </Col>
      </Row>
    );
  };

  const afterTableLayout = () => {
    return (
      <Row>
        <Col xs={24} sm={12}>
          ...
        </Col>
        <Col className={styles.tableToolbar} xs={24} sm={12}>
          <Pagination />
        </Col>
      </Row>
    );
  };

  return (
    <PageContainer>
      {/*{searchLayout()}*/}
      <Card>
        {beforeTableLayout()}
        <Table dataSource={init?.data?.dataSource} columns={init?.data?.layout?.tableColumn} pagination={false}/>
        {afterTableLayout()}
      </Card>
    </PageContainer>
  );
}

export default Index;

[aspirantzhang]

你这个代码是介于第三节到第四节之间，第四节课从第7分钟开始对这块有介绍
columns={init?.data?.layout?.tableColumn.filter((item) => item.hideInColumn !== true)}

[Feb-14and16]

老师，请问这种情况怎末解决呀？

[Gip886]

暂时不用解决，ts正常的语法检查，建议要声明变量类型

[bx-ui]

老师，麻烦问下，为什么npx create-umi 后，然后启动，登录会报405的错误呢

[Feb-14and16]

可以检查一下接口，或者后台api加断点看一下，是不是正确访问了登陆的接口

[pengjie-chen]

为什么我的样式不生效，怎么改padding和居右都不好使

[Gip886]

重启下？

[pengjie-chen]

重启下？有试过重启，但是现在padding依旧不生效，还是粘在一起

[aspirantzhang]

css样式名写错了。Bar 和 bar

[aspirantzhang]

这块很容易打错，后来我明白了，这块不应该用驼峰，css文件中一律用小写+下划线来命名样式 .table-toolbar {xxxx}
然后使用时就是 styles['table-toolbar']