使用umi脚手架 创建项目 详细教程

首先全局安装umi  两种方式 yarn安装和npm安装 都需要全局进行安装

确保 node 版本是 8.10 或以上

  

   

    

     

    
    

     

      yarn global add umi
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      或
     
    
   

    

     

    
    

     

      npm i umi -g
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      umi -v
     
    
  
 

如果umi -v 无法显示版本号, 检查下是否是npm 或者yarn全局安装, 是否配置了环境变量

 umi 通过create-umi 来提供脚手架能力  创建项目有两种形式, 一种是是命令行  一种是使用GUI

首先介绍命令行创建项目

执行以下命令开始创建项目

npm creat umi
 

可以选择以下几个项目 

• project，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能
• ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加
• block，区块脚手架
• plugin，插件脚手架
• library，依赖（组件）库脚手架，基于 umi-plugin-library

选择项目后在选择是否使用TypeScript, 熟悉ts的可以选时,初次使用建议选否  选中后回车,脚手架会自动创建好项目,和下载依赖包

执行 即可开启项目 默认8000端口

npm run start
 

使用GUI创建项目

在任意文件目录下 输入

umi ui
 

稍等几分钟就会自动打开一个页面

点击 创建项目 ->  选择目录并新建项目名称  -> 点击完成 

脚手架会自动安装,更新,初始化项目, 安装依赖.到最后的项目创建成功

这里可以看到项目的配置, 以及一些任务,可以直接在页面开启项目, 也可以直接将一些Ant Design 的资源添加到项目中

在创建项目时, 有很多选项, 是否使用dva, antd, 国际化, ts, 热加载,mock, dll, 如果一开始不确定使用建议选择最简单的方式创建项目.  后续需要再集成.

添加一个页面 使用

umi g page newpage
 

会自动生成相应的js, css

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/103584714