37.从0到上线三天搭建个人网站(第一天)

news/2024/6/23 20:23:57

点赞收藏加关注,你也能住大别墅!

挑战三天搭建个人网站 从0到上线

一、项目的主要功能

1.作为自己在网上的一个工作室。
2.发帖
3.展示个人项目连接
4.介绍自己(没准儿还能接点活儿)

二、UI风格参考

在这里插入图片描述

三、技术选型

1.前端:

使用uniapp开发H5页面、vue3
设计基准屏幕ipnone8 width:375px

2.后端:

使用unicloud的云开发环境

四、项目创建

1.用HbuilderX创建H5项目
2.创建云空间
3连接云空间,启动项目

五、项目初始化

1.删除项目默认代码
2.色彩规范

bgc:#F4F2E5
font-color:#2B2A24
form-bgc:#DED0B9
border-color:#CDB9A3

3.创建公共CSS文件public.css并创建基础CSS文件base.css

base.css

.content{font-size: 32rpx;
}

public.css

@bgc:#F4F2E5;
@font-color:#2B2A24;
@form-bgc:#DED0B9;
@border-color:#CDB9A3;

根据开发需要后续再添加别的样式

4.修改HbuilderX的配置,px自动转化rpx

在这里插入图片描述
因为我是按宽375设计的界面所以1px就等于375/750=0.5

5.初始化pages.json

“navigationStyle”:“custom” ---- 去掉默认顶部导航栏
“rpxCalcMaxDeviceWidth”:1080, ---- rpx支持的最大宽度
“rpxCalcBaseDeviceWidth”:375, ---- 设计的基准宽度
“maxWidth”:1080 ---- 页面显示的最大宽度,超出部分留白

{"pages": [{"path": "pages/index/index","style": {"navigationStyle":"custom"}}],"globalStyle": {"rpxCalcMaxDeviceWidth":1080,"rpxCalcBaseDeviceWidth":375,"maxWidth":1080},"uniIdRouter": {}
}
5.测试初始化的效果是否正常,如果正常,那么git init 并上传到远程仓库,我的分支fromPC

https://gitee.com/endingcode/mypage.git

6.搜集相关素材

字体 图标 图片等

第一天结束

https://www.xjx100.cn/news/3118885.html

相关文章

typescript使用笔记

typescript已经成为前端日常开发中常用的工具之一,本文结合自己的使用做一下笔记,方便以后查阅。 Partial Partial可以将某个类型中定义的属性变成可选的. 下面的定义了Book类型,创建实力时如果不设置id属性就会提示错误。 type Book {id…

Linux搭建FTP并安装xrdp,实现Windows系统下利用FileZilla传输文件和远程桌面连接

一、实现FTP文件传输 1、搭建FTP服务器: sudo apt-get install vsftpd sudo service vsftpd status 2、查看vsftpd是否正在运行,并监听21端口 netstat -npl | grep :21 or sudo service vsftpd status # 查看 vsftpd 服务状态 3、配置vsftpd.conf sud…

android开发:用IDEA建立你的第一个APP

主要是记录一下各种小坑。 IDEA目前是第一流行的java开发工具,同时也支持android开发,可以替代安卓官方的andriod studio,不过仍然要依赖android sdk。 本例指导你完成第一个app,需要一台Windows PC和一部android手机。 目录 一…

【洛谷算法题】P5716-月份天数【入门2分支结构】

👨‍💻博客主页:花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5716-月份天数【入门2分支结构】🌏题目描述🌏输入格式&a…

智能手表上的音频(四):语音通话

上篇讲了智能手表上音频文件播放。本篇开始讲语音通话。同音频播放一样有两种case:内置codec和BT。先看这两种case下audio data path,分别如下图: 内置codec下的语音通话audio data path 蓝牙下的语音通话audio data path 从上面两张图可以看…

c++——string字符串____迭代器.范围for.修改遍历容量操作

在成为大人的路上喘口气. 目录 🎓标准库类型string 🎓定义和初始化string对象 💻string类对象的常见构造 💻string类对象的不常见构造 💻读写string对象 🎓 string类对象的修改操作 &#x1f4…

Adobe Illustrator绘图解决卡顿问题

最近在用AI做矢量图,但是遇到了一个很难搞的问题,当我们需要分辨率较高的图片的时候,Python用Matplotlib生成pdf时dpi参数会设置为600及以上,但这样的话就造成pdf文件过大以及AI卡顿两个问题,比如,下午生成…

实现一个高并发的Redis分布式锁

1. 无锁场景 下面是一个扣减库存逻辑, 由于查库存和扣减库存两个操作不是原子的,明显存在并发超卖问题 // 假设初始库存200GetMapping("/stock")public String stock(RequestParam(value "name", defaultValue "World") String name) {String…