现在测试一下ant-design-mobile的使用，引用一个Button

没有样式

这个问题是没有引入样式

解决方法有两种

这种方法自己弄不出来，然后用另外一种方法

引入样式：

import 'antd-mobile/dist/antd-mobile.css';

然后就解决了。

另外补充点东西，根据ant-design-mobile文档的说明，项目的入口页面还需要配置点东西，预防出现的bug

<!DOCTYPE html>

<html>

<head>

  <!-- set `maximum-scale` for some compatibility issues -->

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

  <script>

    if ('addEventListener' in document) {

      document.addEventListener('DOMContentLoaded', function() {

        FastClick.attach(document.body);

      }, false);

    }

    if(!window.Promise) {

      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');

    }

  </script>

</head>

<body></body>

</html>

react项目的ant-design-mobile的使用的更多相关文章

  1. React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  2. react 编写 基于ant.design 页面的参考笔记

    前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...

  3. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

  4. 【零售App】—— react/ant design mobile项目爬坑

    一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动 ...

  5. react项目的react-router-dom路由的使用

    现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...

  6. ant Design和ant Design mobile的使用，并实现按需加载

    1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile y ...

  7. Ant Design Mobile 使用 rc-form

    引入: import { createForm } from 'rc-form'; 步骤一:绑定 form // 将form表单的api绑定到props,便于调用 const EditHeaderWr ...

  8. 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

    一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

  9. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

随机推荐

  1. CSS hack 360浏览器 极速模式与兼容模式

    自动切换浏览器模式对于360浏览器7.1版本有效,8.1无效 <%@ Page Language="C#" AutoEventWireup="true" ...

  2. c# winform窗体如何设置才可以不能随意拖动大小

    执行以下两个步骤,能够禁止用户改变窗体的大小 (一)步骤1 设置窗体的FormBorderStyle属性为下列五个值中的任意一个 None:将窗口设置为无边框.无标题栏.用户无法改变窗口的大小,也无法 ...

  3. day 44 JavaScript

    一.javascript简介 JavaScript是前台语言 JavaScript是前台语言,而不是后台语言. JavaScript运行在用户的终端网页上,而不是服务器上,所以我们称为“前台语言”.J ...

  4. python制作模块

    自己写的函数,为了下一次方便用,做成模块 主要有这几个步骤: 1:准备发布 2:构建发布 3:导入模块并使用 1:准备发布 首先,我自己写的一个打印出列表(含嵌套列表),打印出列表中的每个数据项,文件 ...

  5. Java面试题 corejava(二)

    65.JAVA 语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try 块中可以抛出异常吗?[基础] 答:Java 通过面向对象的方法进行 ...

  6. 【WebLogic使用】1.WebLogic的下载与安装

    一.WebLogic的介绍    WebLogic是美国bea公司出品的一个application server,确切的说是一个基于Javaee架构的中间件,纯java开发的,最新版本WebLogic ...

  7. Linux服务器同步Intetnet时间

    Linux服务器同步Intetnet时间 在使用linux服务器(虚拟机)的过程中,经常会发现使用一段时间后,linux服务器的时间和我的宿主机的时间不一致,而宿主机的时间确实是internet时间, ...

  8. Excel技巧--按内容分列与合并

    上表的A列,如果想要按横线分隔开多列,复制粘贴很麻烦,可以使用“数据”-->“分列”来分隔开: 1.选择A列,在A列后预先插入三列空列.点击“数据”—>“分列”,对话框选择按“分隔符号”分 ...

  9. nginx 代理flask应用的uwsgi配置

    socket代理配置: 关于uwsgi的用法,请自行百度,这里只针对socket文件和端口的不同,进行单一的记录. 这种方式启动的flask应用,由于是通过socket与nginx通信的,所以必须制定 ...

  10. django之Models和ORM

    ORM Object Relational Mapping,简称ORM,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久 ...