从零开始搭建性能完备的网站-思路过程(1)

news2024/11/29 0:42:06

之前前端的一揽子技术基本都学完了,除了react和uniapp这些想做大前端需要学的东西,基本vue相关的东西都学过了,本来想做尚硅谷的后台项目,可是它使用的工具库实在是太老了,所以直接跳到自己搭建网站这一步来,考虑到要自己搭建商用项目,其中会设计到三块,一是构思和编码的过程,二是过程中遇到的难题解决,三是关于性能优化方面的思考。后端选型目前还没想好,暂时还是使用自己熟悉的python及其工具库,打算使用flask,实在不行迁移到django。
首先是页面参考。要做一个功能完备的卖鞋子网站作为示例,那么必须一步步的进行细化,否则就会因为繁重的任务把自己压垮。首先进行数据的简化,为简化数据,先不考虑后台管理系统,大约使用10个静态物品分为三类,颜色,价格,品牌,然后首先完成静态页面,甚至登录和注册页面也可以先不考虑,说到写页面我们可以先参考现成的代码,之后在整个网站中保持风格一致即可。
首先采用最新的ts+vue3+pinia的技术选型,导航栏采用简单的图标加登录注册来完成。现在先使用vite来初始化项目。Yarn create vite指令,创建文件夹以后cd进入,然后yarn安装依赖。在package.json里面的yarn指令后面加上—open这样每次就能够自动打开浏览器不需要再次点击。日常报错找不到模块“./App.vue”或其相应的类型声明。ts(2307),根据百度的结果,在env.d.ts文件中加入声明即可。
declare module “*.vue” {
import type { DefineComponent } from “vue”;
const vueComponent: DefineComponent<{}, {}, any>;
export default vueComponent;
}
根据构思,主体就是一个导航栏,简单起见里面加上登录和注册按钮,中间根据推荐或者自己的点击返回一个列表,在列表下方使用分页器,参考耐克官网的布局。
在这里插入图片描述

这里尽量使用ElementPlus的现成样式,少写样式,先使用ElementPlus的自动导入功能,先安装插件使用自动导入,
有遇到不明白怎么写的样式就参考一下别人的代码,可以看到,即使是简单的导航栏,如果不使用浮动也无法按照自己的想法布局,不得不说,真正做起项目来很多布局都需要自己来写,刚开始会很繁琐,只能坚持下去,图标我尽量使用iconfont,接口前期尽量自己mock数据,这样可以简化来自服务端的压力。
在这里插入图片描述

我预想中的图标在左边,登录和注册在右边,中间用|隔开这样美观一点,根据我喜欢的配色设置为lightblue,但是这个字体好像没有对齐,通过设置line-height发现不大行,
好吧,小小导航栏还挺麻烦,单独写一篇好了。

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

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

相关文章

尚硅谷大数据技术Zookeeper教程-笔记04【源码解析-源码详解】

视频地址&#xff1a;【尚硅谷】大数据技术之Zookeeper 3.5.7版本教程_哔哩哔哩_bilibili 尚硅谷大数据技术Zookeeper教程-笔记01【Zookeeper(入门、本地安装、集群操作)】尚硅谷大数据技术Zookeeper教程-笔记02【服务器动态上下线监听案例、ZooKeeper分布式锁案例、企业面试真…

C语言标准CRC-32校验函数

C语言标准CRC-32校验函数 CRC-32校验产生4个字节长度的数据校验码&#xff0c;通过计算得到的校验码和获得的校验码比较&#xff0c;用于验证获得的数据的正确性。获得的校验码是随数据绑定获得。 CRC校验原理及标准CRC-8校验函数可参考&#xff1a;C语言标准CRC-8校验函数。…

HTML5 <ol> 标签、HTML5 <object> 标签

HTML5 <ol> 标签 实例 HTML5 <ol>标签用于定义文档中的有序列表。请参考下述示例&#xff1a; 2 个不同的有序列表实例&#xff1a; <ol><li>Coffee</li><li>Tea</li><li>Milk</li> </ol><ol start"50…

低代码平台是否会取代程序员?答案在这里

上图是一张机器人或者自动化系统取代人工的图片&#xff0c;您看了有哪些感想呢&#xff1f; 故事 程序员小张&#xff1a; 刚毕业&#xff0c;参加工作1年左右&#xff0c;日常工作是CRUD 架构师老李&#xff1a; 多个大型项目经验&#xff0c;精通各种屠龙宝术&#xff1b; …

Java 在线编程编译工具上线,直接运行Java代码

前言 大家好&#xff0c;我是小哈~ 周末没出去浪&#xff0c;花了点时间&#xff0c;在我的个人网站上线了一款小工具。啥工具呢&#xff1f;一款可以在线编译 Java 代码并运行输出结果的小工具。 大家都知道&#xff0c;甲骨文刷 Java 版本号非常积极&#xff0c;这不上个月…

【大唐杯学习超快速入门】5G技术原理仿真教学——通信网络认知

这里写目录标题智能通信业务对讲机固定电话电视机wifiPAD扫地机器人手机电信业务号码办理基础业务办理业务选择通信流程模拟增值业务办理工程实践信号塔基站机房传输&核心机房智能通信业务 按照顺序来进行&#xff0c;对讲机&#xff0c;固定电话&#xff0c;电视机&#…

HTTP协议 | 一文详解HTTP报文结构

