1.获取Ant Design Pro V2 项目

我是一个后台程序员，搞后台代码和数据库多点，但是项目逼我做全栈程序员

项目其他工程用的前端最先进也就mvc了，感觉和现在的前端主流脱节很大

先前也就在mvc里引用了vue.js开发了一个微信企业号，那个项目也是把我搞得好累

这次继续挑战自己，玩一次纯的前后台分离

前端技术栈基本是空白，感觉又要把自己玩死了

坑爹的项目经理让我同时做2个时间冲突的项目，真是24小时当2天在用

再看一眼ant design pro文档里介绍的技术栈 ES2015+、React、UmiJS、dva、g2 和 antd，全都要学一遍。。。。

准备工作

预先要在电脑上装好git和nodejs

git是代码版本的管理工具

nodejs是一套让js当程序运行的环境，我感觉就像是python一样，解析了脚本语句来运行，说错了请大神指点

后期需要用到nodejs自带的包管理工具npm

还有基于node开发出来的webpack打包工具

开始吧

在本机上建立好一个准备存放项目的文件夹

从Github上获取Ant Desigin Pro的项目

他们的地址：https://github.com/ant-design/ant-design-pro

我喜欢用git bash来执行，因为git安装完后右键菜单自带了git bash here

不需要自己再去跳转路径，指哪儿打哪儿

先把项目克隆下来

$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1

然后初始化整个项目的npm包的依赖，如果是国内网络用户可以修改下npm的包管理地址成阿里的镜像地址

不改的话国内下载会很慢的

我这里是国外网络就不用修改了，直接初始化

$ npm install

这一步挺费时间的，下一大堆包，估摸着有几百兆，要等好一会儿了

感觉好像npm的初始化包依赖每个项目它都要重新给你下一遍，不会存一份公共的

听说yarn对包的管理更科学，改天可以用用

蹲个坑的功夫因该就装完了

开始见证奇迹的时候到了

$ npm start

坑爹的翻车了，提示我找不到webpack模块，你全家都找不到webpack模块，靠，明明我全局里有webpack

不知道为啥非要让我在本地再装一遍webpack，来就来吧

npm install webpack --save-dev

这里的--save-dev表示这个包安装的后只是给开发用的，最终在打包文件的时候不会把这个包作为输出打包

说白了就是这个包和最终运行无关，别打到发布文件里占空间

然后再start一下

如果你电脑的8000端口没有被占用的话会直接启动起来

我的8000端口还有别的网站，所以它会提示是否使用其他端口

必须选是啊，不然还玩毛线啊

看到绿色的东西心情就是好

打包完后会自动打开网页

看到下面的页面就表示工程能正常运行啦~