react-項目搭建(dva+antd)

dva 是一個基於 React 和 Redux 的輕量應用框架,概念來自 elm,支持 side
effects、熱替換、動態加載、react-native、SSR 等,已在生產環境廣泛應用。

一、安裝dva-cli

全局安裝dva-cli,在終端輸入

npm install dva-cli -g

確保版本是0.9.1或以上

dva -v

二、創建新項目

通過 dva new 創建新應用,包含項目初始化目錄和文件,並提供開發服務器、構建腳本、數據 mock 服務、代理服務器等功能

dva new dva-demo

三、啓動項目

cd進入dva-demo目錄,並啓動開發服務器

cd dva-demo
npm start

clipboard.png

四、使用antd

通過 npm 安裝 antd 和 babel-plugin-import 。

babel-plugin-import 是用來按需加載 antd 的腳本和樣式的
npm install antd babel-plugin-import --save

編輯 .webpackrc,使 babel-plugin-import 插件生效。

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

頁面中使用antd組件

import { Table, Button, Form, Input, Select, } from 'antd';  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章