当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React搭建项目（全家桶）

React搭建项目（全家桶）

2019年06月05日  | 移动技术网IT编程  | 我要评论

泗县徐北淮,链接交易,韩都衣舍ceo

  • 安装react脚手架：
  • npm install -g create-react-app
  • 创建项目：
  • create-react-app app

     app：为该项目名称

  • 启动项目：
  • cd app
    npm start

项目创建完成，目录如下：

  • 安装 ant design： 
    npm install antd --save
或
    cnpm install antd --save
    cnpm i antd -s

    没有权限请使用 sudo

  • 配置 ant design 按需加载：

使用 （推荐）。

  1. 首先暴露配置文件： 
    npm run eject

    note: create react app 2+ supports typescript, sass, css modules and more without ejecting: 

    该操作为永久性，不可逆的。

  2. 在 package.json 中配置 babel （需要安装 babel-plugin-import ）
    error: cannot find module 'babel-plugin-import'
    需要安装 babel-plugin-import
     
    npm install babel-plugin-import --save-dev
或
cnpm install babel-plugin-import --save-dev
    cnpm i babel-plugin-import -d

    babel 配置如下：

    "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryname": "antd",
          "librarydirectory": "es",
          "style": true
        }
      ]
    ]
}

    使用  的 style 配置来引入样式，需要将配置值从 'style': 'css' 改为 'style': true，这样会引入 less 文件。

  • 安装配置 less 预处理器 
    npm install less less-loader --save-dev
    或
    cnpm install less less-loader --save-dev
    cnpm i less less-loader -d

    在 config/webpack.config.js 中配置 less:

    {
  test: /\.less$/,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader', // translates css into commonjs
  }, {
    loader: 'less-loader', // compiles less to css
    options: {
      modifyvars: {
        'primary-color': '#1da57a',
        'link-color': '#1da57a',
        'border-radius-base': '2px',
        // or
        'hack': `true; @import "your-less-file-path.less";`, // override with less file
      },
      javascriptenabled: true,
    },
  }]
}

    配置位置如下：

  • 配置 ant design 主题: 在上图 332行 -> less配置中options下的 modifyvars 中 重新定义变量值
    ant design 官网给出的可配置项：

    @primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

     

  • 安装 css resets: normalize.css ( 样式重置 )
    npm install normalize.css --save
    或
    cnpm install normalize.css --save
    cnpm i normalize.css -s
    安装完成后在入口文件index.js中引入即可。
    import 'normalize.css';

     

  • 持续更新中...

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网