reactJS -- 14 AntDesign样式框架介绍

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_34345753

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量93

点赞数

文章标签： javascript python webpack ViewUI

原文链接：https://my.oschina.net/u/2991733/blog/1154436

版权

2019独角兽企业重金招聘Python工程师标准>>>

一. 框架（快速样式）

material-ui 官网链接： http://www.material-ui.com/#/

阿里芭比框架：https://ant.design/index-cn

1.安装

使用 npm 或 yarn 安装#

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install antd --save

$ yarn add antd

如果你的网络环境不佳，推荐使用 cnpm。

2.在全局index.js 中引入资源

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

3.在webPack.config.js中

对css 解析loader 进行变更，不需要进行本地化编码，恢复为以下

      //下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

4.在footer.js 中使用

需要什么样式就引入。

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'antd'
//var footerCss = require("../../css/footer.css");
//export 暴露
export default class ComponentFooter extends React.Component{
  render(){   //解析类的输出

    var footerConvertStyle = {
        "miniFooter": {
          "backgroundColor": "#333",
          "color": "#fdd",
          "paddingLeft": "20px",
          "paddingTop": "3px",
          "paddingBottom": "3px"
        }

    }
    return (
      <footer style={footerConvertStyle.miniFooter}>
        <h1>这里是页脚，一般放置版权信息</h1>
        <Input placeholder="Basic usage" />
      </footer>
    )
  }
}

转载于:https://my.oschina.net/u/2991733/blog/1154436