搭建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 //路由部分
原文地址:https://www.cnblogs.com/huihuihero/p/10990394.html
时间: 2024-11-09 02:09:46