zoukankan      html  css  js  c++  java
  • React项目的一些配置以及插件

    创建项目

    1、安装cra

    npm install -g create-react-app

    2、创建项目   “react-lesson”  为文件名

    create-react-app react-lesson

    3、启动项目

    npm start

     

    使用第三方组件

    1、antd:

    npm install antd --save

    使用:

    import Button from 'antd/lib/button'
    import 'antd/dist/antd.css'

    很明显,引用时过长,不利于使用

    下面来进行 按需加载配置:

    安装 react-app-rewired 取代 react-scripts,可以扩展 webpack 配置,类似 vue.config.js

    npm install react-app-rewired customize-cra babel-plugin-import -D

    安装完成后,执行下面操作

    // 根目录创建 config-overrides.js
    const { override, fixBabelImports, addDecoratorsLegacy } = require("customize-cra")
    
    module.exports = override(
      fixBabelImports("import", {
        libraryName: "antd", // antd按需加载
        libraryDirectory: "es",
        style: "css"
      }),
      addDecoratorsLegacy() // 配置装饰器,如果不用装饰器,可以不要这一步,如果需要用装饰,还需要安装下面的插件
    )

    (支持装饰器配置)

    npm install -D @babel/plugin-proposal-decorator

    修改package.json

    "scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test",
      "eject": "react-app-rewired eject"
    }

    Redux

    异步:Redux只是个纯粹的状态管理器,默认只支持同步,实现异步任务  比如 延迟、网络请求,需要中间件的支持,比如我们使用最简单的 redux-thunk 和 redux-logger

    npm install redux-thunk redux-logger --save

    vscode插件

    格式化插件:Prettier - Code formatter                           --如果这个不能用,可以尝试把node_modules删掉,用npm再装一次,cnpm好像跟这个插件有点冲突

    自动导入插件:Auto Import       

    快捷创建react模板:ES7 React/Redux/GraphQL/React-Native snippets   (使用rcc创建class组件模板,使用rcf创建function组件模板)

     

  • 相关阅读:
    js遍历Object所有属性
    使用JAVA开发微信公众平台(一)——环境搭建与开发接入
    使用Vue.js实现列表选中效果
    c#以POST方式模拟提交表单
    vue项目里的日期格式化
    Hadoop概念学习系列之Hadoop、Spark学习路线(很值得推荐)
    CentOS下的Mysql的安装和使用
    CentOS中zip压缩和unzip解压缩命令详解
    vue路由跳转传参数
    Linux上安装Hadoop集群(CentOS7+hadoop-2.8.0)
  • 原文地址:https://www.cnblogs.com/haishen/p/11706971.html
Copyright © 2011-2022 走看看