这篇文章参考umi + dva，完成用户管理的 CURD 应用 #62（https://github.com/sorrycc/blog/issues/62）
1、基础环境准备
首先我的电脑上已经安装了node，
node -v
查看了自己的node版本是v8.9.4，符合要求
然后安装dva-cli，执行下边的命令
npm i dva-cli@next -g
安装完后，查看dva的版本信息
dva -v
自己安装的dva和dva-cli的版本如下，符合要求
dva-cli version 1.0.0-beta.4
dva version 2.4.0
2、创建应用
dva new user-dashboard
这里创建完应用后，我一般会关掉vs，然后进入创建应用的文件夹，找到user-dashboard文件夹，右键用vs重新打开，这样vs的资源管理器就只显示当前项目了。不知道其他人是怎么做的，有更好的方法的，分享一下吧。
查看了项目的文件，发现没有.webpackrc.js，这个文件，如图中箭头所指
项目文件一览.jpg
除了上边的文件外，如果对照原作者在github上的目录，会发现与自己用命令创建的目录稍有不同，github的截图入下
原作者在github上的文件目录
然后自己新建了这个文件，将如下代码添加入.webpackrc.js这个文件，其他的文件暂时先不去管。后边涉及到了再说。
export default {
"publicPath": "/static/",
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},
}
3、启动项目
执行命令npm start
如果8000端口没有被占用，则顺利启动，vs会自动打开浏览器，这个时候就可以看到默认的应用主页了
如果8000端口被占用，则会提示您，这个时候选择y，回车即可以8001端口启动应用。
这个时候可以在浏览器的地址栏输入http://localhost:8000/api/users，可以看到浏览器当前页面会显示一些json信息，这是因为我们在第二步配置了代理，会将http://localhost:8000/api/users请求，映射到http://jsonplaceholder.typicode.com/，这个地址。我们看到的数据，我们本地是没有的，都是从代理的地址拿到的。
起步都到这里了，从下一篇文章开始，将会从创建一个用户管理和权限认证的应用开始，逐步深入dva和umi的使用。
网友评论