React脚手架搭建及移动端适配解决方案（详细）

1.创建脚手架

(1)例如在D盘新建名为"react"文件夹 

mkdir react 

进入到react文件夹后 

cd ./react

搭建脚手架，需要时间等待

npx create-react-app "项目名"

到此步后，脚手架搭建成功

 

 

接下来就是移动端适配问题了！！！

 

2.移动端适配

如果react_project项目里有.git文件夹的，一定要把其删掉！！！否则会被认为是git在管理我的项目，下面操作会告诉大家不删.git文件的话哪里会出现错误 别急哈

进入到"react_project"项目

cd ./react_project

npm run eject 会复制所有依赖文件和相应的依赖（webpack、babel等）到你的项目。是个单向的操作，一旦 eject ，npm run eject的操作是不可逆的。本人的理解就是,将config文件夹暴露显示在目录中。刚刚说不删除.git文件会报错，就是在这个位置。

npm run eject

并且此刻你会发现，目录中会出现个config文件夹，点进去，找到这个文件"webpack.config.js" 

 在下方图片的这个位置中放入这段配置（每个属性后面已加以注释方便理解）：

 require('postcss-px-to-viewport')({
              viewportWidth: 750, // (Number) 转换的基础参考比例(设计稿的宽度)
              unitPrecision: 3, // (Number) 转换之后保留多少位小数
              viewportUnit: "vw", // (String) 转换之后的单位
              selectorBlackList: [], // (Array) 哪一些指定的选择器不进行转换
              minPixelValue: 1, // (Number) 最小开始转换的像素值
              mediaQuery: false // (Boolean) 是否允许在媒体查询中使用转换
            }),

放入配置后的样子 

 

很快就完成配置啦，接下来就是安装“postcss-px-to-viewport”包

postcss-px-to-viewport，将px单位自动转换成viewport单位

安装

npm install postcss-px-to-viewport --save-dev

 

恭喜各位，配置已完成，接下来就是测试移动端适配是否成功啦！

3.测试

(1)修改App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        RJ最帅！ 
        开玩笑啦！
        成功的你才是最帅最棒的!
      </div>
    );
  }
}
export default App;

(2)修改App.css

.App {
  width: 750px;
  height: 200px;
  background: #58bc58;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}

(3)启动项目

npm start

(4)成果

没问题！成功了！恭喜恭喜！

自己测不同的机型，如果盒子自适应了不会出现宽度过大或过小的情况，那就放心去写你的移动端项目吧。