本文共 1217 字，大约阅读时间需要 4 分钟。

React学习路径记录：基于umi框架的项目搭建

为了便于后续复习和追溯，我将按照学习过程整理出一个基于umi框架的React项目搭建步骤。

一、安装umi依赖

mkdir antd-coursecd antd-course

2. 初始化package.json：

cnpm init -y

3. 安装umi核心依赖：

cnpm install umi --save-dev

二、配置项目

4. 在VSCode中创建配置文件：

export default {}

2. 修改package.json：

{  "name": "antd-course",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "dev": "umi dev",    "build": "umi build"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "umi": "^3.3.3"  }}

三、创建应用

3. 新建src目录，并设置页面参数为单数形式：

export default {  singular: true}

2. 创建page目录及Hello World组件：

mkdir pagetouch page/helloworld.js

3. 初始化组件：

export default () => {  return (    
        
      
             
        
  )}

四、配置路由

4. 修改配置文件：

export default {  singular: true,  routes: [{    path: '/',    component: './HelloWorld'  }]}

五、引入ant Design插件

5. 安装插件集：

cnpm i @umijs/preset-react --save-dev

2. 更新配置文件：

export default {  singular: true,  dva: {},  antd: {},  routes: [{    path: '/',    component: './HelloWorld'  }]}

六、代码管理

3. 创建.gitignore文件：

node_modules/dist.umi/

2. 提交代码到版本控制：

git initgit add -Agit commit -m 'init'

七、构建与部署

3. 运行开发服务器：

cnpm run dev

2. 打包部署：

cnpm install serve -gserve ./dist

通过以上步骤，可以完成一个基于umi框架的React项目的搭建与配置。接下来，将持续更新项目内容，完善各个功能模块。

转载地址：http://znbzz.baihongyu.com/