跟我一起使用create-react-app脚手架搭建vw-layout解决方案
之前也是看过大漠的vw适配Vue-cli,我自己写H5,还有使用vue做项目的时候,会搭建大漠博客中的那一套。
现在在github上面,看见了一位博主使用create-react-app也是用vw适配,非常开心,现在我们一起使用vw给react适配移动端项目吧~
先放上博主大大的开源地址:https://github.com/gaohan1994/react-vw-layout
给各位无私开源的程序员们点赞,你们是最可爱的人儿。
1.创建项目
cnpm install -g create-react-app
create-react-app react-vw-layout
cd react-vw-layout
npm start
2..打开配置选项
由于react默认隐藏webpack配置需要手动显示。
eject完的项目如下
第二步收工,第三部开始配置各种插件。
3.增加配置
安装postCss插件
cnpm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
在config/webpack.confi.js文件中进行如下修改
1.引入postCss插件
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
2.加入postCss配置
加入配置代码位置如下
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
// postcssNormalize()
// 加入地点
// 加入地点
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
需要加入的代码如下
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
4.测试
修改App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
hello vw-layout
</div>
);
}
}
export default App;
修改App.css
.App {
width: 750px;
height: 200px;
background: #f27a7a;
color: #ffffff;
line-height: 200px;
text-align: center;
}
接下来运行项目,运行项目会报错
解决办法为:
cnpm i cssnano-preset-advanced --save-dev
运行项目
5.生产环境打包项目
使用npm run build报错
解决办法为修改package.json文件
[
"last 2 versions",
"android 4",
"opera 12"
],
接下来打包项目成功
打开static/css/main.********.css
6.加入viewport-units-buggyfill配置
打开public/index.html
首先在
中引入阿里cdn<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
在body中,加入如下js代码:
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
最终index.html如下
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
重新执行npm start打开页面发现:
如果遇到img无法显示,则添加全局css
img {
content: normal !important;
}
这样就适配了低版本安卓机型
7.加入css-modules配置
一般的小项目不使用css-modules已经可以hold住了,但是页面多起来还是建议使用css-modules,下面介绍一下用法:
npm i --save react-css-modules
在App.js文件中引入插件 import CSSModules from 'react-css-modules';
修改css文件的引入方式 从import './App.css';修改为import styles from './App.css';
修改引用Css方式 className=>styleName
修改导出方式 export default App=>export default CSSModules(App, styles);
保存,从新执行npm start查看页面发现失败
原因是未打开css import配置,此时import styles from './App.css';该语句并未成功引入css文件。
打开webpack.config.js加入modules: true 找到如下位置
{
loader: require.resolve('css-loader'),
// options: cssOptions,
// 代码看这里看这里
options:{
//添加添加添加
modules:true,
importLoaders:1,
}
},
保存,再次执行npm start查看页面
是这个class名太过乱码不适于调试,再次打开webpack.config.dev.js 找到如下位置加入语句localIdentName:'[name][local][hash:base64:5]'
{
loader: require.resolve('css-loader'),
// options: cssOptions,
// 代码看这里看这里
options:{
//添加添加添加
modules:true,
importLoaders:1,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
}
再次运行项目
我们可以看到对应的class,方便我们在项目中的调试
最后我们执行npm run build 查看打包文件
嗯,已经大功告成啦啦啦啦啦啦啦
开心,再次感谢作者大大无私的分享经验
原文地址:https://www.cnblogs.com/smart-girl/p/11389368.html
- tensorflow LSTM + CTC实现端到端OCR
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
- 黑客比程序员牛在哪?
- oracle工具集初探(r4笔记第8天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(二)Log4j讲解与整合
- 京东JData算法大赛-高潜用户购买意向预测(github源码)
- 巧用linux命令做图片下载器(r4笔记第7天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(五)结合MockMvc进行服务端的单元测试
- 关于order by中的数据排序(r4笔记第6天)
- 深度学习CTPN+CRNN模型实现图片内文字的定位与识别(OCR)
- Markdown语法讲解及MWeb使用教程
- 通过Linu命令实现屏幕录制和回放(r4笔记第5天)
- 用keras对国产剧评论文本的情感进行预测
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 持续集成gitlab-ci.yml配置文档基础
- php基础教程 第二步 通俗易懂的学习变量、常量与数据类型
- git | Windows下如何利用Linux的命令
- python3 爬虫第三步 本文包你学会正则 不会就来锤我
- php基础教程 第三步 学习字符串及相关函数
- php基础教程 第四步 学习运算符
- php基础教程 第五步 逻辑控制
- php基础教程 第六步 学习数组以及条件判断switch补充
- php基础教程 第七步数组补充及循环基础
- php基础教程 第八步循环补充
- php基础教程 第九步 自定义函数
- php基础教程 第十步 阶段性知识补充
- php基础教程 第十一步 面向对象
- php基础教程 第十一步 面向对象补充
- Serverless|Framework——图文玩转 AWS Lambda