dva+antdmobile搭建移动端的项目

作者：立而山0605_408 | 来源：互联网 | 2023-09-16 09:40

第一步：使用dva创建项目，通过npm安装dva-cli并确保版本是0.9.1或以上。$npminstalldva-cli-g$dva-vdva-

第一步&＃xff1a;使用dva创建项目&＃xff0c;

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。$ npm install dva-cli -g $ dva -v dva-cli version 0.9.1dva new dva-quickstartcd dva-quickstart $ npm start

创建完后&＃xff0c;项目的文件结构大概如下&＃xff1a;

第二步&＃xff1a;安装antd-mobile

npm install antd-mobile --save

安装按需加载组件代码和样式的babel插件&＃xff1a;

npm install babel-plugin-import --save-dev

并且需要修改.webpackrc文件&＃xff0c;网上各种各样的方式都有&＃xff0c;但是没有一个成功&＃xff0c;最后尝试后还是觉得这样的方式靠谱。

{"extraBabelPlugins": [["import", { "libraryName": "antd-mobile", "style": "css" }]] }

第三步&＃xff1a;需要修改index.html页面根据官方文档的改法。

在indexPage.js写测试组件&＃xff1a;

import React, { Component } from &＃39;react&＃39;; import { connect } from &＃39;dva&＃39;; import { DatePicker,Button, Card, WingBlank, WhiteSpace,Icon, Grid,NavBar, } from &＃39;antd-mobile&＃39;; import styles from &＃39;./IndexPage.css&＃39;;function IndexPage() {return (

this is extra}/>This is content of &＃96;Card&＃96;extra footer content

} /> console.log(&＃39;onLeftClick&＃39;)}rightContent&＃61;{[,]}>个人维度

);
}IndexPage.propTypes &＃61; {};export default connect()(IndexPage);

启动项目&＃xff1a;

npm start

效果如下&＃xff1a;

还有一个配置是&＃xff1a;(仅供参考)

配置支持ICON&＃xff0c;添加 webpack.config.js 的方式。这个配置有所保留&＃xff0c;这是参考别的博客的做法&＃xff0c;但是我没有配置也可以使用ICON

webpack.config.js 的内容:

const path &＃61; require(&＃39;path&＃39;);module.exports &＃61; function(webpackConfig, env) {const svgDirs &＃61; [require.resolve(&＃39;antd-mobile&＃39;).replace(/warn\.js$/, &＃39;&＃39;), // 1. 属于 antd-mobile 内置 svg 文件// path.resolve(__dirname, &＃39;src/my-project-svg-foler&＃39;), // 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/4webpackConfig.module.loaders.forEach(loader &＃61;> {if (loader.test && typeof loader.test.test &＃61;&＃61;&＃61; &＃39;function&＃39; && loader.test.test(&＃39;.svg&＃39;)) {loader.exclude &＃61; svgDirs;}});// 4. 配置 webpack loaderwebpackConfig.module.loaders.unshift({test: /\.(svg)$/i,loader: &＃39;svg-sprite&＃39;,include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理});return webpackConfig; }