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

之前前端的一揽子技术基本都学完了,除了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发现不大行,
好吧,小小导航栏还挺麻烦,单独写一篇好了。

猜你喜欢

转载自blog.csdn.net/returnadsss/article/details/130152197