umi+Ant Design Mobile+rem搭建移动端H5框架

1.创建项目

yarn create @umijs/umi-app

2.安装Ant Design Mobile

yarn add antd-mobile

3.安装postcss-plugin-px2rem

cnpm i postcss-plugin-px2rem

4.配置 /.umirc.ts

/** @Author: muge* @Date: 2021-12-29 10:41:57* @LastEditors: Please set LastEditors* @LastEditTime: 2022-03-01 14:20:16*/
import { defineConfig } from 'umi';
import px2rem from 'postcss-plugin-px2rem';
import path from 'path';
import { domain } from './src/request/index';
const root:string = '/Text/'
export default defineConfig({base: root, //部署到非根目录时才需配置publicPath:root, //静态资源targets: {//配置浏览器最低版本,比如兼容ie11ie: 9,},hash: true, //开启打包文件的hash值后缀nodeModulesTransform: {type: 'none',},metas: [{ charset: 'utf-8' }],routes: [{path: '/',component: '@/pages/index',title: '主页',},],fastRefresh: {},proxy: {'/api': {target: domain,changeOrigin: true,pathRewrite: { '^': '' },},},alias: {'@': path.resolve(__dirname, 'src'),},extraPostCSSPlugins: [px2rem({rootValue:18.75 , // 兼容 ant mobilepropBlackList:['border','border-top','border-left','border-right','border-bottom','border-radius','font-size'],//这些属性不需要转换}),],antd:{mobile:false //如果引入 组件报错样式问题，需要配置这个}
});

5.请求拦截

在/src 下新建app.tsx/** @Author: muge* @Date: 2021-12-29 18:39:27* @LastEditors: Please set LastEditors* @LastEditTime: 2021-12-30 17:11:32*/
import { RequestConfig } from 'umi';
const token='JWT ...'
const requestInterceptor = (url: string, options: any) => {options.headers = {Authorization: token,};options.interceptors = true;return {url,options,};
};
export const request: RequestConfig = {requestInterceptors: [requestInterceptor],
};

6.项目启动

yarn start

项目demo地址

umi+Ant Design Mobile+rem搭建移动端H5框架相关推荐

Ant Design Mobile 5.6.0版本来了
一.Ant Design Mobile介绍 Ant Design Mobile( 官网地址:Ant Design Mobile - Ant Design Mobile ) 是由支付宝设计团队基于蚂蚁集 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
Ant Design Mobile是什么？
Ant Design Mobile简称antd-mobile,是Ant Design的移动规范的React实现,是一个基于Preact/React/React Native的UI组件库:UI样式高度可 ...
react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
如何修改ant design mobile或者其他UI组件的全局样式
问题描述: 有时候你可能会遇到一些前端CSS实现上的问题,因为美工的画图与你的项目使用的UI框架的样式大有出入,所以在写页面样式的时候多多少少会让你有些头疼,那么该类问题应该如何解决呢? 原因分析: ...
2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
Vue 搭建移动端 h5 项目步骤
Vue 搭建移动端 h5 项目步骤简介最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤. 提示:(2022-10-28更新) vue-cli 和vue ...
ant design mobile listView 使用
ListView.DataSource 的使用 https://cloud.tencent.com/developer/section/1373979 https://mobile.ant.desig ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
Ant Design Vue - 环境搭建（Windows）
前言官方文档:https://www.antdv.com/docs/vue/introduce-cn/ 首先,您要自己搭建一个 vue 环境,我这里通过 cli 创建一个项目,如下图所示: 一.安装 ...

umi+Ant Design Mobile+rem搭建移动端H5框架

1.创建项目

2.安装Ant Design Mobile

3.安装postcss-plugin-px2rem

4.配置 /.umirc.ts

5.请求拦截

6.项目启动

umi+Ant Design Mobile+rem搭建移动端H5框架相关推荐

最新文章

热门文章