node版本>=10.13,推荐nvm管理node版本，yarn管理npm依赖（使用国内源）
#国内源$npmiyarntyarn-g#后面文档里的yarn换成tyarn$tyarn-v$1.16.0先找个地方建个项目目录并进入
$mkdirmyapp&&cdmyapp创建项目并安装依赖
这里直接添加.eslintrc.js、.prettierrc.js、.stylelintrc.js，配置如下：
1、.eslintrc.js配置module.exports={extends:[require.resolve('@umijs/fabric/dist/eslint')],rules:{'react/jsx-first-prop-new-line':'error',semi:['error','never'],indent:['error',2,{SwitchCase:1}],'no-plusplus':'off','react/sort-comp':'off','no-unused-expressions':'off',},}2、.prettierrc.js配置constfabric=require('@umijs/fabric')module.exports={...fabric.prettier,semi:false,}3、.stylelintrc.js配置constfabric=require('@umijs/fabric')module.exports={...fabric.stylelint,}你的vscode要安装这三个同名扩展插件，这时候分别去更改js、less文件，会发现已经有风格校验了，保存会自动修复。
umi3默认支持less，如果需要sass，需要安装node-sass依赖，推荐使用less。
global.less会默认引入，所以这里可以用来写一些全局样式，src下建立styles目录，添加base.less和mixins.less，base.less可以作为导出各种变量和mixin给其他less文件使用的一个出口。
global.less添加cssreset和一些样式自定义，如下：
@import"~@/styles/base.less";body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;font-weight:400;font-family:Helvetica,Arial,sans-serif;text-align:left;background-color:#FFF;}html,body,#root{height:100%;margin:0;padding:0;color:@text-color;font-size:28px;}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}fieldset,img{border:0none;}address,caption,em,strong,th,i{font-weight:400;font-style:normal;}ol,ul{list-style-position:outside;list-style-type:none;}根据项目添加...4、px转vw之所以用vw不用当前非常通用的rem，是因为rem方案有几个缺点：
yarnaddpostcss-px-to-viewport然后在umirc.js中添加配置如下：
exportdefaultdefineConfig({extraPostCSSPlugins:[postcssPx2vw({viewportWidth:750,unitPrecision:5,viewportUnit:'vw',minPixelValue:1,}),],});这样你发现css文件中的px已经自动转为vw了。
yarnaddgulpgulp-qiniu--dev添加配置根目录新建qiniuAssets目录和gulpfile.js，配置如下：
/*eslint-disableimport/no-extraneous-dependencies*/constgulp=require('gulp')constpath=require('path')constqiniu=require('gulp-qiniu')//fileuploadtasksconstimageSrc=path.resolve(__dirname,'qiniuAssets/*.*')gulp.task('qiniu',(done)=>{gulp.src(imageSrc).pipe(qiniu({accessKey:'你的七牛accessKey',secretKey:'你的七牛secretKey',bucket:'maihaoche',private:false,},{dir:'kunkka/assets/',version:false,},),).on('finish',done)})//combinetasksgulp.task('upload',gulp.series(['qiniu'],(done)=>{done()}))module.exports=gulp添加命令行在package.json中scripts中添加一行如下：
"upload":"gulpqiniu",将要上传的资源放到qiniuAssets目录中，然后执行命令：
大多数接口请求，与后台约定统一响应数据结构，统一错误处理，可以简化业务层处理逻辑，只处理正常流即可。
此处使用umi-request、antd-mobile处理请求，首先添加依赖：
yarnaddumi-requestantd-mobile然后添加utils/request.js,内容如下：
这里dva提供了一个onError的hook来全局错误处理，在src/app.js中添加dva配置：
effects:{*getUserInfo({payload},{call,put}){try{const{data}=yieldcall(getUserInfo,payload)yieldput({type:'setData',payload:{customerInfo:data}})}catch(error){console.log('获取失败',error)}},}或者不通过models调用的话，可以在promisecatch中处理，如下：
//获取客户信息getUserInfo().then((userInfo)=>{console.log('获取用户信息成功1',userInfo)}).catch((err)=>{console.log('获取用户信息失败1',err)})还有最坏的情况，后台返回的响应根本没有约定好响应的结构，且拒绝修改，那只能一边骂骂咧咧一边修改代码了，这个接口单独在业务中处理！如下传个标志给request：
importrequestfrom'@/utils/request'//不走统一拦截的接口，传个'noThrow'标志到request拦截层exportconstlogin=(data)=>request.post('/api/login.json',{data，noThrow:true})//统一异常处理的接口exportconstgetCustomerInfo=(data)=>request.post('/api/companyInfo.json',{data})request.js根据这个标志将这种接口的响应直接返回到前台，自己在业务中单独处理这种接口的异常情况。