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.運行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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06使用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-09React-Hook中使用useEffect清除定時器的實現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時器),主要介紹了useEffect的功能以及使用方法,還有如何使用他清除定時器,需要的朋友可以參考下2022-11-11React組件中使用JSON數(shù)據(jù)文件的方法詳解
要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個常見的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2024-01-01