前端路由UmiJs快速上手

文章目录

1.npm下载
2.构建一个脚手架
3.启动项目
4.修改配置
5.部署发布

1.npm下载

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

2.构建一个脚手架

先找个地方建个空目录。

$ mkdir myapp && cd myapp

通过官方工具创建项目，

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-appCopy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

3.启动项目

$ yarn startStarting the development server...✔ WebpackCompiled successfully in 17.84sDONE  Compiled successfully in 17842ms                                       8:06:31 PMApp running at:- Local:   http://localhost:8000 (copied to clipboard)- Network: http://192.168.12.34:8000

4.修改配置

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。

import { defineConfig } from 'umi';export default defineConfig({layout: {name: 'Ant Design Pro',logo: 'https://preview.pro.ant.design/static/logo.f0355d39.svg',// copy from pro sitenavTheme: 'dark',primaryColor: '#1890ff',layout: 'sidemenu',contentWidth: 'Fluid',fixedHeader: false,fixSiderbar: false,title: 'Ant Design Pro',pwa: false,iconfontUrl: '',},nodeModulesTransform: {type: 'none',},routes: [{ path: '/', component: '@/pages/index' },],fastRefresh: {},
});

5.部署发布

构建

$ yarn build✔ WebpackCompiled successfully in 17.17sDONE  Compiled successfully in 17167ms                                       8:26:25 PMBuild success.
✨  Done in 20.79s.

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，

tree ./dist./dist
├── index.html
├── umi.css
└── umi.js

本地验证
发布之前，可以通过 serve 做本地验证，

$ yarn global add serve
$ serve ./dist┌────────────────────────────────────────────────────┐│                                                    ││   Serving!                                         ││                                                    ││   - Local:            http://localhost:5000        ││   - On Your Network:  http://192.168.12.34:5000    ││                                                    ││   Copied local address to clipboard!               ││                                                    │└────────────────────────────────────────────────────┘

访问 http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。

部署
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

前端路由UmiJs快速上手相关推荐

Django路由配置-快速上手
Django路由配置-快速上手 Django路由系统配置代码在urls.py中,该文件在创建项目时自动生成,一般在项目目录下. 路由系统URL基本格式在urls.py文件中配置的路由,都存放在一个名 ...
前端切页快速上手系列
前言:基础知识还是必须要自己掌握,包括浏览器渲染引擎,html元素,css盒模型,浮动,定位,颜色,字体等,这个系列主要是讲一些工作中实用的技巧,包括一些成熟的方案,以后也会逐步添加和修改. html ...
前端LayUI框架快速上手详解(一)
✍目录总览
前端LayUI框架快速上手详解(二)
✍LayUI
Vue简单快速上手 idea版
文章目录版本插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断循环监听事件表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定组件什么是组件第一个Vue ...
前端如何快速上手 Web 3D 游戏的开发
简介: 本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D 游戏的开发. 作者 | RichLab楺楺诚空本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D ...
在Web 3D 游戏开发的前端如何快速上手进行
本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D 游戏的开发.跑酷游戏是余额宝七周年的主玩法,用户通过做任务来获取玩游戏的机会并且解锁游戏道具,从而在游戏中获得更多的金币,最终可 ...
【前端工程化】四：打包工具Rollup快速上手和Parcel的使用
Rollup 相比于webpack,rollup要小巧的多,它仅仅是一款ES Module打包器,并不支持例如HMR等特性,它的初衷是提供一个充分利用ESM各项特性的高效打包器: Rollup快速上手 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用常见的尺 ...
前端森林:万物皆可快速上手之Electron(第一弹)
最近在开发一款桌面端应用,用到了Electron和React. React作为日常使用比较频繁的框架,这里就不详细说明了,这里主要是想通过几篇文章让大家快速上手Electron以及与React完美融合 ...