搭建一个react项目

Posted 2021-12-29 huihuihero

搭建react整体框架

1、电脑里新建文件夹
2、npm create react-app 项目名称    如 npm create react-app huihuidemo / yarn create react-app huihuidemo
3、cd 项目名称    如 cd huihuidemo
4、npm run start
5、安装antd    cnpm i antd -S / yarn add antd 
6、在css文件中最顶部引入  @import '~antd/dist/antd.css';   //分号不能丢
    (也可在js文件里直接引入，  import 'antd/dist/antd.css';  )
7、在js jsx文件中引入需要使用的组件   import Button,Icon... from 'antd';
8、(以后必要)安装路由和ajax请求插件   yarn add react-router-dom axios 

具体可见antd官网   https://ant.design/docs/react/use-with-create-react-app-cn

解决react脚手架不支持less的问题

1、安装less相关包    cnpm i less less-loader -S / yarn add less less-loader 
2、暴露webpack    npm run eject / yarn eject   (此语句执行后会有config和scripts文件夹生成)   
      若出现以下错误: (Remove untracked files, stash or commit any changes, and try again.)
      是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件，而我们本地却没有文件仓库
      这样解决： 先输入  git add .      再输入  git commit -m 'up' 
3、找到webpack.config.js的const cssRegex = /\.css$/; (第38行) 做出如下改动
    - const cssRegex = /\.css$/;
    + const cssRegex = /\.(css|less)$/;
4、找到webpack.config.js的const loaders ，在里面最后一组后面添加
     loader: require.resolve('less-loader') ,
添加之后是这样的：
const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && ...
       ,
      ...
      ,
      ...
      ,
      
        loader: require.resolve('less-loader')
      ,
    ].filter(Boolean);
5、大功告成

ps:若npm start失败，出现这个问题(Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx' )
则可以
1、删除 node_modules 文件夹
2、运行 yarn
3、cnpm i less less-loader -S / yarn add less less-loader
3、重新 npm start / yarn start

react项目文件层次架构

config
public
  |__static
       |__ueditor  //百度编辑器
scripts
src    
|__api   //axios前后端交接
     |__config.js  //配置服务器地址
     |__index.js  //引入接口并暴露
     |__statecode.js  //错误提醒状态码模块
|__image 
|__pages   //用于存放项目的各个模块页面
     |__usercenter  //用户中心模块
           |__userlogin.js   
           |__userchange.js
           |__usercenter.less   //用户中心模块less
     |__order  //订单模块
           |__details.js
           |__userorder.js
           |__order.less  
     |__page3
           |__page3-1.js
           |__page3-2.js
           |__page3.less
     |__index.js    //首页，路由一般在此页
     |__index.less   //首页的less
|__index.js
|__index.css
|__router.js  //路由部分