从零打造企业级电商后台管理系统之通用组件部分的开发(更新 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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值