今天折騰了半天,各類安裝問題,最終仍是裝上了:css
1.安裝npmnode
$ sudo apt install npm
2.升級npmreact
$ sudo npm install npm@latest -g
輸入npm -v,便可看到當前npm的版本號,說明安裝成功了。npm
3.安裝用於安裝nodejs
的模塊n
瀏覽器
$ sudo npm install -g n
4.n
模塊安裝指定版本的nodejs
bash
//安裝官方最新版本 $ sudo n latest //安裝官方穩定版本 $ sudo n stable //安裝官方最新LTS版本 $ sudo n lts
輸入命令node -v,可看node.js的安裝版本。服務器
下面就是跟着antd的官網作了,參考地址:https://ant.design/docs/react/practical-projects-cn,下面加了一個我的經驗。babel
1.安裝dev,此版本爲實戰項目版本antd
$ npm install dva-cli -g app
$ dva -v
0.7.0
大概會等幾分鐘。。。
2.建立新應用
$ dva new dva-quickstart
此時可home目錄下看到這個文件,也須要等幾分鐘。。。
而後咱們 cd
進入 dva-quickstart
目錄,並啓動開發服務器:
$ cd dva-quickstart $ npm start
幾秒鐘後,你會看到如下輸出:
Compiled successfully! The app is running at: http://localhost:8000/ Note that the development build is not optimized. To create a production build, use npm run build.
在瀏覽器裏打開 http://localhost:8000 ,你會看到 dva 的歡迎界面。
3.使用antd
在這裏可能會遇到一些問題
首先安裝babel-plugin-import
$ npm install antd babel-plugin-import --save
而後編輯 .roadhogrc
,使 babel-plugin-import
插件生效。
{ "entry": "src/index.js", "env": { "development": { "extraBabelPlugins": [ "dva-hmr", "transform-runtime", ["import", { "libraryName": "antd", "style": "css" }] ] }, "production": { "extraBabelPlugins": [ "transform-runtime" ] } } }
注意:.roadhogrc這個文件在你建立的dva-quickstart中,有些同窗可能看不見,由於這是個隱藏文件,顯示隱藏文件便可。
4.定義路由
在 routes文件夾中新建Products.js
,內容以下:
import React from 'react'; const Products = (props) => ( <h2>List of Products</h2> ); export default Products;
添加路由信息到路由表,編輯 router.js
:
+ import Products from './routes/Products'; ... + <Route path="/products" component={Products} />
而後在瀏覽器裏打開 http://localhost:8000/#/products ,你應該能看到前面定義的 <h2>
標籤。
5.編寫組件
新建 components/ProductList.js
文件:
import React, { PropTypes } from 'react'; import { Table, Popconfirm, Button } from 'antd'; const ProductList = ({ onDelete, products }) => { const columns = [{ title: 'Name', dataIndex: 'name', }, { title: 'Actions', render: (text, record) => { return ( <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}> <Button>Delete</Button> </Popconfirm> ); }, }]; return ( <Table dataSource={products} columns={columns} /> ); }; ProductList.propTypes = { onDelete: PropTypes.func.isRequired, products: PropTypes.array.isRequired, }; export default ProductList;
6.定義model
完成 UI 後,如今開始處理數據和邏輯。
dva 經過 model 的概念把一個領域的模型管理起來,包含同步更新 state 的 reducers,處理異步邏輯的 effects,訂閱數據源的 subscriptions 。
新建 model models/products.js
:
import dva from 'dva'; export default { namespace: 'products', state: [], reducers: { 'delete'(state, { payload: id }) { return state.filter(item => item.id !== id); }, }, };
在index.js(在dva-quickstart文件夾下)中載入:
3. Model app.model(require('./models/products'));
6.連接model和 component
從新編輯 routes/Products.js
,替換爲如下內容:
import React from 'react'; import { connect } from 'dva'; import ProductList from '../components/ProductList'; const Products = ({ dispatch, products }) => { function handleDelete(id) { dispatch({ type: 'products/delete', payload: id, }); } return ( <div> <h2>List of Products</h2> <ProductList onDelete={handleDelete} products={products} /> </div> ); }; // export default Products; export default connect(({ products }) => ({ products, }))(Products);
最後,咱們還須要一些初始數據讓這個應用 run 起來。編輯 index.js
:
- const app = dva(); + const app = dva({ + initialState: { + products: [ + { name: 'dva', id: 1 }, + { name: 'antd', id: 2 }, + ], + }, + });
刷新瀏覽器,應該能看到如下效果:
說明大功告成。。。