antd-mobile

在使用react做项目时如果用antd-mobile，如果使用按需加载，则需要修改它的配置文件 如果我们不操作yarn eject，则直接操作下面的步骤即可： 在 create-react-app 搭建脚手架时 cnpm install -g create-react-app create-react-app reactDemo cd reactDemo cnpm start 引入 antd-mobile 因为配置文件隐藏了，从而我们需要引入 react-app-rewired 并修改 package.json 里的启动配置 cnpm install react-app-rewired --save-dev cnpm install babel-plugin-import --save-dev 或者 yarn add react-app-rewired --dev yarn add babel-plugin-import --dev /* package.json 的配置需要做如下修改*/ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile . While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one is best suited for plain mobile (non-native / SPA) web development. Reading the antd introduction you see statements like "Ant Design which is specially created for internal desktop applications, ...", while reading the antd-mobile introduction you will see "Support Web / iOS / Android platform

import React from 'react'; import ReactDOM from 'react-dom'; // 由于 antd 组件的默认文案是英文，所以需要修改为中文 import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; //import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less' import { Button } from 'antd-mobile'; moment.locale('zh-cn'); class App extends React.Component { render() { return ( <div> <Button>Start</Button> </div> ); } } ReactDOM.render(<App />, document.getElementById('root')); 按需加载的方式官网给我们推荐了两种； 第一种方式：babel-plugin-import 1、在项目上进行安装 npm install babel-plugin-import -

百度云网盘下载 第1章 介绍课程目标和学习内容 包括课程概述、课程安排、学习前提、讲授方式等方面的介绍，最后演示了整个招聘App的功能，让同学们对课程项目有一个直观的了解。 第2章 知识储备 为了学习好React，需要一系列的基础知识作为后盾，React官方也推荐全部ES6的写法，所以分别接受了Nodejs基础，使用create-react-app搭建React开发环境，版本控制git的使用，ES6常用的语法以及express+mongodb的基础，为后面的实战打下基础... 第3章 React基础知识回顾 这一章节对 React基础知识进行了复习，为后面的项目实战做准备。 第4章 Redux状态管理与React-router 这一章节详细的对 讲解了 Redux、react-redux、react-rouer4 以及蚂蚁金服antd-mobile组件库的环境配置和使用。 第5章 需求分析 在之前配置全家桶的基础之上，配置前后端联调的转发以及axios*** 第6章 登录注册 这一章节包括登录注册的页面实现，express+mongodb后端实现，cookie用户状态保存，完整的实现登录注册的交互。 第7章 完善信息 包括两种身份用户注册完成后的信息完善，包括选择头像，输入详情，使用antd-mobile的NavBar和Grid组件实现。 第8章 牛人列表和BOSS列表 信息完善后

今天 rn 装ant-design-mobile 就去官网看了 按照官网的安装方法 是 ``` npm install antd-mobile --save``` 然后再配置 按需引入就报错了=，= 凌晨1点多了 想睡觉但是一躺在床上就难受睡不着起来 配置到4点还是不行 哎。。。还是睡吧 第二天起来来公司 重新搞还是不行 怀疑是版本问题 ，果然。。 react-native 安装的版本是 antd-mobile-rn 第一步先安装 antd-mobile-rn 第二步安装 babel-plugin-import 第三步在 babel.config.js中进行配置 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [['import', { libraryName: 'antd-mobile-rn' }]] }; 然后在页面引入就可以用了～ 脑壳疼 来源： https://www.cnblogs.com/airspace/p/11571588.html

Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile . While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one is best suited for plain mobile (non-native / SPA) web development. Reading the antd introduction you see statements like "Ant Design which is specially created for internal desktop applications, ...", while reading the antd-mobile introduction you will see "Support Web / iOS / Android platform (Based on React Native)" From this I would think that

首先按照官方文档给出的步骤安装create-react-app及各种依赖， 正常安装至项目能够启动就好了，慢的话可以考虑将 npm 换成 cnpm ； 问题1:路由的配置 注意Router只能有一个根节点 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import registerServiceWorker from './registerServiceWorker'; import './index.css'; import Demo from './containers/Demo'; import Page1 from './containers/Page1'; class Main extends Component{ render(){ return ( <Router> <div> <Route path="/demo" component={Demo}/> <Route path="/page1" component={Page1}/> </div> </Router> ) } } ReactDOM.render(<Main