react+dva+antd項目構建

一:版本升級

首先說明一下這里的dva是最新版: 2.3.2

1.初始化項目構建

npm install dva-cli -g
dva -v
dva-cli version 0.9.1

注:通過 npm 安裝 dva-cli 並確保版本是 0.9.1 或以上。

dva new dva-test

這會創建 dva-test 目錄，包含項目初始化目錄和文件，並提供開發服務器、構建腳本、數據 mock 服務、代理服務器等功能。

然后我們 cd 進入 dva-test 目錄，並啟動開發服務器：

 cd dva-test
 npm start

在瀏覽器里打開 http://localhost:8000 ，你會看到 dva 的歡迎界面。

目錄結構是這個樣子:

2.使用 antd

 npm install antd babel-plugin-import --save

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

 

{
    "entry": "src/entry/*.js",   // 入口文件
    "extraBabelPlugins": [
        ["import", { "libraryName": "antd", "style": true }]
    ]
}

現在讓我們看下package.json的依賴:

注:標注的部分,是后來裝的依賴,其他的就是構建項目和裝antd的時候,裝的依賴包,可以看到它們的版本都是高版本的.

3.配置其它項目所需的依賴

1.安裝babel-polyfill

npm install babel-polyfill --save

腳本頭部引入：

import 'babel-polyfill';// 或者require('babel-polyfill');

注:提示：polyfill指的是“用於實現瀏覽器不支持原生功能的代碼”

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。

舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環境提供一個墊片。

2.安裝axios

npm install  axios --save

腳本頭部引入：

import axios from 'axios';

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

3.安裝console-polyfill

npm install --save console-polyfill;

腳本頭部引入:

import 'console-polyfill';

4.安裝crypto-js

npm install crypto-js --save

腳本引入:

項目中用到了MD5加密方式

import MD5 from 'crypto-js/md5';

console.log(

     MD5('mima').toString();

);

關於:crypto-js有很多詳看:https://github.com/brix/crypto-js

5.安裝dva-loading

npm install dva-loading --save

用法:

import createLoading from 'dva-loading';
 
const app = dva();
app.use(createLoading());

6.安裝圖表

npm install echarts-for-react  echarts --save

注:用到圖表就可以安裝,用不到就沒有必要

7.再看一下所裝的包

8.項目實例

可前往GitHub,自行下載

gitHub:     https://github.com/ght5935/dva