使用Ant其中所遇到的问题

对于怎么样搭建环境等，就不多说了，按照步骤一步步进行。

按照Ant Design的步骤来，地址：https://www.yuque.com/ant-design/course/intro

按照步骤编写完代码时，遇到的问题：

 

第一个问题：无package.json，查看这个路径：C:\Users\用户名 下只有package-lock.json

解决方法：

        cnpm init --yes
        可以查看C:\Users\用户名 路径下有package.json

 

第二个问题：cnpm start时，抛出 C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-11-05T07_16_34_457Z-debug.log 

解决方法：

       步骤：

                   1.输入cnpm install （批量安装依赖）

                   2.输入cnpm install antd --save 安装antd

 

第三个问题：cnpm start时抛出： JAVA_HOME is incorrectly set Please. update D:\SoftWare\hadoop-2.6.0\conf\hadoop-env.cmd

解决方法：

       步骤：

               1.确定Hadoop已经添加至系统变量中

               2.找到本地放置Hadoop包，进入D:\Hadoop\etc\hadoop，找到hadoop-env.cmd文件

               3.将JAVA_HOME修改为jdk的完整路径，其中将Program Files 修改为PROGRA~1

 

第四个问题：编写页面时，抛出 'React' must be in scope when using JSX 

 解决方法：

                 必须引入react  >   import React from 'react';

 

第五个问题：解决 cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。

解决方法：

                电脑运行 > 输入PowerShell  >   打开界面  >  输入命令set-ExecutionPolicy RemoteSigned   >   输入A，回车。

第六个问题：

 根据文档敲写代码出现的问题：

下面是代码：

import Card from 'antd';
import 'antd/dist/antd.css';

export default () => {
  const style={
    width:'400px',
    margin:'30px',
    boxShadow:'0 4px 8px 0 rgba(0,0,0,0.2)',
    border:'1px solid #e8e8e8'
  };

  return(
    <Card style={style} actions={[<a>操作一</a>,<a>操作二</a>]}>
      {/* <Card.Meta 
        avatar = {
          <img alt="" style={{width:'64px',height:'64px',borderRadius:'32px'}}
            src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
          />}
          title="Alipay"
          description="在中台产品的研发过程中，会出现不同的设计规范和实现方式..."
      /> */}
      
    </Card>
  );
}

其中的问题是：引入antd的参数时，必须带上 “{}”

所以将import Card from 'antd';  =>  修改为  import {Card} from 'antd';

第七个问题：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
文中代码片段：

解决办法：

                

第八个问题： 在编译时没有出现问题，cnpm run dev执行之后浏览器出现这个问题。

解决办法：

                在config.js中

                前提是需要添加 umi-plugin-react 依赖，cnpm install umi-plugin-react --save-dev

编写页面注意事项，ReactDOM.render(内容, id);    其中的 id  =  document.getElementById('root')   

Ctrl + s  会自动编译

 

进行练习时，可查看ant文档，地址：https://ant.design/docs/react/introduce-cn