从零搭建Ts+umi+dva项目

写在前面:

如果创建好的umi项目,在提交到git的时候报eslint相关错误,解决方法是不要使用vscode自带的git管理插件,而是使用命令git commit --no-verify -m '要提交的备注信息',去忽略git提交之前的eslint检测

不用这个

用这个

安装npm

默认电脑已经安装npm,如果没有安装,请阅读我的另外一篇文章《从零搭建react项目》中的前半部分

全局安装umi

黑窗口运行:npm install umi -g
umi升级命令也是:npm i umi

新建一个空白文件夹

可以在资源管理器手动添加,也可以使用黑窗口命令行添加:mkdir umi_dva

搭建umi项目

进入新建的空白文件夹:

F:
cd F:\代码\umi_dva

创建umi项目

npm create umi别把create写成creat了

配置选项

1.是否安装creat-umi

是否要安装create-umi?——可能当前没有create-umi这个包,毫无疑问选择yes!

2.选择建哪一种umi项目


ant-design-pro 一个包含antd-pro的项目(在app基础上多了antd-pro)
app 一个空白的umi项目
plugin 一个插件
做简单demo,选择app就好了,下面是三种模板的详细不同:

2.1、app

我当前搭建umi项目是为了编写一个todolist的demo,所以选择app就可以了。用↑↓←→切换,用回车选择

image.png

如果要使用TS语言,那么选择yes!

What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
你想启用什么功能?(按<space>选择,<a>切换全部,<i>反转选择)

( ) antd
( ) dva
( ) code splitting
( ) dll
( ) internationalization ——国际化

我们选择antd和dva即可,可能某些情况会选择国际化,至于另外两个选项,我尚不了解
空格选择,回车确定:



如上图时,安装完毕
此时在我们新建的空白文件夹中,可以看到目录结构如下:



在本文最后,我将介绍umi-dva项目的项目结构
2.2、ant-design-pro
2.3、plugin

umi-dva项目结构讲解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容