使用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