手摸手!带你搭建react移动端项目环境。

    最近有需求,需要开发一套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  具体自己确定

以上就是项目整体搭建了  谢谢

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值