React搭建项目（全家桶）

安装React脚手架：
```
npm install -g create-react-app
```

创建项目：
```
create-react-app app
```
app：为该项目名称

启动项目：
```
cd appnpm start
```

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

安装 Ant Design：

npm install antd --save 或cnpm install antd --save

cnpm i antd -S

没有权限请使用 sudo

配置 Ant Design 按需加载：

babel-plugin-import（推荐）。

首先暴露配置文件：
```
npm run eject
```
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting:https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

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

在 package.json 中配置 babel （）
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         }       ]     ] }

babel-plugin-importstyle'css'true，这样会引入 less 文件。

安装配置 less 预处理器

npm install less less-loader --save-dev或cnpm install less less-loader --save-devcnpm 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); // 浮层阴影

Normalize.css ( 样式重置 )

npm install normalize.css --save或cnpm install normalize.css --savecnpm i normalize.css -S

安装完成后在入口文件index.js中引入即可。

import 'normalize.css';

持续更新中...

文章来源: React搭建项目（全家桶）

标签

react

css

less

babel

install