create-react-app antd mobx 以及按需加载

1 antd安装与配置

2 antd按需加载

3 mobx配置

 

1安装antd

npm install antd --save

在项目中

2 antd按需加载

安装第三方依赖

npm install babel-plugin-import --save

在项目根目不找到package.json 找到babel添加插件(plugins)

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["import", [{ "libraryName": "antd", "style": "less" }]]
    ]
},

如下使用less方式进行

配置之前必须弹出create-react-app webpack配置

使用npm run eject

 

注意在配置less中，如果less版本为3.0添加javascriptEnabled:true

如下所示：

{
    loader: require.resolve('less-loader'),//添加less-loader加载
    options: {
        javascriptEnabled: true
    }
}

 

调用方式

import {Button, Form, Table} from "antd";

 

3 mobx配置

安装 mobx 、mobx-react

npm install mobx --save

npm install mobx-react --save

npm install babel-plugin-transform-decorators-legacy --save 此插件主要解决mobx饰问题
在webpack.config.dev.js webpack.congif.prod.js
中加上

oneOf: [
    // "url" loader works just like "file" loader but it also embeds
    // assets smaller than specified size as data URLs to avoid requests.
    {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]',
        },
    },
    // Process JS with Babel.
    {
        test: /\.(js|jsx|mjs)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {//以上plguins为新增代码
            plugins: [
                ['transform-decorators-legacy']
            ],

            compact: true,
        },
    },

例如

@observable
@observer
@computed

@action

 

因为当前我们项目单页面应用。将产生多个store

接下来进行配置

1创建 store

在src文件夹中新建 store

创建一个 index.js文件

如下

import {observable, action} from 'mobx';

class HomeStore {
    @observable text;
    @observable num;

    constructor() {
        this.num = 0
        this.text = 'Hello Word!'
    }

    @action plus = () => {
        this.num = ++this.num
    }
    @action minus = () => {
        this.num = --this.num
    }
}

const homeStore = new HomeStore()//通过new 创建一个homeStore对象实例通过export导出

export {homeStore}

 

 

2在项目 App.js文件中导入Provider将store导入

import {Provider} from "mobx-react";

import * as store from './containers/store/index'//将所有方法给预一个store的别名方面在不同组件中调用

 

如下操作

<Provider store={store}>
    <Router history={browserHistory}>
        <Route path="/" getComponent={APP}>
            <IndexRoute getComponent={Index}/>
            <Route path="/teaching" getComponent={Teaching}/>
            <Route path="/help" getComponent={Help}/>
        </Route>
    </Router>
</Provider>

 

3如何组件中调用store的数组

import {observer, inject} from 'mobx-react'

@inject("store") @observer
class Index extends Component {

上面代面使用到@inject @observer

1 @inject 中将store注入到当前组件当中

2@observer 当前装饰器（函数）用来将React组件变成响应式组件

 

3在redner可以直接调用store中的数据和方法

1 例如我们store中homeStore.text=”hello word”

调用方式

{this.props.store.homeStore.text}//将输入hello word

2调用方法

定义一个方法

handelPlus =() => {

    this.store.plus()
}

handelMinus =() => {
    this.store.minus()
}

 

在render中调用

<Button type="Primary" onClick={this.handelMinus}>减</Button>
<Button tyye="Primary" onClick={this.handelPlus}>加</Button>