搭建Umijs环境并创建一个项目 介绍基本操作

news2024/11/26 12:39:23

上文 Umijs介绍中 我们简单了解了一下这个东西
这里 我们还是不要关说不练了
直接终端执行

npm install -g umi

可能会比较久 因为这个东西还挺大的
在这里插入图片描述
我们执行

umi -v

这里就会输出版本
在这里插入图片描述
然后 我们创建一个文件夹目录 作为项目目录
在这里插入图片描述
然后 我们可以 通过 终端输入 mkdir 项目名称 创建一个外层文件夹
例如 我在文件中输入

mkdir dom

这样 我们这里就多出一个目录 我们的dom了
在这里插入图片描述
然后 我们cd到这个dom下
在这里插入图片描述
然后 我们输入

umi g page index

在这里插入图片描述
这样 我们就创建出来了一个page页面 叫 index
在这里插入图片描述
然后 我们终端执行

umi dev

这样我们的项目就起来了
在这里插入图片描述
我们复制终端的地址 放在浏览器访问 就达到了下图效果
在这里插入图片描述
项目跑起来之后 我们再回头看项目 就会多出一个 .umi 的配置文件夹
在这里插入图片描述
这个目录看着是很简介的 所有配置都在 .umi中

其实 你用umi g page 后面跟什么名字 就会创建什么界面
例如
在这里插入图片描述
然后 我们想查看下面到底有什么命令 可以

umi --help

下面就会输出这些存在的命令和解释
在这里插入图片描述
然后 这个东西继承了 dva 的传统 page下即路由 就是 page下的 index就对应 路由 /index 用js名字对应路由
所以在这里面创建文件 命名一定要注意一些

然后 如果 我们要 创建对层的路由 可以直接 终端输入

umi g page users/user

这样 我们创建的 界面结构就是对应 我们 / 的了
在这里插入图片描述
然后我们运行项目
在这里插入图片描述
然后 我们访问 他给的地址 + /users/user 例如我这里就是 http://192.168.2.26:8000/users/user
可以看到 也是没有任何问题
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1092825.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Go 和 Wails 构建跨平台桌面应用程序

由于多种原因,Electron 曾经(并且仍然)大受欢迎。首先,其跨平台功能使开发人员能够从单个代码库支持 Linux、Windows 和 macOS。最重要的是,它对于熟悉 Javascript 的开发人员来说有一个精简的学习曲线。 尽管它有其缺…

LENOVO联想笔记本小新 Pro-14 2021AMD处理器ACH版(82MS)原厂Win10系统

下载链接:https://pan.baidu.com/s/1-KZ8Y9NmkS7nDXcMbhZLHw?pwdyrkx 系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、lenovo联想电脑管家等预装程序 所需要工具:16G或以上的U盘 文件格式:ISO 文件大小&#xff1…

VScode运行C/C++

VScode运行C/C VScode的安装这里不讲 一、mingw64的下载 二、VS code打开文件夹与创建C文件 ----------------这一步给萌新看,有C和VScode的基础可跳过---------------- 1.创建一个文件夹 2.vscode打开刚刚创建的文件夹 3.新建文件,在输入文件名1.c后…

C语言中的文件操作指南

阅读导航 前言一、文件类型1. 程序文件2. 数据文件PS.文件名 二、文件的打开和关闭1. 文件指针2. 文件的打开和关闭 三、文件的顺序读写四、文件的随机读写1. fseek() 函数2. ftell() 函数3. rewind() 函数 总结 前言 在C语言中,文件操作是一项重要的任务。通过文件…

20和遍历以及迭代器有关的一些东西

知识点有点散,只能这样记录了 1、这边是和遍历有关的: class Person:def __init__(self):self.result 1def __getitem__(self, item):self.result 1if self.result > 6:raise StopIteration(停止遍历)return self.resultpassp Person() for i in…

Unity中Shader光照模型Phong的实现

文章目录 前言一、对主平行光实现高光效果1、在属性面板定义高光颜色2、在属性面板定义高光系数3、在属性面板定义高光范围系数4、获取 V (模型顶点的世界坐标 指到 相机世界坐标 的单位向量)5、由上一篇推理出的公式得到  R 向量6、由公式计算得出高光效果 二、使用已有的数…

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性,可以使用各种各样的这些工具来协助完成任务,从任务跟踪和调度,到项目报告,到版本控制和协作。 项目经理对软件项目的整体成…

