第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

【學(xué)習(xí)打卡】第5天 實戰(zhàn)旅游項目/Vue改寫

標(biāo)簽:
Html5

学习打卡】第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
截图

图片描述
图片描述

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消