如何使用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 !!!