React後臺框架搭建

1、項目初始化：

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複製代碼

成功示例：

2、刪減基礎項目非必要代碼

打開項目

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();複製代碼

3、添加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行複製代碼

4、引入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行複製代碼

從新運行項目，此時樣式正常顯示且爲按需加載

5、添加redux,router支持

安裝依賴

npm install react-redux react-router-dom複製代碼

src/stroe.js添加文件（拆分dva框架中的對應代碼）

後續代碼見項目註釋...

若有疑問，請聯繫