git( GitHub 码云) 团队级的开发 git
- 组长： 创建一个远程的仓库
- 邀请各个组员，给赋予权限
- 给每一个组员创建一个分支，创建好公共的分支
- 克隆仓库到本地，多复制一份出来（这一份作为我们分支的开发目录）， 有的同学直接在仓库代码中开发，代码提交的时候，代码丢失，
- 首先，当我们开发完之后，在开发目录中先做好测试，然后再去提交远程分支
- 组长： 统管项目
开发--->基础配置
- 使用脚手架新建项目
create-react-app siku
- 项目抽离
yarn eject
- 安装依赖
- 配置我们自己的项目目录结构（ 目录可以按照自己的方式来走 ）
assets ---> base64
component 组件
common
pages
modules --> 基础工具
rem.js
stylesheets --> scss目录
_base.scss
_mixin.scss
_reset.scss
_common.scss
main.scss - 配置rem
将 rem引入到src/index.js - 配置sass环境
cnpm i node-sass sass-loader -D
如果你出问题了： webpack配置有些问题，
在项目入口文件 src/index.js 中引入全局的基础sass配置
- 数据--》 redux 应用状态管理，同意管理整个项目中的各种数据
新建一个store 文件夹
index.js store
reducer.js
新建一个公共的common
state.js 数据
const.js 常量（reducer actionCreator）
reducer.js 数据管理者
actionCreator 动作触发者 - axios ---->挂载在全局的Component原型上
modules/axios-util
get.js
import axios from 'axios'
import {Component} from 'react'
//跨域问题
axios.defaults.crossDomain = true //是否允许跨域
axios.defaults.withCredentials = true//默认形式可以进行跨域，并且可以对cookie做一些设置
const Get = ()=> {
return axios.get( {url,{
params: data
}})
}
export default Get
post.js
import axios from 'axios'
import {Component} from 'react'
//跨域问题
axios.defaults.crossDomain = true //是否允许跨域
axios.defaults.withCredentials = true//默认形式可以进行跨域，并且可以对cookie做一些设置
const config = {
headers: {
"Content-Type": 'application/x-www-form-urlencoded'
}
}
const Post = ({url,data})=> {
return axios.post( url,data,config )
}
export default Get
index.js
//目的，要想vue一样讲两个方法挂在实例
import {Component} from 'react'
//导入两个方法
import Get from './get'
import Post from './post'
Component.prototype.$get = Get
Component.prototype.$post = Post
export default {
Get , Post
}
- 在component中新建
common
pages
Home
Buycar
List
Mine
index.js
import Home from './Home/Home'
import Buycar from './Buycar/Buycar'
import List from './List/List'
import Mine from './Mine/Mine'
export {
Home,Buycar,List,Mine
}
10.搞搞react路由
我们在react 16.0的版本，我们已经不再使用'react-router'了，我们使用的是react-router-dom
路由一共有两种，一种叫做 BrowserRouter 另一种叫做HashRouter
3.引入路由 ,使用Router代替BrowserRouter
import { BrowserRouter as Router} from 'react-router-dom'
- 使用路由工具
import { Route } from 'react-router-dom'
<Router>
<Route ></Route>
</Router>
- 给Route添加一个path和component属性
path = '/home'
component = { Home }
-
exact作用，
- Router中只能有一个，所以我们使用exact一次只渲染一个
- 当我们存在 如： /list/a 这种形式，我们要给/list 路由组件加一个exact
当我们Router中需要多个的时候，我们要使用Switch的工具
import { Switch,Link } from 'react-router-dom'
<Switch>
<Route path='/' component = {Home} exact></Route>
<Route path='/list' component = {List} exact></Route>
<Route path='/mine' component = {Mine} ></Route>
<Route path='/buycar' component = {Buycar} ></Route>
</Switch>
Link类似于我们的router-link 身上也是有to属性
NavLink 类似 于active-class ,点击Navlink之后给我们的a标签身上添加一个active类名（相当于当前样式）
移动端底部栏一般高度是40-55px之间
