详细解释反应蚂蚁设计的安装和使用

中间阶段产品的R&D过程有不同的设计规范和实现方法，但往往有很多相似的页面和组件，给设计人员和工程师带来很多麻烦和多余的构造，大大降低了产品的R&D效率。经过大量的项目实践和总结，我们(蚂蚁金融体验技术部)沉淀了一个中文设计语言蚂蚁设计。目的是统一中台项目的前端UI设计，屏蔽不必要的设计差异和实现成本，解放设计和前端R&D资源。

蚂蚁设计是一种中文设计语言，致力于改善用户和设计师的体验。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色界限。并统称进行UE设计和UI设计的设计师为“设计师”，使用统一规范进行设计赋能，全面提升中台产品体验和R&D效率。

————引自antd官网

antd的使用及注意事项：

一.安装antd

要通过npm安装antd:

Npm安装-保存-开发。如何使用antd

(1)浏览器介绍

使用脚本和链接标签直接在浏览器中导入文件，并使用全局变量antd。

我们在npm分发包的antd/dist目录下提供了antd.js antd.css和antd.min.js antd.min.css。

使用示例：

导入组件：

从“antd”导入{ DatePicker }；ReactDOM.render(DatePicker /，mount node)；导入样式：

导入“antd/dist/antd . CSS”；//或者' antd/dist/antd.less '不推荐这种方法，因为这种方法会引入antd下的所有模块，影响应用的网络性能，打包后生成的文件量会明显增加。浏览器会弹出以下警告：

(2)按需引进

根据需求引入有两种方式，一种是手动引入：

从“antd/lib/button”导入按钮；导入“antd/lib/button/style”；//或antd/lib/button/style/css来加载css文件。前者加载的文件更少，而babel-plugin-import可以按需安装加载。

安装方法：

NPM安装-保存-开发巴别塔-插件-导入的配置模式：

module . exports={ devtool : ' eval-source-map '，entry : _ _ dirname '/app/main . js '，output : { path : _ _ dirname '/build '，filename: 'bundle.js' }，module : { loaders :[{ test :/\。js$/，exclude: /node_modules/，loader: 'babel-loader '，Query: {预置： ['es2015 '，' react']，插件3360[/[' import '，{库名：' antd '，样式： ' CSS ' }]//需要配置的地方]///} }，{ CSS-loader ' } }；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。