react+dva+antd項目建構

2023-04-10 13:48:24

一:版本更新

首先說明一下這裡的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 的歡迎界面。

目錄結構是這個樣子:

react+dva+antd項目建構

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的依賴:

react+dva+antd項目建構

注:标注的部分,是後來裝的依賴,其他的就是建構項目和裝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.再看一下所裝的包

react+dva+antd項目建構