从零搭建网站(第五天)
之前帮办公室主任做了几个python中型项目,收益非浅,按需求文档来,今天我将element-plus移植而来,主要解决三个需求,一是将网站logo加上,二是将下边商品列表常出现的图片大小不一解决,三是使用pinia迭代vuex。
第一个加网站logo,直接使用之前的element-plus的风格,中间设置一段一定长度的空白el-menu-item即可。
可以看到,虽然导航栏确实美化了不少,但商品的大小不一样,这是因为图片的大小不一样,在调整图片的同时可能还要调整一下布局。
第二个解决图片大小不一样问题,直接将图片大小统一设置即可,因为宽度都设为了25%,所以在设置好margin和padding的情况下,只要适当调整图片大小即可。
第三个,使用pinia迭代vuex。这是常用的重构,在之前以后的项目中我们也会遇到很多类似的工作,比如使用vite替代脚手架,使用ts替代js,我们先了解一下项目中使用vuex的地方,基本用的不多,而且因为项目简单,我们只使用了一个store,通过deepseek大概了解一下pinia和vuex的差别,我们就可以开始改代码了,最大的区别就是取消了mutation,以及不需要dispatch,直接引入后调用函数即可。我们在了解基本概念后,可以使用通义灵码,这是在编程方面比deepseek更合适的且适合内嵌在vscode里的ai工具,了解基本概念后我们就可以更针对性的提问和修改代码。直接通过通义灵码进行提问,复制粘贴代码即可,但是ai只能算一个高级搜索引擎,如果要按需定制的话还是得自己会改代码。
最后,我们通过ai来设计注册和登录页面即可。