目录 &#x1f333; HTTP/HTTPS简介 &#x1f333; HTTP工作原理 HTTP三点注意事项 1. HTTP是无连接的 2. HTTP是媒体独立的 3. HTTP是无状态的 HTTPS 作用 &#x1f333; HTTP消息结构 HTTP请求消息 1. 请求行 2. 请求头 3. 空行 4. 请求数据 HTTP请求实例 HTT…

中电金信:数字化转型|银行业数据中心数字化转型之驱动篇

导语&#xff1a; 在新基建和国产化创新的推动下&#xff0c;银行业掀起了数字化转型的浪潮。但在众多银行中&#xff0c;数字化转型仍旧停留在业务层面&#xff0c;数据中心的数字化转型一直处于配合和被动应对。数据中心层面的数字化转型如何开展&#xff0c;数据中心数字化…

springboot的rest服务配置服务的根路径

如果不配置默认为空&#xff0c;如下是application.yml文件只配置了端口号 server:port: 6868 那么访问时直接访问服务即可 如果配置了rest服务 RestController RequestMapping("/netLicense") public class NetLicenseController {RequestMapping("/getLice…

BP神经网络和RBF神经网络的区别

本站原创文章&#xff0c;转载请说明来自《老饼讲解-BP神经网络》 bp.bbbdata.com 有些同学只学过BP神经网络&#xff0c;想了解RBF神经网络 或者只学过RBF神经网络&#xff0c;想了解BP神经网络 那么本文就非常适合这些同学阅读&#xff0c;帮助大家快速将相关知识迁移到BP/RB…

Java——二叉树的镜像

题目链接 leetcode在线oj题——二叉树的镜像 题目描述 请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 例如输入&#xff1a; 4 / 2 7 / \ / 1 3 6 9 镜像输出&#xff1a; 4 / 7 2 / \ / 9 6 3 1 题目示例 输入&#xff1a;root [4,2…

sql的左连接(LEFT JOIN)、右连接(RIGHT JOIN)、内连接(INNER JOIN)的详解

sql的左连接&#xff08;LEFT JOIN&#xff09;、右连接&#xff08;RIGHT JOIN&#xff09;、内连接&#xff08;INNER JOIN&#xff09;的详解&#xff1a; 这里以两个表的连表为例&#xff1a; 创建表1&#xff1a;为人员表&#xff0c;这里将它当做左表&#xff1b; CREA…

如何配置达梦数据库使其支持GB18030-2022中文编码字符集

达梦版本要求&#xff0c;要求使用2023年4月及之后的达梦月度版版本&#xff0c;补丁版、临时版等不可以。正确安装windows操作系统&#xff0c;windows10以下的版本未做过测试&#xff0c;可能系统不支持导致各种显示错误&#xff0c;建议用windows10及以上版本&#xff0c;本…

大数据能力提升项目|学生成果展系列之六

导读为了发挥清华大学多学科优势&#xff0c;搭建跨学科交叉融合平台&#xff0c;创新跨学科交叉培养模式&#xff0c;培养具有大数据思维和应用创新的“π”型人才&#xff0c;由清华大学研究生院、清华大学大数据研究中心及相关院系共同设计组织的“清华大学大数据能力提升项…

分子生物学 第一章 概论

文章目录第一章 概论1.1.1分子生物学的概念以及发展简史1.2.1分子生物学研究概况第一章 概论 1.1.1分子生物学的概念以及发展简史 广义的定义&#xff1a; 在分子水平上解释生物学现象。 &#xff08;难以与生物化学区分&#xff09; 严格的定义&#xff1a; 在分子水平上研究…

2023年就业卷,卷,卷!前端面试怎么准备?

本文首发自「慕课网」&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"&#xff01; 作者&#xff1a;张轩|慕课网讲师 大多数开发者应该都经历过跳槽和面试&#xff0c;这也是我们工作生活中必须要经历的一部分&#xff0…

关于Python爬虫使用技巧

首先&#xff0c;Python是一种非常流行的编程语言&#xff0c;拥有广泛的应用领域&#xff0c;例如数据分析、人工智能、Web开发等。如果您是初学者&#xff0c;可以开始学习基础的语法和概念&#xff0c;例如变量、数据类型、循环、函数等等。许多在线资源可以提供学习资料。 …

主题切换实现(vue-less)

介绍 本文适合黑白切换或者主题样式偏少的&#xff08;建议&#xff1a;2-10种&#xff09;&#xff1b;主题越多&#xff0c;样式会越多。理论上无限套。本文适合已经写好了一套主题&#xff0c;然后需求增加第二套或者多套主题&#xff08;最好小于10套&#xff0c;当然也可…

免费送30张可视化大屏,跳过复杂代码,轻松缔造可视化智慧校园

“现在老师和学校管理的信息化做的特别差&#xff01;” 。 当我做智慧校园软硬件的老同学和我这么说时&#xff0c;我惊呆了。他认为现在的大多数开发商大部分打着“智慧校园”的旗号&#xff0c;但是所做的系统仅仅是门禁刷卡&#xff0c;或者校园一卡通系统&#xff0c;请问…

视觉检测系统是怎么检测尺寸的?

随着科学技术的进步和市场通知的发展越来越多的自动化机器正在代替人工。 视觉检查系统也是如此。 视觉检测系统在许多行业的应用越来越热衷。 如工业五金. 3c电子.纺织等行业。 那么&#xff0c;具体而言&#xff0c;什么是视觉尺寸检测呢&#xff1f; 1 .什么是尺寸检查&am…