账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    antd-mobile 直接引入到普通的 html 文件中
    42
    0

    接着之前发的问题，如果在普通html网页中引入React+antd，已经搞字了，代码如下可正常运行。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Antd</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.js"></script>
</head>

<body>
  <div id="message1">xx</div>
  <script type="text/babel" src="button.js"></script>
</body>

</html>

    button.js

    ReactDOM.render(
  <div>
    <antd.Button type="primary">Primary</antd.Button>
    <antd.Button>Default</antd.Button>
    <antd.Button type="dashed">Dashed</antd.Button>
    <antd.Button type="danger">Danger</antd.Button>
    <antd.Input placeholder="Basic usage" />
    <antd.Switch defaultChecked />
    <antd.TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
  </div>
, document.getElementById('message1'));

    可以看到button.js中用antd加上组件的名字就可以调用了。
    现的问题是我又想再测试下antd-mobile，结果失败了，我想当然的换成了<antd-mobile.Button>，如果提示不存在antd-mobile，研究了半天终于找到一个办法，就修改antd-mobile.js将里面的antd-mobile换成了自己的一个不带横线的名字，如下：

    原代码

    /*!
 * 
 * antd-mobile v2.1.8
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("react"), require("react-dom"));
    else if(typeof define === 'function' && define.amd)
        define(["react", "react-dom"], factory);
    else if(typeof exports === 'object')
        exports["antd-mobile"] = factory(require("react"), require("react-dom"));
    else
        root["antd-mobile"] = factory(root["React"], root["ReactDOM"]);

    我改成了以下代码，将antd-mobile换成了m

    /*!
 * 
 * antd-mobile v2.1.8
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("react"), require("react-dom"));
    else if(typeof define === 'function' && define.amd)
        define(["react", "react-dom"], factory);
    else if(typeof exports === 'object')
        exports["m"] = factory(require("react"), require("react-dom"));
    else
        root["m"] = factory(root["React"], root["ReactDOM"]);

    于是这样竟然可以用<m.InputItem>按钮</m.InputItem>这样引用了。

    那么我的问题是如何不改变antd-mobile就可以正常引用！

    附完整代码（下面的代码是报错无法正常运行的）

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Antd</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.js"></script>
</head>

<body>
  <div id="message1">xx</div>
  <script type="text/babel" src="button-m.js"></script>
</body>

</html>

    button-m.js

    ReactDOM.render(
  <div>
    <m.Button type="primary">primary</m.Button>
  </div>
  , document.getElementById('message1'));
    2
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 梦是远远飞翔 普通会员 1楼

      在Ant Design Mobile（简称“antd-mobile”）的项目中，直接引入到普通 HTML 文件中一般需要以下步骤：

      1. 安装Ant Design Mobile库：

      2. 首先，确保你已经安装了Node.js和npm（Node Package Manager）。在你的命令行中输入以下命令来安装antd-mobile： bash npm install antd-mobile

      3. 创建一个新的React项目：

      4. 打开命令行，导航到你想要安装antd-mobile项目的目录，例如/path/to/your/react-app。

      5. 输入以下命令来创建一个新的React项目： bash npx create-react-app my-app

      6. 引入antd-mobile模块：

      7. 在你的React组件中，使用以下语法来引入antd-mobile模块： jsx import React from 'react'; import { Table } from 'antd-mobile';

      8. 在Table组件中使用antd-mobile样式和功能：

      9. 在你的Table组件中，你可以使用antd-mobile提供的样式和功能，例如： ```jsx

        ```

        在这里，yourDataSource是你的数据源，yourColumns是你的表格列，footerStyle是你的表格 footer 的样式。#f2f2f2 是antd-mobile提供的样式，用于设置表格的背景色。

        1. 配置antd-mobile组件：
        2. 在你的App.js文件中，你需要配置antd-mobile的<Table>组件，例如： ```jsx import React from 'react'; import { Table } from 'antd-mobile';

        // 设置antd-mobile的配置信息 import { TableColumn } from 'antd-mobile';

        const MyTable = () => { return (

        {/ ...更多列 /}
        ); };

        export default MyTable; ```

        在这里，我们首先导入了antd-mobile的Table组件，然后设置了它的配置信息，包括标题、数据源、列和 footer。你可以在yourDataSource和yourColumns变量中定义你的数据和列，然后在<Table>组件中使用这些数据和列。

        1. 在HTML文件中引用antd-mobile组件：
        2. 在你的HTML文件的<head>标签中，你可以引用你的antd-mobile组件，例如： ```html

        ```

        在这里，我们首先引用了antd-mobile的CSS样式，然后在<script>标签中引用了antd-mobile的JavaScript文件，最后在你的React组件的<script>标签中引用了antd-mobile的组件。

        注意：在使用antd-mobile之前，你需要确保你的项目已经安装了antd和antd-mobile的依赖。如果你使用的是create-react-app创建的项目，你可以使用以下命令来安装antd和antd-mobile： bash npm install antd create-react-app

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部