首页 技术 正文
技术 2022年11月9日
0 收藏 520 点赞 3,512 浏览 1386 个字

项目特色

前言的技术栈  健全的架构  丰富的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样式

bikemanager

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

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

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

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

修改antd的主题颜色

bikemanager

babel-plugin-import 插件

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

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

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

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

less可以使用变量

@colorL:red;  冒号是必须的

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,105
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,582
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,429
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,836
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,919