最近有需求,需要开发一套react的webapp项目。所以自己搭建一套环境。具体如下
一:react项目构建使用脚手架:create-react-app
执行以下命令搭建项目
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
创建后的结构如下。
此处注意! 默认react的配置文件是隐藏的,所以执行命令
npm run eject 弹出配置文件--不可逆操作--用于修改默认的配置
如果搭建好的项目结构没有进行任何删减的话执行此操作无任何问题,如果项目结构进行删减修改操作后,执行此命令会报错,具体解决办法如下 执行完下列命令后 再执行 npm run eject 就可以了
进入项目目录 git bash
1:git init //初始化为git仓库
2:git add .
3:git commit -m 'Sever-clone'
运行完项目后是以下结构
下面对项目结构进行重构 具体按个人需求来设置
1:src文件夹下除了index.js 全部删除
2:新建模块文件夹
3:新建路由文件夹
index.js中引入Router并且挂载
二:配置@符号 替代src
三:引入rem适配方案 这里引入的是淘宝手淘 lib-flexible进行适配
1:执行以下命令
npm i lib-flexible --save
npm i postcss-px2rem-exclude --save
index.js文件中引入lib-flexible
同时进入根目录public文件夹下面找到index.html 只要有viewport的meta标签全部注释
2:进入根目录下的config文件夹 找到webpack.config.js 添加此项
默认remUnit参数为75,按照设计稿尺寸刚刚好,因为我的需求不一样所以使用的是37.5 具体自己确定
以上就是项目整体搭建了 谢谢