从零开始搭建网站(第二天)

今天把之前的html+css+js项目迁移过来,直接使用ts+pinia+vue3+vite组合,搭建过程可以看从零开始搭建性能完备的网站-思路过程(1)_自己架设一个芯参数网站-CSDN博客。之后安装一下volar扩展。迁移过来使用Vue重构时发现之前使用的左右两边布局因为是宽度写死的,所以在遇到不同浏览器时会出现布局很奇怪的样子。
在这里插入图片描述

必须得调整代码,按照百分比来分配左右两边栏的宽度。这是因为使用vue时外层挂载了一个id为app的div,而这个div是自适应的,所以要稍微改一下样式。
使用网上通用的左右两栏布局,可以参考别人的布局css–两栏布局易懂的5种方法_css分栏布局-CSDN博客,这也是我去面试时被考的内容之一,这种布局简单清晰美观。
其他界面可以参考我之前完成的使用vue3完成的书里的商城项目。cmgfz/vue- (github.com)
在使用vue-router从头开始写的时候会遇到下面的问题。使用了router以后,即使是空路径也要在配置中给他配。
在这里插入图片描述

之后再微调一下,基本的页面就有了。
在这里插入图片描述

授之以鱼不如授之以渔,思路掌握以后所有的东西都是类似的。
在这之后,要准备后台的数据。不管是准备完备的后端还是使用前端mock模拟数据,亦或是编写几个简单接口,先要把数据准备一下,让前端可以找到。前端自然是使用json数据比较合理。
在这里插入图片描述

在这之后就是使用vue动态获取数据展示页面,以及其他工作(现在也想不到,走一步算一步)。
代码见我的github:https://github.com/cmgfz/secondDay

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《深入浅出多模态》: 多模态经典模型:BLIP

🎉AI学习星球推荐: GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料,配有全面而有深度的专栏内容,包括不限于 前沿论文解读、资料共享、行业最新动态以、实践教程、求职…

计算机网络——GBN协议实现

实验目的 编程模拟实现GBN可靠传输软件 实验内容 C 程序模拟实现Go-Back-N可靠数据传输,需要编写一个发送端程序和一个测试端程序来模拟传输过程 具体流程 1. 编写发送端程序,调用库实现socket连接,然后主要实现滑动窗口,接收…

IDEA开启自动导包,自动删包

找到file----------->Settings选项 找到Editor-------->General------------>Auto Import选项 勾选两个选项,在点击Apply,在点击ok 最后就ok了

详解数据结构:栈

