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

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

挑战三天搭建个人网站 从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.搜集相关素材

字体 图标 图片等

第一天结束
相关推荐
祈澈菇凉2 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w2 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好3 小时前
css文本属性
前端·css
qianmoQ3 小时前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
zhoupenghui1683 小时前
golang时间相关函数总结
服务器·前端·golang·time
White graces3 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼3 小时前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
bubusa~>_<4 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
流烟默4 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
梨落秋溪、5 小时前
输入框元素覆盖冲突
java·服务器·前端