Slog93_使用React框架进行前端开发5

·  阅读 196

ArthurSlog

  • ArthurSlog

  • SLog-93

  • Year·1

  • Guangzhou·China

  • October 8th 2018

关注微信公众号“ArthurSlog”
微信扫描二维码,关注我的公众号

善为士者 不武 善战者 不怒 善胜敌者 不与 善用人者 为之下 是谓不争之德 是谓用人之力 是谓配天古之极


开发环境MacOS(Mojave 10.14 (18A391))

信息源

开始编码

  • 之前的页面样式 是直接手写的

  • 文件代码一旦多起来 开发维护就不方便了

  • 本篇来引入less样式预编译器 来升级一下开发工具

  • 之前采用react官方的快速开发脚手架工具

  • 现在升级为使用 webpack项目构建工具

  • 简洁的使用方法 https://webpack.jakoblind.no/

  • 勾选 ‘React‘、 ‘Less’、 ‘React hot loader’,之后 点击‘Get your project as a zip!’ 下载配置好的工程文件

  • 解压之后,切换至文件路径下,执行:

sudo npm i

  • 等待node模块下载完成,接着

sudo npm install --save-dev less

  • 接着把之前的工程源码转移到 新的开发工程中

  • 中间进行了一些代码的更新 工程地址github.com/BlessedChil…

  • 你可以下载我的工程文件进行测试

git clone github.com/BlessedChil…

cd ArthurSlogStore_1

sudo npm i

sudo npm start

  • 查看页面 会看到header的样式发生了改变

  • 这次修改了一下headerBar的样式

  • 在工程根目录新建一个less文件

./index.less

@width: 600px;
@height: @width + 10px;

#app {
    width: @width;
    height: @height;
    background-color: black;
}
复制代码
  • 随后,在Header.jsx文件里添加

./Header.jsx

import './index.less'
复制代码
  • 查看页面效果 已经生效

  • 剩下的 找时间参照less文档 把已存在的样式转移到less文件里

  • 至此,暂时完成了less预编译器的引入 和 使用。


  • 欢迎关注我的微信公众号 ArthurSlog

关注微信公众号“ArthurSlog”
微信扫描二维码,关注我的公众号

  • 如果你喜欢我的文章 欢迎点赞 留言

  • 谢谢

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改