Ant Design学习-----遇到问题

使用umi脚手架来初始化React项目

上一章说到Umi是什么，以及为什么要使用Umi。
不了解的还可以去上一章Ant Design介绍

一、开发环境

这里需要应用node环境，以及npm切换淘宝源，使用的开发工具为vscode如何配置，我的node专栏中有

遇到的问题

一、 路由问题

This dependency was not found: 。。。。。。in ./src/.umi/core/routes.ts
最后发现是路由设置错误了，

因为路由默认可以进入到page所以不需要…/helloworld,会导致错误。

而且基本这种问题，大部分都是路由配置出错的事，再其他的就是环境问题了。

二、 singular: true

在 umi 中，约定的存放页面代码的文件夹是 pages，是复数，不过如果你喜欢单数的话你配置项中你可以添加 singular 为 true 来让 page 变为约定的文件夹。

针对page文件夹，当singular为true，可以直接在component中写文件名，访问网页。

当改为为pages或其他文件夹时，需要在comp中写路径，如：../pages/helloworld。

或者将singular去掉，在component中直接写文件名也可直接访问.

三、 yarn create umi 提示：文件名、目录名或者卷标签的语法错误。

遇到了以下问题

ファイル名、ディレクトリ名、またはボリューム ラベルの構文が間違っています。
error Command failed.
Exit code: 1

问题：本来是要搭建Ant Design Pro，，在搭建过程中遇到了这样的问题

亲测有用，但还是有一点点问题不是很明白，按照作者的方法执行后，在git bash安装是还是会出现错误，而在cmd中

@"%~dp0\C:\Users\admin\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

然后就大概猜到是什么问题了，就是这个路径的问题，在windows系统下，盘符前哪里还需要什么 ‘%~dp0’ 符号，所以果断将 C: 盘符前的符号删了，如下：

补充：如果运行 ‘create-umi’ 命令，提示“不是内部或外部命令”，原因是没有把 “D:\Program\nodejs\node_modules\bin” 路径加入系统的 path 环境变量中，加入之后，重新打开命令行，就可以解决问题了。

注意：
修改了 create-umi.cmd 之后，不要再运行 yarn create umi，因为这会重新安装一次，然后就把你改的文件覆盖了。
修改 create-umi.cmd 之后
1、将 create-umi.cmd 所在的文件夹路径（我的是“D:\Program\nodejs\node_modules\bin”），加入系统环境变量 path 中；
2、重启命令行，之后直接在命令行运行 create-umi ，就可以了；

三、我的解决方案

以上是网上的版本，但是我怎么都没有好用，最后，转npm create umi好用了。

四 、README.md是什么

README.md文件是一个项目的入门手册，里面介绍了整个项目的使用、功能等等。所以README文件写得好不好，关系到这个项目能不能更容易的被其他人了解和使用。
README至少要写明项目的功能和使用，这是最基本的，当然，一个好的README想要的不仅仅是功能和使用方法。一般npm包和git上面的项目，当然，好的项目都会有README，这已经是一个约定了。
md是Markdown的缩写，其实READEME就是使用Markdown编写的。README既然是为了让别人了解你这个项目，那么应该如何编写？
国际化：
我们都知道GitHub一般都是使用英语，所以可以的话最好写两个版本，一个是英文，为了所有人能看懂，另一个是中文，为了我们更好的理解。
项目名及简介：
简单介绍一下这个项目是做什么的。有的话最好加上demo地址。
功能：
你这个项目可以实现的功能。
用法：
这可以说是最重要的，一定要让别人看得懂你这项目是怎么使用的。
其他：
作者或者是维护人列表、版权、鸣谢、贡献、logo、联系方式等等，这些有的话当然会更加高大上。
Markdown的语法这边推荐简书上的一篇博客：https://www.jianshu.com/p/191d1e21f7ed
推荐在线Markdown编辑器：https://dillinger.io/，把内容清空之后就能在线练习了。
这边为之前发布的npm包写了个README和添加了keywords：
https://www.npmjs.com/package/wade-tools。
这边说一下，之前npm init可以填写的内容，可以直接在package.json直接做修改然后发布。

五、JSX

虽然JSX看起来像HTML，但它实际上只是编写React.createElement()声明的一种方式。当组件呈现时，它会输出一个React元素树或该组件输出的HTML元素的虚拟表示。然后，React将根据此React元素表示确定对实际DOM进行的更改。对于HelloWorld组件，React写入DOM的HTML将如下所示：

exports.default = function () {
  return React.createElement(
    "div",
    null,
    "hello world"
  );
};

两种写法一比较，就会发现对于复杂的 UI 组件来说，JSX 更易写也更易读。所以，几乎所有的 React 开发者都使用 JSX 语法。
SX 语法的特点就是，凡是使用 JavaScript 的值的地方，都可以插入这种类似 HTML 的语法。

const element =<h1>Hello, world!</h1>

这里有两个注意点。一是所有 HTML 标签必须是闭合的，
如果写成<h1>Hello就会报错。如果是那种没有闭合语法的标签，
必须在标签尾部加上斜杠，比如<img src="" />
二是任何 JSX 表达式，顶层只能有一个标签，也就是说只能有一个根元素。

下面的写法会报错。

// 报错
const element = <h1>hello</h1> <h1>world</h1>;
 
// 不报错
const element = <div><h1>hello</h1> <h1>world</h1></div>;

上面代码中，第一种写法会报错，因为根元素的位置有两个并列的,< h1 >标签。在它们外面再包一层，就不会报错了。

一般来说，HTML 原生标签都使用小写，开发者自定义的组件标签首字母大写，比如。

JSX 语法允许 HTML 与 JS 代码混写。

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

六、组件的状态

除了接受外部参数，组件内部也有不同的状态。React 规定，组件的内部状态记录在this.state这个对象上面。

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
 
  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }

上面代码中，组件Square的构造方法constructor里面定义了当前状态this.state对象。Square 组件的这个对象只有一个value属性，一开始的值是null。

用户点击按钮以后，onClick监听函数执行this.setState()方法。React 使用这个方法，更新this.state对象。这个方法有一个特点，就是每次执行以后，它会自动调用render方法，导致 UI 更新。UI 里面使用this.state.value，输出状态值。随着用户点击按钮，页面就会显示X。

可以看到，这个例子里面，内部状态用来区分用户是否点击了按钮。

七、生命周期方法

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
 
  }
 
  componentWillUnmount() {
 
  }
 
  componentDidUpdate() {
  
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

八、 使用

1、新建 项目
mkdir antd-demo && cd antd-demo
2、初始化
antd-init
2.1 安装npm
npm install
3、安装antd
npm install antd --save
或者
yarn add antd
4、运行
npm start
5、访问
http://127.0.0.1:8000/

说明

以上仅记录自身遇到问题，