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

今天把之前的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.mzph.cn/bicheng/886.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习-官方文档编辑方法

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

电感与磁珠

电感是什么? 电感会通过产生感应电动势的方式来阻碍电流的变化,电流变化率越大,产生的感应电动势越大阻碍电流效果越明显。 [一]品质因数Q: 电感的品质因数Q值定义:电感的Q值也叫作品质因数,其为无功功率除以有功功率…

API请求报错 Required request body is missing问题解决

背景 在进行调用的时候,加载方法,提示以下错误 错误信息如下: {"code": 10001,"msg": "Required request body is missing: XXX","data": null,"extra": null }Required request body…

ubuntu22.04下编译ffmpeg和ffplay

Ubuntu22.04 下编译安装 ffmpeg 和 ffplay 一、下载源码包 1.1 官方下载链接:Download FFmpeg 可以手动下载,也可以命令行下载: wget http://www.ffmpeg.org/releases/ffmpeg-7.0.tar.xz 1.2 下载完解压 tar -xvf ffmpeg-7.0.tar.xz…

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

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

多个路由器连接的PC端进行ping通信需要做的事

实验环境: 三台PC三台路由器,并且配置好IP 拓扑图: 需求描述: 在PC0进行与PC2的ping通信: 需求步骤: 1.1首先配置ip(略过) 1.2我们首先查看在只配置了IP的情况下,P…

Flask中的JWT认证构建安全的用户身份验证系统

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask中的JWT认证:构建安全的用户身份验证系统 随着Web应用程序的发展&#xf…

详解IIC通信协议以及FPGA实现

一、IIC简介 IIC也称为I2C(Inter-Integrated Circuit)由飞利浦公司(现在的恩智浦半导体)开发,是一种用于短距离数字通信的串行,同步,半双工通信接口协议;传输在标准模式下可以达到10…

【C语言】指针详解(五)

目录 1.字符指针 1.1常量字符串 2.指针数组 3.数组指针 1.字符指针 字符指针就是指向字符的指针,字符指针可以存储字符变量的地址。 举例如下: 定义指针变量pa存a的地址,改变*pa的值,a也会随之改变 。 1.1常量字符串 &#x1f…

代码随想录算法训练营第三十八天|509. 斐波那契数,70.爬楼梯,746. 使用最小花费爬楼梯

动态规划(DP) 如果某一问题有很多重叠子问题,使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的 一、动态规划包含哪些问题? 1、基础问题,如斐波那契数 2、背包问题,很经典的问题 3、打家劫舍 4、…

安全开发实战(1)--Cdn

目录 安全开发专栏 CDN介绍 1.信息收集阶段 1.1判断CDN是否存在 1.1.1, One 1.1.2,Two(改进) 1.1.3,进行整合 增加输入功能 1.1.4 批量读取监测存储(进行测试) 问题1: 问题2: 解决方案: 1.1.4 基本编写完成 命令框中: cdn存在.txt 总结 这里我是根据整个渗透测…

C语言数据结构-双链表

双链表是什么 双向链表,又称为双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱。所以,从双向链表中的任意一个结点开始,都可以很方便地访问它的前驱结点和后继结点。 我们…

使用mapinfo软件的在线地图插件运行错误解决

使用mapinfo软件的在线地图插件运行错误解决 一、如何解决win10/win11家庭版运行MapInfo中的在线地图插件报错【unexpected error;quitting】问题?二、如何解决在线地图切换地图源时的报错问题? 一、如何解决win10/win11家庭版运行MapInfo中的…

原牛角源码(修罗bbs)全站程序打包带数据库备份

原牛角源码(修罗bbs)全站程序打包带数据库备份,牛角源码全站数据全站文件、插件打包分享给大家,有兴趣的可以搭建玩玩! conf文件夹中自己配置conf.php里面的数据库链接文件,默认管理账号:admin,密码&#…

代码随想录算法训练营Day60|LC84 柱状图中最大的矩形

一句话总结:完结撒花! 原题链接:84 柱状图中最大的矩形 与接雨水的单调栈做法类似。代码如下: class Solution {public int largestRectangleArea(int[] heights) {int[] newHeight new int[heights.length 2];System.arrayco…

Ansible初识以及安装

1. Ansible应用简述: Ansible基于python语言实现,由Paramiko和PyYAML两个关键模块构建。具有独特的设计理念: 1)安装部署简单 2)管理主机便捷,支持多主机并行管理 3)避免在被管理主机上安装客户…

SpringBoot集成Sharding-jdbc(水平分表)

SpringBoot集成Sharding-jdbc(水平分表) 1.Sharding-jdbc的应用场景2.实际使用2.0 项目层级2.1 导入依赖2.2 application.yml配置2.3 dao层2.4 对应的mybatis的xml文件2.5 Service层2.6 pojo2.7 controller2.8 多线程配置 1.Sharding-jdbc的应用场景 其…

【管理咨询宝藏78】MBB大型城投集团核心能力建设分析报告

本报告首发于公号“管理咨询宝藏”,如需阅读完整版报告内容,请查阅公号“管理咨询宝藏”。 【管理咨询宝藏78】MBB大型城投集团核心能力建设分析报告 【格式】PDF版本 【关键词】战略规划、商业分析、管理咨询、MBB顶级咨询公司 【强烈推荐】 这是一套…

什么是CPU与GPU,它们之间有什么关系

什么是CPU与GPU,它们之间有什么关系一、CPU1. 核心功能2. 工作原理3. 组成部分4. 发展历程5. 性能指标6. 架构种类7. 发展趋势8. 应用领域 二、GPU三、CPU与GPU的关系 什么是CPU与GPU,它们之间有什么关系 一、CPU CPU,全称是“Central Proc…

吃鸡游戏msvcp140.dll丢失的解决方法

msvcp140.dll 是一个与 Microsoft Visual C Redistributable 相关的动态链接库(DLL)文件,是 Windows 操作系统中众多应用程序正常运行所必需的关键组件之一。以下是对 msvcp140.dll 文件的总体介绍和msvcp140.dll丢失的多个解决方案分享。 *…