react搭建项目

2022/4/2 6:23:14

本文主要是介绍react搭建项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.npm install create-react-app -g
2.create-react-app demo  (demo为项目名)
3.cd demo   
4.npm install
5.npm start     //运行

 

public里面的文件:

    favicon.ico即为html的ico 图标,可以替换
    manifest.json,是app的配置文件,设置icons,首页路径等;

src文件夹:

    index.js 是入口文件
    App.js是最大的组件App
    registerserviceworker.js 用来做资源离线的缓存,registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。

常用命令

    npm start 启动项目,在 http://localhost:3000查看项目运行
    npm run build 项目打包,生成build文件夹
    npm run eject弹出配置文件,用于修改默认的配置,操作不可逆
    npm test --测试

安装Ant Design

  npm install antd --save  或者 cnpm install antd-mobile --save

  npm install react-app-rewired --save-dev
配置 package.json

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

项目根目录创建一个 config-overrides.js 用于修改默认配置

  由于引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra,否则会出现问题。

  npm install customize-cra --save-dev

  npm install less-loader less --save-dev

  cnpm install --save-dev react-app-rewire-less

 

  const {
      override,
      fixBabelImports,
      addLessLoader,
    } = require("customize-cra");
 
 
   module.exports = override(
      fixBabelImports("import", {
         libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
     }),
     addLessLoader({
       javascriptEnabled: true,
       modifyVars: { "@primary-color": "#1DA57A" }
     })
   )

如果启动报Cannot find package 'babel-plugin-import'错误,则说明axios所需的插件没有装上,需安装

  npm install axios qs --save

  npm install antd babel-plugin-import --save



这篇关于react搭建项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程