某赞管理系统的构造过程（一）

脚手架项目创建注意点

1.创建项目
1.npm i create-react-app -g
2. create-react-app react-youzan(项目名称)
2.创建后第一步使用eject
cd react-project(进入项目）
1.git init
2.git add .
3 git commit '做了什么'
4 npm run eject
3.删除不必要的文件避免冗余
图片要放在src-assets里面

README文件

react-youzan created by orange at 2019-11-18
常用项目命令：
    npm i 安装各种依赖包
    npm start 运行项目
    npm run build 打包部署项目
工程架构：
    使用的是create-react-app 脚手架搭建的工程架构
    npm run eject 对配置文件进行暴露
    nodejs+webpack+babel+eslint
项目架构：
     前端框架：react/react-dom
     路由：react-router-dom
     状态管理：mobx/mobx-react
     UI组件：ant-design/sass
     前后端分离：axios

创建项目

1.路由

路由：npm i react-router-dom -S
创建文件组件routes/home/Home.js
     创建路由文件src/routes/index.js 引入组件

    import Home from './home/Home'
    const routes=[
        {
            id:1,
            path:'/home',
            component:Home,
            children:[],
            text:'首页'
        }
    ]
    export default routes

app.js导入路由：

import React from 'react';
import {NavLink,BrowserRouter,Switch,Redirect,Route} from 'react-router-dom'
import routes from './routes'

export default class App extends React.Component {
  //封装方法
  createNavLink(arr){
    let linkArr=[]
    arr.map((ele,idx)=>{
      linkArr.push(  {ele.text})
    })
    return linkArr
  }
   //封装方法
  createRoute(arr){
    let linkArr=[]
    arr.map((ele,idx)=>{
      linkArr.push( )
      if(ele.children&&ele.children.length>0){
        ele.children.map((ele2,idx2)=>{
          linkArr.push( )
        })
      }
    })
    return linkArr
  }
  render (){
    return (
    
      
        {
          this.createNavLink(routes)
        }
        
            {
             this.createRoute(routes)
            }
            
            
        
        
      
    
  );
  }
  
}

 在APP.js里面运行 并写一个循环路由Navlink /Route 封装函数

2.mobx

安装：npm install mobx -S
      npm install mobx-react -S
创建src/store/index.js

import { observable, action } from 'mobx'
class Store {
  @observable msg = 'hello 1912'
  @action updateMsg() {
    this.msg = 'hello world'
   
  }
}
export default new Store()

引入app.js ：
import {Provider} from 'mobx-react'
并将组建放入Provider里面
引入store：
import store from './store'
放入

3.es6报错

使用两个 Babel 插件，支持ES6装饰器语法

npm install @babel/plugin-proposal-decorators -D
npm install @babel/plugin-proposal-class-properties -D

在 json文件中的babel 中配置如下

{
  
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties",{"loose": true}]
  ]
}

重启项目

4 注入

在home/index.js中注入

import React from 'react'

import { inject, observer } from 'mobx-react'
@inject('store') @observer
 class Home extends React.Component{
    render(){
        return(
            
                首页
                {this.props.store.msg}
                7897u9
            
        )
    }
}
export default Home

5 sass样式

  创建assets/css/xxx.scss
  安装：npm i node-sass -D

6 Ant-design

  安装：npm i antd -S
  APP.js引入样式:import 'antd/dist/antd.css'
  引入组件：import {Button} from 'antd'

7 Axios

   安装：npm i axios -S
   创建：src/utils/fetch.js 写接口

import axios from 'axios'
let baseUrl='http://localhost:3000'
function fetch(api,method,data,callback) {
    axios({
        url:baseUrl+api,
        method:method,
        data:data
    }).then(res=>{
        console.log('成功',res)
    }).catch(err=>{
        console.log('错误',err)
    }).then(()=>{
        // 总会执行
    })
    
}
// 调用方法
export function getUserList(callback){
    fetch('/db/user.json','GET',{},res=>{
        callback && callback(res)
    })
}

在store/index.js引入

import {observable,action} from 'mobx'

import {getUserList} from '../utils/fetch'
class Store{
    @observable msg='hello,1919'
    @action updateMsg(){
        this.msg='hello world'
        
        getUserList(res=>{
            console.log('mobx user',res)
        })
    }
}
export default new Store()

调接口
在app.js中使用

    componentDidMount(){
         this.props.store.updateMsg()
     }

8 静态资源

    放在public/db/xxx.json

9.别名

   为了引入时不出现‘../../../'这种情况在webpackconfig.js文件中找到alias

 '@':path.resolve(__dirname,'../src')