jinjinwa / umi-antd-mobile Goto Github PK
View Code? Open in Web Editor NEW基于umi+antd-mobile的移动端项目模板
基于umi+antd-mobile的移动端项目模板
初入门react,到umi还能循序渐进,但是到了这个demo, 顿时头大.
问题?
求教:项目中是通过什么组件将Less中的px自动转成rem的啊?
在src/pages/index/index.js文件中测试,把antd-mobile的标签页放到页面中,显示结果是这样的:
https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-mutlitabs
import React, { PureComponent } from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';
class Index extends PureComponent {
renderContent = tab =>
(<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
<p>Content of {tab.title}</p>
</div>);
render() {
const tabs = [
{ title: '1st Tab' },
{ title: '2nd Tab' },
{ title: '3rd Tab' },
{ title: '4th Tab' },
{ title: '5th Tab' },
{ title: '6th Tab' },
{ title: '7th Tab' },
{ title: '8th Tab' },
{ title: '9th Tab' },
];
return (
<div>
<WhiteSpace />
<Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
{this.renderContent}
</Tabs>
<WhiteSpace />
</div>
);
}
}
export default Index;
在less文件中都是用px写的, 在浏览器中发现都自动转成了rem格式, 请问这一步是有特殊处理吗?
我在开发模式不出现错误 以但打包发布就报错,感觉是webpack build 配置有问题,求解决!
错误如下:
umi build
Build completed in 42.202s
ERROR Failed to compile with 1 errors 3:47:22 PM
error in ./src/pages/index/index.less
Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'images/bg.png' in 'D:\www\dtk_react_flow_www\wap\src\pages\index'
at factory.create (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\Compilation.js:888:10)
at factory (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:401:22)
at resolver (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:224:22)
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:2830:7
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:6877:13
at normalResolver.resolve (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)
@ ./src/pages/index/index.js 38:36-59
@ ./src/pages/.umi-production/router.js
@ ./src/pages/.umi-production/umi.js
@ multi ./src/pages/.umi-production/umi.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: umi build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tql16\AppData\Roaming\npm-cache_logs\2019-08-05T07_47_22_305Z-debug.log
debug.log 内容:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]build: [email protected]
6 info lifecycle [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle truebuild: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\www\dtk_react_flow_www\wap\node_modules.bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\personalcenter\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\backgroundtool\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\kissweather\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\mirrorscreen\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\Bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Docker\Docker\Resources\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files\Git\cmd;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Program Files\nodejs;C:\Users\tql16\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;"C:\Program Files\Java\jdk-11.0.1\bin; C:\Program Files\Java\jdk-11.0.1\jre\bin";;C:\Users\tql16\AppData\Local\Programs\Fiddler;C:\Users\tql16\AppData\Roaming\npm
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]build: CWD: D:\www\dtk_react_flow_www\wapbuild: Args: [ '/d /s /c', 'umi build' ]
10 silly lifecycle [email protected]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: nullbuild: Failed to exec build script
12 info lifecycle [email protected]
13 verbose stack Error: [email protected] build: umi build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\www\dtk_react_flow_www\wap
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: umi build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
将define配置加入不生效, 相同的配置在antd-pro脚手架是生效的
"define": {
"process.env.TEST": 1,
"USE_COMMA": 2,
},
项目打包生成的静态文件下的index.html直接在本地浏览器打开访问是空的 请问这是什么原因啊
currHref 写错了 位置。
每次判断都是不同的。
class BasicLayout extends PureComponent {
render() {
const { children, location, loading } = this.props;
let currHref = '';
const { href } = window.location; // 浏览器地址栏中地址
if (currHref !== href) {
// currHref 和 href 不一致时说明进行了页面跳转
NProgress.start(); // 页面开始加载时调用 start 方法
if (!loading.global) {
// loading.global 为 false 时表示加载完毕
NProgress.done(); // 页面请求完毕时调用 done 方法
currHref = href; // 将新页面的 href 值赋值给 currHref
}
}
if (BarRoutes.indexOf(location.pathname) < 0) {
return <div>{children}</div>;
}
return (
<div style={{ overflowX: 'hidden' }}>
<MenuBar pathname={location.pathname}>{children}</MenuBar>
</div>
);
}
}
应该为
let currHref = '';
class BasicLayout extends PureComponent {
render() {
const { children, location, loading } = this.props;
const { href } = window.location; // 浏览器地址栏中地址
if (currHref !== href) {
// currHref 和 href 不一致时说明进行了页面跳转
NProgress.start(); // 页面开始加载时调用 start 方法
if (!loading.global) {
// loading.global 为 false 时表示加载完毕
NProgress.done(); // 页面请求完毕时调用 done 方法
currHref = href; // 将新页面的 href 值赋值给 currHref
}
}
if (BarRoutes.indexOf(location.pathname) < 0) {
return <div>{children}</div>;
}
return (
<div style={{ overflowX: 'hidden' }}>
<MenuBar pathname={location.pathname}>{children}</MenuBar>
</div>
);
}
}
手机:摩托罗拉
系统:4.0.4
浏览器:自带浏览器
表现:
输入地址,白屏,但是Pro的标题图标出来了;
ps:我已经把umi的targets改成andriod:4了
本地开发时将https://hmj.jahwaec.com
修改localhost:8099
返回请求都是html页面,即使在mock文件下创建mock文件也不行。
less改变,页面未发生任何变化,需要手动刷新才可以。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.