搭建umi框架教程

搭建umi框架教程

1.新建文件夹或者通过命令建

mkdir antd-course
cd antd-course

2.初始化 package.json

cnpm init -y

完成后多了package.json文件

3.安装umi依赖

cnpm install umi --save-dev 

安装完成后你会发现
1)package.json 中多出了一项 devDependencies 的配置。这是由于在上面命令中，参数 --save 可以让依赖信息保存到 package.json 中，这样其它开发者下载代码后就只需要执行 cnpm install 后就会自动安装项目依赖的包。
2)项目中还多出了一个 node_modules 的文件夹，它包含了大量的内容。里面存放的是项目依赖的包，umi 的代码也是被下载并安装到其中的。

4.建立config/config.js 文件

在config/config.js 文件中初始化内容如下：

export default {};

5.建立src/pages 文件

建立完后要修改配置为:

export default {
  singular: true,
}

6.建立第一个页面组件，新建 src/page/HelloWorld.js 文件，代码如下：

export default () => {
  return <div>hello world</div>;
}

7.页面创建完成后,需要在 package.json 中的 scripts 里面添加两个命令：

{
  "scripts": {
+   "dev": "umi dev",
+   "build": "umi build"
  }
}

注意:按一个标准的json文件格式来写
8.在项目根目录中通过 cnpm run [scriptname] 来运行。接下来请执行：

cnpm run dev

成功的话就会可以在日志中找到地址:复制日志的地址在浏览器中打开
例如:http://localhost:8000/helloworld