Dva+Antd创建React项目(一)

一直在使用 antd pro 简单粗暴地做前端项目，最近有个项目需要自己构建，从0做起太麻烦，我选择了dva-cli。创建项目期间也遇到不少问题，最后也都得到了解决。思前想后还是做一次记录，希望对大家创建项目有一定的帮助。如果不知道dav的，可以去官网先了解一下：https://dvajs.com/guide 。

一、安装

// Windows
npm install dva-cli -g
// Mac
sudo npm install dva-cli -g

 

二、创建应用

通过"dva new +项目名称"创建新的项目，项目名称不要包含大写字母，可以用连接符拼接。如下，我创建的项目名称是my-app

dva new my-app

 

然后 cd 到创建的项目下，执行下面的操作

npm install 

 

三、启动项目

npm start

 

默认端口是8000，在浏览器上打开 http://localhost:8000/ ，就能看到下面的页面。

 

四、一个简单的react项目就搭建起来了。但是还并不是很完善。现在我们来完成一下基础的配置：

1.如何改动项目端口？

在 package.json文件里的scripts下找到start键值对，"start": "roadhog server"。官方的修改是这样的：

// os,linux
"start": "PORT=3000 roadhog server"
// windows
"start": "set PORT=3000 && roadhog server"
// 使用cross-env  需要先下载cross-env
"start": "cross-env PORT=3000 roadhog server"

 

2.使用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" }]
    ],
}

 

使用的时候，可以在页面直接引入：

import { Button } from 'antd';

 

3.改写 .webpackrc

.webpackrc 也可以加上文件后缀，变成 .webpackrc.js 上文件后缀。这样的话可以引入一些配置，通过 export default 导出，如下是我的一些配置。

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}

export default{
  //  "proxy": {
  //       "/apis": {
  //       "target": " https://cnodejs.org",
  //       "changeOrigin": true,
  //       "pathRewrite": { "^/apis" : "" }
  //       }
    // },
    extraBabelPlugins: [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    ],
    // disableCSSModules: true,
    alias: {
      "@": resolve('src'),
   },
}

 

注释掉的 proxy 部分可以做代理转发。alias 里做了引入路径的转化。

4.使用less语言编译。

roadhog 是自带less编译的，所以你只需要加入 less后缀文件，直接写就行了。不需要下载less的插件了。如果使用sass,就需要下载插件了，我不怎么使用sass，所以没有深究。

---

结语：今天先就基础配置记录一下，后续会写配置页面路由，页面布局，以及页面互动的数据流问题！