React后台框架搭建

一、项目初始化：

node: v.8.11.2

npm: 5.6.0

npm install -g create-react-app    // 当前版本3.0.1复制代码

进入项目目录，创建项目

create-react-app tempalte_console    // 等待安装完成复制代码

cd template_console && npm run eject    // 输入ynpm复制代码

npm start复制代码

成功示例：

二、删减基础项目非必要代码

打开项目

1. 删除"src/index.css","src/App.js","src/App.test.js","src/App.css","src/logo.svg"文件
2. 修改“src/index.js”文件

   /*依赖包*/
   import React from 'react';
   import ReactDOM from 'react-dom';
   import * as serviceWorker from './serviceWorker';
   
   /*入口类*/
   class Main extends React.Component {
       render() {
           return (
               <div>123</div>
           )
       }
   }
   
   ReactDOM.render(<Main/>, document.getElementById('root'));
   
   // If you want your app to work offline and load faster, you can change
   // unregister() to register() below. Note this comes with some pitfalls.
   // Learn more about service workers: https://bit.ly/CRA-PWA
   serviceWorker.unregister();复制代码

三、添加sass、less、css-modules支持

less支持

安装依赖

npm install less less-loader --save-dev复制代码

修改config/webpack.config.js文件

// 44行
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// 47行复制代码

// 456行
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      'less-loader'
  ),
},
// 485行复制代码

src添加index.less文件，并添加样式

div{ color:red; }复制代码

修改src/index.js文件，引入样式

...
/*样式*/
import './index.less';
...复制代码

重启服务查看效果-字体变红

sass支持

安装依赖

npm install node-sass --save-dev    // 若安装不成功，可查看之前发的文章如何安装node-sass复制代码

添加index.scss文件

div{ color:yellow; }复制代码

修改src/index.js文件，引入样式

...
/*样式*/
import './index.scss';
...复制代码

重启服务查看效果-字体变黄

css-modules支持

默认支持css-modules方式使用样式，不需要配置以及安装任何插件，但是文件的命名规则为以下三种方式时才能使用

index.module.css

index.module.scss

index.module.less

添加index.module.css文件

div{ color:blue; }复制代码

修改src/index.js文件，引入样式

...
/*样式*/
import './index.module.css';
...复制代码

重启服务查看效果-字体变蓝

config/webpack.config.js配置别名

// 272行
alias: {
  '@': paths.appSrc,
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
},
// 279行复制代码

四、引入Ant Design of React样式库

npm install antd --save    // 当前版本 3.18.1复制代码

配置按需引入组件（不配置的话如果不手动引入全局样式或者单个组件样式，则组件样式不会显示）

npm install babel-plugin-import复制代码

在package.json文件中添加css支持

// 127行
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }]
    ]
  },
// 140行复制代码

重新运行项目，此时样式正常显示且为按需加载

五、添加redux,router支持

安装依赖

npm install react-redux react-router-dom复制代码

src/stroe.js添加文件（拆分dva框架中的对应代码）

后续代码见项目注释...

如有疑问，请联系