当前位置：首页 > news >正文

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

news 2025/8/18 0:54:07

点赞收藏加关注，你也能住大别墅！

挑战三天搭建个人网站从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": {}
}