全部产品

如何进行前端开发

更新时间:2020-11-11 16:26

为了帮助能更快的开发符合规范的应用,我们为开发者提供了前端开发框架 @alicloud/xconsole 来进行高效的开发工作。

框架底层是基于 React 技术体系,开发前,请先了解和学习 React 的相关内容。

初始化项目

前往示例代码库 ,将示例代码下载到本地,完成后进入项目根目录下,执行:

// 安装开发的依赖包
npm i

完成依赖包的安装后,可以通过 npm start 来启动服务,默认端口为 3333

启动后, 您可以通过 http://127.0.0.1:3333/ 进行访问。

如果需要在其他端口启动服务,可以通过指定端口 npm start -- --port 端口号 来启动服务 。

开发页面

假设我们要开发一个 welcome 的页面,您可以按照如下内容进行操作:

src/pages 下创建名为 welcome 的文件夹,并在文件夹下新建一个 index.js 的文件,文件内容:

import React from "react";
import {
  PageHeader as Page,
} from "@alicloud/xconsole";
import {
  Button,
} from "@alicloud/xconsole/ui";

export default ({ match, history, ...props }) => {

  const page = <Page
    title={'欢迎页'}
  >
    Hi, welcome!
  </Page>

  return page;
};

此时访问 http://127.0.0.1:3333/welcome 就能看到新增加的页面。

更多的相关代码示例, 您可以参考脚手架生成的代码文件。