Сначала перейдите по адресу github https://github.com/gaohan1994/react-vw-layout, если у вас есть время, чтобы поставить палец вверх~~
2018-4-19日更新适配到安卓低版本的插件buggyfill（是我疏忽导致大家以为vw解决方案兼容范围过小，原第六步css-modules改为buggyfill，css-modules顺延为第七步）
2018-4-16日更新css-modules配置，前面步骤不变，可直接跳到第七步。
слова, написанные впереди
Прежде чем я столкнулся с решением vw, разработанным г-ном Мо, я использовал решение адаптации первого поколения Али.lib-flexibleПосле разработки комплекта H5 с использованием решения vw я был действительно впечатлен мощью vw. Поскольку г-н Мо дал только метод конфигурации vue-cli и не предоставил соответствующую версию каркаса серии реакций, create-реагировать-приложение, увидев конфигурацию г-на Мо, я создал проект в create- Реакция-приложение scaffolding. Вышеупомянутый набор настроек был сделан, чтобы братья и сестры, которые используют реакцию, также могли использовать решение vw! Нечего сказать, приступайте к работе
Как использовать вью:«Как использовать vw для мобильной адаптации в проектах Vue»Для получения подробной информации о том, как использовать, см.Поговорим об адаптации мобильных страниц Использование Flexible для реализации терминальной адаптации страниц H5 Taobao
Как в React используется самое совершенное решение для мобильной адаптации. В этой статье рассказывается только о том, как настроить проект, созданный приложением create-react-app. Чтобы узнать о конкретных целях и использовании каждого плагина, сначала обратитесь к статье г-на Мо. Я считаю, что статья г-на Мо сделала это очень ясно.
«Как использовать vw для мобильной адаптации в проектах Vue»
«Как использовать vw для мобильной адаптации в проектах Vue»
«Как использовать vw для мобильной адаптации в проектах Vue»
Важные вещи говорятся трижды. Обязательно сначала прочтите статью г-на Дамо, а затем прочтите ее, иначе вы можете запутаться.
1. Создайте проект
create-react-app react-vw-layout
cd react-vw-layout
npm start
Откройте http://localhost:3000/, чтобы увидеть страницу приветствия реакции, первый шаг выполнен успешно.
2. Откройте параметры конфигурации
Поскольку React по умолчанию скрывает конфигурацию веб-пакета, ее необходимо отображать вручную.
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N)
y
После запуска eject структура проекта выглядит следующим образом
Второй шаг закончен, и начинается третья часть настройки различных плагинов.
3. Добавьте конфигурацию
Установить плагин PostCss
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
существуетconfig/webpack.config.dev.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
Расположение добавления кода конфигурации следующее
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
//加入地点
//加入地点
//加入地点
],
},
},
],
},
Код, который необходимо добавить, выглядит следующим образом
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;
}
сноваnpm startСтраница выглядит следующим образом
Можно сказать, что это очень хорошо, и последняя проблема — настроить файл конфигурации веб-пакета в производственной среде.
5. Настройте рабочую среду webpack.config.js
Операция аналогична настройке файла тестовой среды.Сначала установите подключаемый модуль и настройте надстройку postCss в том же месте.
Выполнить после завершения настройкиnpm run buildОткрытымstatic/css/main.********.css
6. Добавьте конфигурацию viewport-units-buggyfill
这一步不过在大漠先生的文章中或是我自己的项目中都已经配置，系我自己的疏忽忘记写在文章中导致大家以为vw兼容范围小。抱歉！！！
Открытымpublic/index.html
первый в<head></head>Представьте Али 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 выглядит следующим образом
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
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>
<!--
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`.
-->
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
</body>
</html>
Повторный запускnpm startОткройте страницу, чтобы найти:
Если вы столкнетесьimgЕсли он не может отображаться, добавьте глобальный css
img {
content: normal !important;
}
OKКонфигурация выполнена успешно. Это подходит для более ранних моделей Android.
7. Добавляем конфигурацию css-модулей
Не используется для общих небольших проектовcss-modulesЕго можно провести, но рекомендуется использовать больше страниц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';
Изменить способ ссылки на CssclassName=>styleName
Изменить метод экспортаexport default App=>export default CSSModules(App, styles);
сохранить, выполнить зановоnpm startОшибка обнаружения страницы просмотра
Причина в том, что он не открываетсяcss importконфигурация, на данный моментimport styles from './App.css';Оператор не был успешно введенcssдокумент.
Открытымwebpack.config.dev.jsПрисоединяйсяmodules: trueНайдите следующее место
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
//看这里看这里看这里看这里
modules: true,
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
сохранить, выполнить сноваnpm startПросмотр страницы
class名Слишком искажено и не подходит для отладки, откройте еще разwebpack.config.dev.jsНайдите следующее место, чтобы добавить операторlocalIdentName:'[name]_[local]_[hash:base64:5]'
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
//看这里看这里看这里
localIdentName: '[name]_[local]_[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
выполнить сноваnpm startПросмотр страницы
OJBK вы сделали!
Наконец, те же шаги добавляются кwebpack.config.prod.jsсередина
воплощать в жизньnpm run buildПросмотр файлов пакета
Пойдем, ок.
КОНЕЦ. Другие вещи, чтобы сказать
Адрес git будет отправлен снова, я надеюсь, что смогу помочь вам, когда у вас будет время~Спасибо~~! ! https://github.com/gaohan1994/react-vw-layout Если конфигурация не удалась, вы можете обратиться к ней. В частности, есть много мест, где могут быть изменены css-модули.
Когда я увидел план адаптации vw г-на Мо, он действительно бросился мне в глаза.Попробовав его, я почувствовал, что производительность этого плана очень высока.На самом деле, конфигурация по этой статье уже может удовлетворить довольно много проектов.
кроме одного не используетсяВ то же время я большой страдалец Typescript! Я успешно настроил его на смертьcss-modules, конечно, я успешно настроил его самcss-modulesЕсть много мест, которые нужно изменить, и в будущем будет опубликована статья, чтобы продолжить делиться ею.create-react-app typescript versionизvw + css-modulesверсия, и теперь я оглядываюсь на те дни, когда я настраивал это было действительно хуже смерти. . . разные Ступайте на яму. Я напишу еще одну статью, когда кому-то понадобится решение ts + react + vw. Вот и все, я надеюсь, что вы все весело проведете время, используя решение vw!