【学习打卡】第5天 实战旅游项目/Vue改写

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 主页开发

主讲老师：阿莱克斯

课程内容：

1. 【主页开发】Header、Footer
2. 【项目重构】组件化思想实践
3. 修改相对路径改为’@’
4. 【主页开发】走马灯与侧边栏多重菜单

课程收获：

引入antd图标库

import { GlobalOutlined } from "@ant-design/icons";
// 并使用
          <DropdownB
            overlay={
              <Menu
                items={[
                  { key: "1", label: "中文" },
                  { key: "2", label: "English" },
                ]}
              />
            }
            icon={<GlobalOutlined />}
            style={{ marginLeft: 15 }}
          >
            语言
          </DropdownB>

使用button组件

          <Button.Group>
            <Button>注册</Button>
            <Button>登陆</Button>
          </Button.Group>

安装插件 可以像vuecli中的config一样配置

cnpm install --save react-scripts @craco/craco

根目录下新建 craco.config.js

// 添加自定义webpack配置
const path = require("path");
module.exports = {
  webpack: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

为页面增加content组件样式

.page-content {
  width: 1230px;
  margin: 0 auto;
  min-height: 70vh;
}

使用基于flex的Grid组件布局

制作跑马灯

    <AntdCarousel autoplay className={styles.slider}>
      {/*使用循环遍历图片*/}
      {data.map((m) => {
        return (
          <Image alt="图片" src={require(`@/assets/images/${m}.jpg`)}></Image>
        );
      })}
    </AntdCarousel>

使用Vue复刻

依赖

npm install @types/node element-plus sass @element-plus/icons-vue

截图