内容说明:该文章的步骤主要还是参照官网的安装步骤,但是在实际安装配置过程中,个人认为官网的描述不尽如人意,群里很多刚刚接触该框架的人也是在环境配置之初就出现比较多的问题在求助,所以将自己的一些理解与官网的安装步骤进行整合
系统环境:ubuntu 16.04
开发工具: WebStorm
前置要求:nodejs 、npm、 webpack已安装
注意:官方要求node.js的版本需要在4.x版本及以上
环境要求:
ant Design基本测试时,使用的是antd-init,但是这种方式又不建议作为实际开发使用
所以建议学习时跳过该段内容,直接使用dva(官网中的项目实战步骤)
用户要求:因为涉及到安装过程,需要root权限,我这里直接使用了root用户,其他暂未测试
具体过程:
1. 安装dva,通过npm安装dva
$ npm install dva-cli -g
安装完 dva-cli 之后,就可以在 terminal(终端) 里访问到 dva 命令。现在,你可以通过 dva new 创建新应用。
2. 创建应用(即:新的项目)
$ dva new dva-quickstart
语法:dva new 项目名称
这会创建 dva-quickstart 目录,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
注意:这里的开发过程,建议是通过dva new创建新的项目,然后再通过webStorm导入该工程
之后在开发工具下完成代码的编程操作(暂时没有找到其他的有效办法)
3. 进入项目dva-quickstart
cd dva-quickstart
npm start
注意:npm start的执行位置一定是要在当前项目的目录下
4. 安装antd(关键步骤)
$ npm install antd babel-plugin-import --save
注意:该命令的执行位置依然是项目的根目录
5. webpack.config.js文件新增如下内容,注意是新增,其他内容不动
webpackConfig.babel.plugins.push(['import', {
libraryName: 'antd',
style: 'css',
}]);
修改完成后,npm服务器会自动重启