Git 回退代码的两种方法对比

Git 回退代码版本 在项目的开发中,有时候还是会出现,一些误提交了一些代码,这时候就会想撤回提交的代码,在Git中有两种方法可以使用,现在通过对比方法比较这两种方法的区别,分别适用于哪些情况&#xff1f…

Google zxing 生成带logo的二维码图片

环境准备 开发环境 JDK 1.8SpringBoot2.2.1Maven 3.2 开发工具 IntelliJ IDEAsmartGitNavicat15 添加maven配置 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.0</version> </…

Stm32_标准库_12_串口_发送数据

波特率&#xff1a;约定的传输速率&#xff0c;1000bps,1s发1000位 引脚 结构 数据帧的传输特点 代码&#xff1a; #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h"GPIO_InitTypeDef GPIO_InitStruct; USART…

计算机毕业设计选什么题目好?springboot 学习笔记系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

【互联网】实习一个月感受

说明&#xff1a;岗位&#xff1a;golang开发实习生&#xff0c;实习已经一个月多点了&#xff0c;这篇文章谈谈实习应该注意些什么点&#xff0c;以及该做些什么事情 说实话这不是我第一次实习了&#xff0c;但是感受很深 注意点&#xff1a; 1、没事找话说 比如中午和同事吃…

12.JVM

一.JVM类加载机制:把类从硬盘文件加载到内存中 1.java文件,编写时是一个.java文件,编译后现成一个.class的字节码文件,运行的时候,JVM就会读取.class文件,放到内存中,并且构造类对象. 2.类加载流程: a.加载:找到.class文件,打开文件,读取内容,尝试解析文件内容. b.验证:检查…

【Python学习笔记】字符串

1. 字符串定义 可以用双引号 、 单三引号、双三引号&#xff0c;下面的定义都是正确的 "你好" 你好 """你好"""其中三引号可以 直接写内容有多行 的字符串。如下 letter 刘总&#xff1a;您好&#xff01;您发的货我们已经收到&am…

百度开放平台第三方代小程序开发,授权事件、消息与事件通知总结

大家好&#xff0c;我是小悟 关于百度开放平台第三方代小程序开发的两个事件接收推送通知&#xff0c;是开放平台代小程序实现业务的重要功能。 授权事件推送和消息与事件推送类型都以event的值判断。 授权事件推送通知 授权事件推送包括&#xff1a;推送票据、授权成功、取…

【C++进阶】:特殊类的设计

特殊类的设计 一.设计一个类不能被拷贝二.设计一个类只能在堆上创建对象三.设计一个类只能在栈上创建4.设计一个类不能被继承五.设计一个类只能有一个对象(单例模式) 一.设计一个类不能被拷贝 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c…

蓝桥杯(跳跃 C++)

思路&#xff1a; 1、根据题目很容易知道可以用深度搜索、广度搜索、动态规划的思想解题。 2、这里利用深度搜素&#xff0c;由题目可知&#xff0c;可以往九个方向走。 3、这里的判断边界就是走到终点。 #include<iostream> using namespace std; int max1 0; int …

Vue3中ref创建的引用为什么一定要用.value来获取值

Vue3中ref创建的引用为什么一定要用.value来获取值 回顾jsjs中修改复制变量,改变原始变量vue3中使用ref 回顾js js中一个变量赋值给另一个变量,改变另一个变量,原始变量不变 let a 0; let b a; b 2 console.log("a: "a);js中修改复制变量,改变原始变量 let obj…

【Java 进阶篇】JavaScript 中的全局对象和变量

JavaScript 是一门非常强大的编程语言&#xff0c;它提供了许多全局对象和变量&#xff0c;以便于在整个应用程序中共享数据和功能。本文将详细介绍 JavaScript 中的全局对象和变量&#xff0c;包括全局对象、全局变量、全局函数以及它们的用途和示例。 全局对象 JavaScript …

15.项目讲解之前端页面的实现

项目讲解之前端页面的实现 本项目前端使用HBuilerX软件编写HBuilderX下载安装配置一键直达&#xff0c; uniapp框架uniapp官网&#xff0c; 使用Element-ui组件Element-ui组件网址进行前端页面的完成。 前端项目下载地址 前端项目 前端项目展示 首页 首页展示 echarts实现…