手机版

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

时间:2021-08-28 来源:互联网 编辑:宝哥软件园 浏览:

中间阶段产品的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 ' } };以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:详细解释反应蚂蚁设计的安装和使用是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。