ant-design-mobile框架踩坑(一)
来源:互联网 发布:阿里云域名注册价格 编辑:程序博客网 时间:2024/06/10 16:22
一直在用ant.design桌面版,现在退出了移动版,必须研究一下,但是这不看不要紧,一看就遇到了好多坑,好多坑···
1.根据官方文档,使用dva脚手架生成项目目录,这样简单一些,如果你喜欢自己创建文件夹的感觉,你也可以自己创建自己的目录结构。由于是试验可用性,我就用了dva生成了个目录结构;
$ dva new mobileApp
创建完成后,已经是npm install过了,所以不需要重新下载依赖。
2.按需加载ant mobile组价的js和css。
首先安装依赖
$ npm install antd-mobile babel-plugin-import --save
修改roadhog(可以理解为简化版的webpack)的配置文件.roadhogrc
文件:
{ "entry": "src/index.js", "env": { "development": { "extraBabelPlugins": [ "dva-hmr", "transform-runtime", ["import", { "libraryName": "antd-mobile", "style": "css" }] ] }, "production": { "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd-mobile", "style": "css" }] ] } }}
3.配置支持Icon,这个真是很重要的,也是很有用的,在移动端,如果没有Icon,那是多么的痛苦;
这个配置在官网说的不是很清楚,首先解释下,roadhog这个没有处理Icon的功能,但是他有webpack的接口,也自动寻找项目根目录下的webpack.config.js
文件,读取里面的配置;所以通过在项目根目录中添加webpack.config.js文件来配置Icon的svg的loader。(真是神坑啊)
const path = require('path');module.exports = function(webpackConfig, env) { const svgDirs = [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件 // path.resolve(__dirname, 'src/assets'), // 2. 自己私人的 svg 存放目录 ]; // 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录 // https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162 // https://github.com/kisenka/svg-sprite-loader/issues/4 webpackConfig.module.loaders.forEach(loader => { if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) { loader.exclude = svgDirs; } }); // 4. 配置 webpack loader webpackConfig.module.loaders.unshift({ test: /\.(svg)$/i, loader: 'svg-sprite', include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理 }); return webpackConfig;}
这里配置完了,运行的话,还是不行,你会发现没有安装`svg-sprite-loader`,新想这个简单,直接npm install安装就好了,安装结束后,再运行,还是报错,经错查资料发现:如果你的ant-mobile的版本是`1.x`的话`svg-sprite-loader`的版本必须是`svg-sprite-loader@^0.3.1`。······可是目前ant mobile的最高版本才是1.6啊亲。所以:
$ npm install svg-sprite-loader@0.3.1 --save-dev
4.配置玩这些,你就可以写个demo了,但是这里又出现了问题,为毛我打开浏览器手机模式后,页面中的字体,图标都大一倍。机智的我想到的肯定是viewport的问题。所以index.html中的修改:
将生成的publick/index.html文件中的viewport修改成:
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">
好了,这个就可以了。
ant mobile还有个高清方案,这个也是全都是坑,请看下一篇博客。
阅读全文
0 0
- ant-design-mobile框架踩坑(一)
- react-native 结合ant-Design- mobile
- ant-design-mobile高清方案以及svg配置
- react开发笔记 —ant-design框架
- Ant Design --配置(1)
- sui-mobile框架入门一
- Ant Design
- Ant Design踩坑(一)Form自定义校验多次发送请求的问题
- jquery mobile 手机开发框架分析 (一)
- jquery mobile 手机开发框架分析 (一)
- Go mobile(一)
- Matrial Design(一)
- ANT涉猎(一)
- Ant学后感(一)
- ANT教程(一)
- Ant笔记(一)
- ant初识(一)
- Ant 基础教程(一)
- Java之javassist实现自动代理-yellowcong
- 机房收费系统(二)---上下机
- 线程池实现原理
- 结构体的变异方法
- 稳定排序和不稳定排序
- ant-design-mobile框架踩坑(一)
- TextInputLayout
- SQL基础操作(1)
- dubbo接口压测初体验
- 字符串排序
- Java序列化机制和原理
- react 性能优化工具
- TreeMap和TreeSet在排序时如何比较元素?Collections工具类中的sort()方法如何比较元素?
- CSS3--弹性盒模型(display:flex)