如何使用React+Elementui搭建项目

基础准备工作

由于React很多命令都是基于node.js才能运行，所以第一步要安装node。
1、安装Node.js
因为node.js更新很快，一般都推荐使用nvm来安装管理各个node.js版本。http://nvm.sh
2、安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

3、验证是nvm否安装成功

command -v nvm

4、查看已发布的Node.js版本

nvm ls-remote

5、安装最新的node.js，找到最新的lts版本后，例如我现在的是v8.12.0

nvm install v8.12.0

安装React

1、先来个淘宝镜像，Mac终端执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装和初始化，先确保终端中的node版本为最新版，我们需要在命令行中安装create-react-app 工具，你可能还需要安装yarn。

cnpm install -g create-react-app yarn

3、创建项目：create-react-app demo,然后我们进入项目并启动。

cd demo
yarn start

此时浏览器会自动访问http://localhost:3000/，看到如下的界面就说明成功了。

4、安装react的路由：

cnpm install --save react-router-dom

安装Elementui前端框架

查看项目源码，简单解析一下：在src文件中的有个app.js，发现我们所看到的欢迎页面就是在这里加载出来的。我们可以尝试去修改一下里面的内容，发现页面也会跟着变化。也就是说这个文件就是整个框架的布局文件。

1、安装Element-React，参考网址：https://elemefe.github.io/element-react/#/zh-CN/quick-start,打开后执行命令安装即可：

#安装elementui，一定要加c，不然会报错
cnpm i element-react --save
#安装主题
cnpm install element-theme-default --save 

2、在App.js中引入Elementui的主题，然后修改App.js中的render部分代码如下：

#先引入
import 'element-theme-default';

#引入button
import {Button} from 'element-react';

render() {
    return (
        <div className="App">
            <Button type="primary">Button</Button>
        </div>
    );
}

3、删除App.css里面的全部css样式。测试：查看浏览器，你会看到如下界面：

##搭建一个简易后台
1、在App.js中引入路由

import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link
} from "react-router-dom";

2、修改App.js中render部分代码如下：

render() {
    return (
        <Router>
            <div className="App">
                <div>
                    <Menu defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
                        <Menu.Item index="1">处理中心</Menu.Item>
                        <Menu.SubMenu index="2" title="我的工作台">
                            <Menu.Item index="2-1">选项1</Menu.Item>
                            <Menu.Item index="2-2">选项2</Menu.Item>
                            <Menu.Item index="2-3">选项3</Menu.Item>
                        </Menu.SubMenu>
                        <Menu.Item index="3">订单管理</Menu.Item>
                    </Menu>
                </div>

                <Layout.Row>
                    <Layout.Col span={5}>
                        <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)} onClose={this.onClose.bind(this)}>

                            <Link to="/">
                                <Menu.Item index="2"><i className="el-icon-menu"></i>首页</Menu.Item>
                            </Link>
                            <Menu.SubMenu index="1" title={<span><i className="el-icon-message"></i>导航一</span>}>
                                <Menu.ItemGroup title="分组一">
                                    <Link to="/site_nodes">
                                        <Menu.Item index="1-1">酷站</Menu.Item>
                                    </Link>
                                    <Menu.Item index="1-2">选项2</Menu.Item>
                                </Menu.ItemGroup>
                                <Menu.ItemGroup title="分组2">
                                    <Menu.Item index="1-3">选项3</Menu.Item>
                                </Menu.ItemGroup>
                            </Menu.SubMenu>
                            <Menu.Item index="3"><i className="el-icon-setting"></i>导航三</Menu.Item>
                        </Menu>
                    </Layout.Col>

                    <Layout.Col span="19">

                        <div className="grid-content bg-purple-light">
                            <Switch>
                                
                            </Switch>
                        </div>

                    </Layout.Col>
                </Layout.Row>
            </div>
        </Router>
    );
}

onSelect() {

}

onOpen() {

}

onClose() {

}

此时看到部分模板打了红色的波浪线，解决办法：在上面引入相应的标签，

import {Menu, Layout} from 'element-react';

查看浏览器，你会看到如下页面：

3、创建两个简单的模块
在src文件夹中创建views文件夹，里面创建两个js文件，如下：

Home.js中写入代码：

import React, {Component} from 'react';

class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>首页123</div>
        );
    }
}

export default Home;

SiteNodes.js中写入代码：

import React, {Component} from 'react';

class SiteNodes extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>酷站</div>
        );
    }
}

export default SiteNodes;

4、在App.js文件中引入这个两个组件：

import Home from './views/Home'
import SiteNodes from './views/SiteNodes'

5、修改App.js文件中的Switch标签代码如下：

<Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/site_nodes" component={SiteNodes}/>
</Switch>

测试：查看浏览器，你会看到如下页面：

点击首页可以看到对应模块，点击酷站可以看到酷站的模块。

Well Done !!!