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

news2024/11/20 3:30:42

今天把之前的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.coloradmin.cn/o/1609901.html

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

相关文章

C++从入门到精通——内部类和匿名类

内部类和匿名类 前言一、内部类的概念示例 二、内部类的特性三、匿名类的概念示例 四、匿名类的特性总结 前言 内部类是定义在另一个类内部的类,它可以访问外部类的私有成员。匿名类是没有名字的类,通常用于一次性使用的简单对象创建,可以直…

ubuntu20.04安装+ros-noetic安装+内网穿透frp

刷机后的系统安装 ubuntu20.04安装安装ros-noetic安装各种必要的插件安装vscode内网穿透连接实验室主机配置frpc和frps文件运行完成自动化部署免密登录linux的免密登录windows上的免密登录 内网穿透的参考链接:如何优雅地访问远程主机?SSH与frp内网穿透配…

【刷题篇】回溯算法(五)

文章目录 1、N皇后2、有效的数独3、解数独4、单词搜索5、黄金矿工 1、N皇后 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你…

Android自带模拟器如何获得ROOT权限

如果在模拟器中不能切换到root权限,很可能是镜像使用的不对。 一.选择镜像标准: 1.运行在PC端选X86_64镜像,才能流畅运行 2.不带google api的镜像 二.步骤 在虚拟机管理器中新建AVD,并下载符合要求的镜像文件 三.验证

【多线程学习】深入探究阻塞队列与生产者消费者模型和线程池常见面试题

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

中医药性笔记

目录 当归黄芪党参白术甘草茯苓半夏陈皮 当归 补血。 当归,腾讯医典 黄芪 土金之药。 补中气的同时补肺气。益卫固表、利水消肿、 腾讯医典黄芪 党参 土金之药。健脾益肺,生津养血。 党参补气之力弱于人参、用于脾肺气虚的轻症。 党参、腾讯…

全网最新的迅雷网盘拉新流程一览,碎片时间就能做的副业

有没有想做副业,又担心休息时间不够的朋友?有没有既想增加收入又不希望工作太累的朋友?如果你也有以上顾虑,不用担心,这个近几年的热门副业——迅雷网盘拉新项目就非常适合你!网盘拉新是平台为了扩大用户群…

【python】一文搞懂序列、列表、元组、集合、字典区别及其应用

【python】一文搞懂序列、列表、元组、集合、字典区别及其应用 【先赞后看养成习惯】求点赞+关注+收藏😀 序列介绍 1、定义:序列(sequence)是一种可迭代的、元素有序的容器类型的数据。 2、序列包括列表(list)、字符串(str)、元组(tuple)和字节序列(bytes)等。 …

Liunx挂载硬件设备

一、mount命令(用于挂载文件系统) (一)语法格式:mount 参数 源设备路径 目的路径 (二)参数 1、-t:指定挂载的文件系统 (1)iso9660:光盘或光盘…

[vapkg]解决vcpkg下载缓慢的问题

在我们执行vcpkg install some_project之后,我们经常会遇见界面停留在Downloading某个依赖上面,这时我们可以直接把那个下载链接复制下来,然后在外面用浏览器或别的下载工具自己下载,接着,去\vcpkg\downloads\temp这个…

iOS开发 刻度盘 仪表盘,圆点按钮滑动控制,渐变色

最近项目需要,想做一个渐变色的刻度盘,圆形按钮滑动控制,所以 用oc写了一下,代码没附上,想看代码可以私信联系,效果如下图。 部分代码 self.drawCenter CGPointMake(self.frame.size.width / 2.0, self.f…

[大模型]TransNormerLLM-7B 接入 LangChain 搭建知识库助手

TransNormerLLM-7B 接入 LangChain 搭建知识库助手 环境准备 在 autodl 平台中租赁一个 3090/4090 等 24G 显存的显卡机器,如下图所示镜像选择 PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8 接下来打开刚刚租用服务器的 JupyterLab,并且打开其…

Spark Standalone模式部署

准备至少2台虚拟机,装好linux系统,我装的是Ubuntu20.04。 1.修改主机名(每台) 1)修改/etc/hostsname内容,主节点改为master,子节点改为slaver1 sudo vim /etc/hostname 2)在/etc/…

rabbitmq 使用SAC队列实现顺序消息

rabbitmq 使用SAC队列实现顺序消息 前提 SAC: single active consumer, 是指如果有多个实例,只允许其中一个实例消费,其他实例为空闲 目的 实现消息顺序消费,操作: 创建4个SAC队列,消息的路由key 取队列个数模,这…

Marin说PCB之Via 的 Z--AXIS--delay知多少?

周末宅在家刷抖音的时候,看刷到了一条很有趣味的视频,主要讲的是让你如何从一个allegro菜鸟一个月变成大神的,一个月包教会,这不是妥妥地大骗子嘛。现在的整个市场行情不好啊,各大汽车新能源门派都在紧锣密鼓地搞着“裁…

AI预测福彩3D第40弹【2024年4月19日预测--第8套算法开始计算第8次测试】

今天咱们继续测试第8套算法和模型,今天是第8次测试,目前的测试只是为了记录和验证,为后续的模型修改和参数调整做铺垫,所以暂时不建议大家盲目跟买~废话不多说了,直接上结果! 2024年4月19日3D的七码预测结果…

最小生成树算法的实现c++

最小生成树算法的实现c 题目链接:1584. 连接所有点的最小费用 - 力扣(LeetCode) 主要思路:使用krusal算法,将边的权值进行排序(从小到大排序),每次将权值最小且未加入到连通分量中…

施耐德 PLC 及模块 ModbusTCP 通信配置方法

1. 通过【I/O扫描器】服务进行读写 相关文档:各模块说明书仅 NOE 网卡模块、部分 CPU 自带的网口支持 优点:不需要额外编程,系统自动周期型读写数据缺点:扫描周期不定,程序无法控制数据刷新的时序 2. 通过内部程序…

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…

Navicat 干货 | 了解 PostgreSQL 规则

PostgreSQL 是一个强大的开源关系型数据库管理系统,为增强数据管理和操作提供了丰富的功能。这些功能中包含了规则,这是一种用于控制数据库内部查询和命令处理方式的机制。本文将探讨 PostgreSQL 规则的工作原理,以及它们与触发器的区别&…