欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react項目引入antd框架方式以及遇到的一些坑

 更新時間：2023年03月28日 14:45:16   作者：我不淑女girl  
這篇文章主要介紹了react項目引入antd框架方式以及遇到的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react項目引入antd框架及遇到的一些坑

1，用create-react-app創(chuàng)建項目

create-react-app demo //demo為項目名稱

2.在項目中安裝antd

npm install -D antd

3.安裝 babel-plugin-import

npm install babel-plugin-import --save

4.修改package.json文件，在根目錄下

  "babel": {
    "plugins": [
      [
        "import",
        {
          "librayName": "antd",
          "style": true
        }
      ]
    ]
  }

5.在 "src/App.js"文件下使用antd

這時候樣式是亂的

需要在App.css（即使用antd的這個文件的css文件）中引入antd.css文件

@import '~antd/dist/antd.css';

這樣就一切正常啦

react的antd框架搭建基本布局

1.創(chuàng)建項目文件夾

并安裝react-typecript項目

命令如下

  • mkdir react-antd
  • cd react-antd
  • yarn create @umijs/umi-app  如果創(chuàng)建失敗可以用 cnpm create @umijs/umi-app 命令
  • yarn  如果用cnpm安裝 cnpm install

2.運(yùn)行antd項目

命令 npm start 

在瀏覽器輸入 http://localhost:8000 顯示如下，即安裝成功

3.用vs code編輯器打開項目

初始化項目目錄如下

4.編寫基本布局

創(chuàng)建layouts目錄，新建index.tsx和index.less文件，配置路由文件

  • mkdir layouts
  • cd layouts
  • mkdir index.tsx
  • mkdir index.less

項目/src/layouts/index.tsx代碼段如下

import { Layout } from 'antd';
 
const { Header, Footer, Sider, Content } = Layout;
 
export default function layout(props: any) {
  return (
    <>
      <Layout>
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

項目/.umirc.ts代碼段如下

import { defineConfig } from 'umi';
 
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: false,
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/',
          component: '@/layouts/index',
        },
      ],
    },
  ],
  fastRefresh: {},
});

編寫文件如上兩圖，瀏覽器顯示效果如下

4.在項目/src目錄里創(chuàng)建global.css全局css文件

將#root的高度改為100%，代碼如下

#root {
    height: 100%;
}

5.編寫項目/src/layouts/index.tsx文件如下

import { Layout } from 'antd';
import './index.less'
 
const { Header, Footer, Sider, Content } = Layout;
 
export default function layout(props: any) {
  return (
    <>
      <Layout className="layout-main">
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

引入index.less文件，在最外層Layout組件添加類layout-main

index.less編寫如下

.layout-main {
  height: 100%;
}

查看瀏覽器顯示如下，基本的后臺布局完成

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • react-router-dom之異步加載路由方式

    react-router-dom之異步加載路由方式

    這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • 詳解React Native與IOS端之間的交互

    詳解React Native與IOS端之間的交互

    React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，支持iOS和安卓兩大平臺。本文將介紹React Native與IOS端之間的交互。
    2021-06-06
  • react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄

    react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄

    這篇文章主要介紹了react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • React Native之TextInput組件解析示例

    React Native之TextInput組件解析示例

    本篇文章主要介紹了React Native之TextInput組件解析示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 使用VScode 插件debugger for chrome 調(diào)試react源碼的方法

    使用VScode 插件debugger for chrome 調(diào)試react源碼的方法

    這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • React-Hook中使用useEffect清除定時器的實(shí)現(xiàn)方法

    React-Hook中使用useEffect清除定時器的實(shí)現(xiàn)方法

    這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時器，需要的朋友可以參考下
    2022-11-11
  • react lazyLoad加載使用詳解

    react lazyLoad加載使用詳解

    lazy是React提供的懶（動態(tài)）加載組件的方法，React.lazy()，路由組件代碼會被分開打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能
    2023-03-03
  • 通過示例源碼解讀React首次渲染流程

    通過示例源碼解讀React首次渲染流程

    這篇文章主要為大家通過示例源碼解讀React的首次渲染流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • React組件中使用JSON數(shù)據(jù)文件的方法詳解

    React組件中使用JSON數(shù)據(jù)文件的方法詳解

    要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個常見的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下
    2024-01-01
  • 利用CDN加速react webpack打包后的文件詳解

    利用CDN加速react webpack打包后的文件詳解

    下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論