基于 AdminLTE 开发React Admin

最新推荐文章于 2024-08-10 07:35:27 发布

Hank-17

最新推荐文章于 2024-08-10 07:35:27 发布

阅读量2.9k

点赞数 1

文章标签： AdminLTE React AdminLTE-React

本文链接：https://blog.csdn.net/zddog/article/details/85720483

版权

这篇博客讲述了如何基于AdminLTE v3和Bootstrap 4，结合React来开发一个后台管理界面。首先创建React基础项目，然后将AdminLTE的静态资源引入到项目中。接着在index.html中引入必要的CSS和JS文件，并对body元素添加样式。进一步地，创建Header组件，从AdminLTE源码中复制并转换HTML代码以适应React。最后逐步添加aside、content-container和footer组件，完成React AdminLTE界面的构建。

摘要由CSDN通过智能技术生成

使用AdminLTE的样式和结构，自己在划分不同的组件。

先创建基础项目

create-react-app react-admin

获取AdminLTE的源码(v3支持 bootstrap4)

AdminLTE 3 Alpha-2

~~把AdminLTE源码dist目录下的静态资源拷贝到react-admin项目的public目录下。~~

dist目录下的img拷贝到src/assets下。

dist/js/plugins目录下的文件都是空文件，需要从AdminLTE根目录的plugins目录下拷贝对应的文件！

完成后的react-admin目录

接下来在index.html文件中引入AdminLTE的css文件和js文件。

    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="%PUBLIC_URL%/js/plugins/font-awesome/css/font-awesome.min.css"
    />
    <!-- IonIcons -->
    <link
      rel="stylesheet"
      href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
    />
    <!-- Theme style -->
    <link rel="stylesheet" href="%PUBLIC_URL%/css/adm