首页 > 其他 > 详细

bikemanager

时间:2019-04-11 22:20:34      阅读:157      评论:0      收藏:0      [点我收藏+]

项目特色

前言的技术栈  健全的架构  丰富的UI组件  共享单车项目

掌握react全家桶

掌握地图和react集成技能

掌握前端图标开发技巧

掌握antd UI框架

前端后台架构设计,公共机制封装,后台管理系统开发经验

 

facebook开源的一个js库

react结合生态库构成一个MV*框架

react特点

  声明式编码

      组件化编码

     高效的DOM Diff算法,最小页面重绘

     单向数据流

 

MV* 框架代表只关注视图View层 + 数据层Model

Vue在表单里面数据流是双向的,但是在组件中是单向的

 

编程式实现: 不仅要关心如何实现,还要关心实现什么

声明式实现:只需要声明做什么,而无需关心如何实现,实现部分由框架实现 

 

yarn新一代的包管理工具 

   速度快 ,安装版本统一(Lock文件)  更加简洁的输出    命令更好的语义化

   yarn init / add / remove

   yarn / yarn install 安装所有依赖

 

声明周期函数

getInitialState 初始化state 但是在ES6里面去掉了这个hook,只需要在构造函数中写state即可

getDefaultProps 函数只能用在 createClass中,不能用在ES6中

 

state = {} 和在构造器中使用是一样的

this.foreUpdate() 强制更新 ,触发componmentWillUpdate 这个生命周期函数

 

yarn add antd 安装antd组件库

yarn add less-loader  antd是基于antd开发的

 

怎么看react是否原生支持less? 新建一个less文件试试

虽然antd可以直接引入css文件,但是后期需要修改页面的整体主题就无法实现了

所以需要引入less支持,以便后期改变整体主题

 

yarn eject 暴露配置文件

yarn add less  安装less

 

loader的解析是从后往前解析

style-loader  行内样式     css-loader  Css文件    postcss-loader 表示浏览器内核前缀的添加

less-loader  less文件

 

import ‘antd/dist/antd.css‘ 之所以能够使用,是因为已经编译打包成了css文件,实际源文件是less文件

yarn add babel-plugin-import   只会加载对应组件的css样式

技术分享图片

上面的配置就相当于把 antd.less 文件引入到项目中了

在别的地方就不需要引入antd.css文件了    style: true 表示直接编译成行内样式插入到代码中去 

 

添加less支持   直接复制 sassRegex 和 sassModuleRegex 的配置,然后修改loader名称即可

注意新版本的less使用会报错  修改 less-load/dist/index.js文件:加上options.javascriptEnabled = true 即可

 

修改antd的主题颜色

技术分享图片

 

babel-plugin-import 插件

{ "libraryName": "antd"} 只会加载js文件

{"libraryName":"antd", style: "css"}  加载js和css文件  无法改变主题

{"libraryName":"antd" , style: true }   加载js和less文件  可以修改主题

 

calc 计算属性   可以让高度撑满div   

 

less可以使用变量

@colorL:red;  冒号是必须的

 

SVG图片  放大和缩小都不会失真 

 

bikemanager

原文:https://www.cnblogs.com/escapist/p/10692903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!