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

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

课程章节： 主页开发

主讲老师：阿莱克斯

课程内容：

1. 【主页开发】热门产品推荐进行Vue改写
2. 开发合作企业组件
3. 配置react-router

课程收获：

新建组件Cooperrative Enterprise

npm install sass sass-loader

完成合作企业 分割成双文件CooperrativeEnterprise.scss / CooperrativeEnterprise.tsx

import y from "@/assets/images/y.png";
import f from "@/assets/images/f.png";
const data = [y, f, y, f];
const CooperativeEnterprise: React.FC = () => {
  return (
    <div className={styles["content"]}>
      <Divider orientation={"left"}>
        <Typography.Title level={3}>合作企业</Typography.Title>
      </Divider>
      <Row>
        {data.map((m): JSX.Element => {
          return (
            <Col span={6}>
              <img style={{ width: 250, height: "auto" }} src={m} alt="" />
            </Col>
          );
        })}
      </Row>
    </div>
  );
};
export default CooperativeEnterprise;

工程化思想分割组件 新建page文件夹 移动对应的内容

安装路由

 npm install react-router-dom @type/react-router-dom

使用Routes包裹Route

      <BrowserRouter>
        <Routes>
          <Route element={<HomePage />} path="/"></Route>
        </Routes>
      </BrowserRouter>

Vue改写 首先是建立两个VUE文件

定义好数据类型后 将数据传入子VUE组件中 通过element组件进行展示

import ProductImage from "@/components/ProductImg.vue";
import { ref } from "vue";
import { productList1 } from "@/mock/2";
type DataProps = {
  size?: "mini" | "big";
  id: string | number;
  price: number | string;
  title: string;
  touristRoutePictures?: any[];
};
const mocks = ref<DataProps[]>(productList1);

综合比较来看 目前在编写不同条件时 Vue稍微麻烦一些 但template隔开js 似乎也更清晰

截图