从零打造企业级电商后台管理系统之通用组件部分的开发(更新 ing)

1 通用布局的开发(1)

img_6c54db694eee50f79b5489d44592a78b.png
初始项目结构

img_30ac7b194a241e582803aa7771dba268.png
app.jsx

img_53284522c9ccf3cd675be5463b1f6704.png
index.jsx
  • 集成 Boostrap


    img_ac388fb1bbbde15a94583723aa949f6b.png
    直接引用此 URL

    img_c82a34305a8dffa26fe2e75bdcbef39b.png

    img_6b1d689b709ce4d8d5cd76a5d7cd5cd8.png

    直接将其在全局安装即可


    img_a58412a8711d5ae5362f0512451ace79.png
  • 引入字体样式,


    img_66b913ed0db09921837c0fb9df7c22c6.png

    img_7a34c952eff1dee68927ac11e0a4bb1c.png
    使用并全部改为 http 站点

    于是 yarn 也可以卸载原先安装的了


    img_bc16a0a2b668f33d6b3b17fdcc0c6573.png
  • 测试样式是否引入成功
    img_8f31e2ebf1bd1a495303aeaa00662321.png

    img_85b148e17046079f4f6267cddf68fcc0.png
    表明成功

    引入皮肤
    https://webthemez.com/demo/insight-free-bootstrap-html5-admin-template/assets/css/custom-styles.css
    img_c0bbbee05541622e91b8f7312d43fc3f.png
    定位此链接

    img_df0ab461b207bc46ed774b97ca002142.png
    格式化此 css 文件并 CV 大法

    img_c19e719f32144372a0655db13f85aced.png
    新建 index.css 粘贴入皮肤代码,并引入到 index.jsx

    新建头部及侧边导航目录等文件
    img_2277ecaadf9c5aba833e16b965d460ce.png

    css文件复制得一份 theme.css
    img_a67214e235355ec862d2823be8b8b9a3.png

2 通用布局的开发(2)

发布了165 篇原创文章 · 获赞 35 · 访问量 18万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览