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

endingCode2023-12-05 16:49

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

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

css 复制代码

.content{
	font-size: 32rpx;
}

public.css

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 ---- 页面显示的最大宽度，超出部分留白

javascript 复制代码

{
	"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.搜集相关素材

字体图标图片等