记录一下react课程的学习路径,方便后续复习,课程地址 在线课程
安装 umi 依赖
mkdir antd-course cd antd-course
cnpm init -y
cnpm install umi --save-dev
在vscode中创建配置文件
export default {};
新建src目录,并且将页面的参数改为单数
export default { singular: true, }
创建page目录并且新建helloworld.js
export default () => { return <div>hello world</div>; }
修改package.json
{ "name": "antd-course", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "umi dev", "build": "umi build" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "umi": "^3.3.3" } }
在控制台运行启动命令
cnpm run dev
访问应用
使用配置式路由,更改配置文件
export default { singular: true, routes: [{ path: '/', component: './HelloWorld', }], }
访问应用
增加插件集到项目中
cnpm i @umijs/preset-react --save-dev
引入插件
export default { singular: true, dva:{}, antd:{}, routes: [{ path: '/', component: './HelloWorld', }], }
创建.gitignore避免将无用的文件提交
node_modules dist .umi
提交
git init git add -A git commit -m 'init'
构建和部署
cnpm install serve -g serve ./dist