Umi搭建项目

Umi搭建项目

一、环境搭建

1. 安装Node.js和npm：安装最新版的Node.js，可通过命令node -v和npm -v来验证是否安装成功。
2. 全局安装Umi脚手架：在控制台输入命令npm install -g umi。

二、创建项目

1. 创建项目目录：在合适的位置创建一个文件夹，用于存放项目文件。
2. 初始化项目：在项目目录下打开终端，输入命令npx create-umi@latest，根据提示选择项目模板、包管理工具等选项。这里以选择“Ant Design Pro”模板为例，它集成了Ant Design组件库，适合构建中大型应用。
3. 等待项目初始化完成：初始化过程中会自动安装依赖，并执行umi setup进行文件预处理等工作。

三、项目结构与配置

1. 项目结构：Umi项目的基本结构如下：
   • config：配置文件目录，包含路由配置、代理配置等。
   • src：源代码目录，包含页面、组件、布局等文件。
   • src/pages：页面文件目录，Umi会根据此目录结构自动生成路由配置。
2. 路由配置：Umi采用约定式路由配置，例如在src/pages下创建home.tsx文件，Umi会自动为其生成路由。
3. 代理配置：如果需要配置代理，可在config/config.ts中进行设置，以解决开发过程中的跨域问题。

四、开发与运行

1. 启动项目：在项目根目录下运行命令npm run dev，项目将在本地启动开发服务器，默认访问地址为http://localhost:8000。
2. 编写页面与组件：使用React和TS编写页面和组件。例如，在src/pages/home.tsx中编写一个简单的页面：

   import React from 'react';
   
   const Home: React.FC = () => {
     return (
       <div>
         <h1>Welcome to Home Page</h1>
       </div>
     );
   };
   
   export default Home;
   

3. 使用Ant Design组件：由于选择了“Ant Design Pro”模板，项目中已自动引入了Ant Design组件库。可在页面中直接使用其组件，如<Button type="primary">按钮</Button>。

五、进阶功能

1. 插件开发：Umi支持插件化开发，可使用umi-plugin-create脚手架创建插件项目，并在其中编写自定义插件逻辑。
2. 自定义Webpack配置：通过在config/config.ts中使用chainWebpack配置项，可对Webpack进行自定义配置，如添加自定义插件。

六、总结

通过以上步骤，成功搭建了一个基于React、TS和Umi的前端项目。Umi框架的插件化体系、约定式路由配置以及丰富的功能，使得项目开发更加高效和灵活。