一、顺序栈 顺序栈的存储方式如下: 从图中可以看出,顺序栈需要两个指针,base指向栈底,top指向栈顶。 typedef struct SqStack {ElemType *base; //栈底指针ElemType *top; //栈顶指针}SqStack; 说明: ElemType是元…

8款不同的404页面(网站404页面必备)

第1款 部分代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>404</title><link rel"stylesheet" href"css/style.css"></head> <body><div cla…

C语言转型之路:从C到C++的类与对象初探

欢迎来CILMY23的博客 本篇主题为 C语言转型之路&#xff1a;从C到C的类与对象初探 个人主页&#xff1a;CILMY23-CSDN博客 个人专栏系列&#xff1a; Python | C语言 | 数据结构与算法 | C 感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 写在前头…

hive搭建完整教学

目录 简介准备工作安装步骤&#xff08;一&#xff09;、下载hive包并解压到指定目录下&#xff08;二&#xff09;、设置环境变量&#xff08;三&#xff09;、下载MySQL驱动包到hive的lib目录下&#xff08;四&#xff09;、将hadoop的guava包拷贝到hive&#xff08;五&#…

美团财务科技Java后端一面:面向对象、类加载过程、全限定类名相同的类是否可以同时被加载

更多大厂面试内容可见 -> http://11come.cn 美团财务科技Java后端一面&#xff1a;面向对象、类加载过程、全限定类名相同的类是否可以同时被加载 如何理解面向对象&#xff1f; 面向对象 是具有对象概念的编程范式&#xff0c;面向对象将程序实现分为了一个个独立的对象&…

cdh cm界面HDFS爆红:不良 : 该 DataNode 当前有 1 个卷故障。 临界阈值:任意。(Linux磁盘修复)

一、表现 1.cm界面 报错卷故障 检查该节点&#xff0c;发现存储大小和其他节点不一致&#xff0c;少了一块物理磁盘 2.查看该磁盘 目录无法访问 dmesg检查发现错误 dmesg | grep error二、解决办法 移除挂载 umount /data10 #可以移除挂载盘&#xff0c;或者移除挂载目…

WPS的bug问题(解决方法->换成office吧):表格数据和透视图数据不一致问题,多次尝试确定该bug

1.软件版本 2.问题描述 我在原始表中对其中一列进行筛选&#xff0c;选择95%以上这个选项值&#xff0c;343个数据。 在筛选了95%以上这个选项之后&#xff0c;我的另一列的值全部是no&#xff0c;343个数据。 然后进行透视图之后&#xff0c;在绘制的图形中发现&#xff0c…

怎么压缩图片200k以下?压缩图片到指定大小

在工作中&#xff0c;会遇到在某些系统要上传照片&#xff0c;但是对于上传的照片大小有限制&#xff0c;比如限制大小不能超过200KB等&#xff0c;而外业拍摄的照片往往会超过限制的大小&#xff0c;那么这时就需要对照片进行压缩。尤其是我们在面对大量图片需要处理的时候&am…

一周IT资讯

又降了&#xff1f;运维4月平均月薪1W6&#xff1f; 薪资作为大部分人的主要收入来源&#xff0c;是每个人最关注的话题之一。 最近&#xff0c;小编搜索了近半年的运维薪资趋势&#xff0c;看看你的钱包缩水了没&#xff1f; *数据来自看准网 据了解&#xff0c;运维2024年…

Python 爬虫如何配置代理 IP (Py 采集)

在Python中配置代理IP&#xff0c;可以通过设置requests库的proxies参数来实现。以下是一个示例&#xff1a; import requests# 则立可以获取稳定代理Ip&#xff1a;https://www.kuaidaili.com/?refrg3jlsko0ymg # 推荐使用私密动态 IP proxies {"http": "ht…

Pulsar 社区周报 | No.2024-04-19 | Pulsar Meetup 深圳 2024 邀您报名

“ 各位热爱 Pulsar 的小伙伴们&#xff0c;Pulsar 社区周报更新啦&#xff01;这里将记录 Pulsar 社区每周的重要更新&#xff0c;周五发布。 ” Pulsar Meetup 深圳 2024 Pulsar Meetup 深圳 2024 将于 2024 年 4 月 27 日 周六举办&#xff0c;此次活动由 AscentStream 谙&a…

HR招聘测评,人才测评的方法有哪些?

各企业都需要人才&#xff0c;如果招聘不到合适的人才&#xff0c;就会对自身的发展带来极大的限制&#xff0c;很难找到自己的一席之地。一个优秀的人才&#xff0c;通常会成为许多公司争先哄抢的对象&#xff0c;在招聘过程中会成为一个香饽饽。但是要选出一个优秀的人才&…

戴尔电脑怎么关闭开机密码?

1.同时按键盘上是“window键”&#xff08;一般是键盘最下面一排第二个&#xff09;和“R键“&#xff0c;并在弹出的窗口输入“netplwiz”然后确定。 2.然后会弹出的“用户账户”窗口&#xff0c;接下来取消勾选“要使用本计算机&#xff0c;用户必须输入用户名和密码” 3.上面…

C语言---贪吃蛇(一)---准备工作

文章目录 前言1.Win32 API介绍1.1.Win32 API1.2. 控制台程序1.3.控制台屏幕上的坐标[COORD](https://learn.microsoft.com/zh-cn/windows/console/coord-str)1.4.[GetStdHandle](https://learn.microsoft.com/zh-cn/windows/console/getstdhandle)1.5.[GetConsoleCursorInfo](h…

运动想象 (MI) 分类学习系列 (9) :FBCNet

运动想象分类学习系列:FBCNet 0. 引言1. 主要贡献2. 提出的方法2.1 滤波器组卷积网络2.2 方差层结构介绍 3. 实验结果3.1 基线方法比较3.2 方差层对结果的影响3.3 脑卒中患者在相关模型中观察到更大的受试间变异性 4. 总结欢迎来稿 论文地址&#xff1a;https://arxiv.org/abs/…

详细UI色彩搭配方案分享

UI 配色是设计一个成功的用户界面的关键之一。UI 配色需要考虑品牌标志、用户感受、应用程序的使用场景&#xff0c;这样可以帮助你创建一个有吸引力、易于使用的应用程序。本文将分享 UI 配色的相关知识&#xff0c;帮助设计师快速构建 UI 配色方案&#xff0c;以满足企业的需…

什么是IoT?

什么是IoT&#xff1f; IoT&#xff0c;即物联网&#xff08;Internet of Things&#xff09;&#xff0c;是通过信息传感设备和互联网将各种物品连接起来&#xff0c;实现智能化的识别、定位、跟踪、监控和管理的网络系统。 以下是关于IOT的一些详细解释&#xff1a; 基本概…
最新文章