React后台框架搭建

栏目: 服务器 · 发布时间: 4年前

内容简介:node: v.8.11.2npm: 5.6.0进入项目目录,创建项目

一、项目初始化:

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复制代码

成功示例:

React后台框架搭建

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

打开项目

  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框架中的对应代码)

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

如有疑问,请联系 React后台框架搭建


以上所述就是小编给大家介绍的《React后台框架搭建》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Sexy Web Design

Sexy Web Design

Elliot Stocks / SitePoint / 2009-03-28 / $39.95

Description A guide to building usable, aesthetically pleasing interfaces for web sites and web applications by applying timeless principles of user-centered design. This book focuses on practical ......一起来看看 《Sexy Web Design》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具