详解蚂蚁设计反应的安装和使用方法

　　

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验技术部)经过大量的项目实践和总结、沉淀出一个中台设计语言蚂蚁设计。旨在统一中台项目的前端UI设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。

　　

蚂蚁设计是一个致力于提升”用户”和“设计者”使用体验的中台设计语言。它模糊了产品经理,交互设计师,视觉设计师,前端工程师,开发工程师等角色边界,将进行问题设计和UI设计人员统称为“设计者”,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。

　　

——引用自antd官网

　　

antd的使用方法和注意事项:

　　

<强>一、安装antd

　　

通过npm安装antd:

　　 　　 　　npm安装——save-dev antd 　　 　　

<强>二,antd的使用方法

　　

(1)浏览器引入

　　

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

　　

我们在npm发布包内的antd/dist目录下提供了antd。js antd。css以及antd.min。js antd.min.css。

　　

使用示例:

　　

引入组件:

　　 　　 　　从“antd”进口{DatePicker}; 　　ReactDOM.render (& lt; DatePicker/祝辞,mountNode); 　　 　　

引入样式:

　　 　　 　　进口“antd/dist/antd.css”;//或“antd/dist/antd.less” 　　 　　

不推荐这种方式,因为这种方式会引入antd下的所有模块,这会影响应用的网络性能,并且打包后生成的文件体积会明显增大。且浏览器应该会弹出如下的警告:

　　

详解蚂蚁设计反应的安装和使用方法

　　

(2)按照需求引入

　　

按需求引入有两种方法,一种手动引入:

　　 　　 　　进口从“antd/lib/按钮”按钮; 　　导入“antd/lib/按钮/风格”;//或者antd/lib/按钮/风格/css加载css文件,前者加载的是少文件 　　 　　

还可以安装babel-plugin-import来进行按需加载。

　　

安装方式:

　　 　　 　　npm安装——save-dev babel-plugin-import 　　 　　

配置方式:

　　 　　 　　模块。出口={ 　　devtool:“eval-source-map”, 　　 　　条目:__dirname +“/app/main.js”, 　　输出:{ 　　路径:__dirname +“/构建”, 　　文件名:“bundle.js” 　　}， 　　 　　模块:{ 　　加载器:( 　　{ 　　测试:/\ . js/美元, 　　排除:/node_modules/, 　　装载机:“babel-loader”, 　　查询:{ 　　预设:“es2015”、“反应”, 　　插件:[//["进口",{libraryName:“antd”风格:“css”}]//需要配置的地方 　　)//} 　　}， 　　{ 　　测试:/\ . css/美元, 　　装载机:“style-loader css-loader !” 　　} 　　] 　　} 　　}; 　　 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

详解蚂蚁设计反应的安装和使用方法