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

今天把之前的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

相关推荐
Darling02zjh25 分钟前
GUI图形化演示
前端
Channing Lewis27 分钟前
如何判断一个网站后端是用什么语言写的
前端·数据库·python
互联网搬砖老肖38 分钟前
Web 架构之状态码全解
前端·架构
showmethetime1 小时前
matlab提取脑电数据的五种频域特征指标数值
前端·人工智能·matlab
左钦杨2 小时前
IOS CSS3 right transformX 动画卡顿 回弹
前端·ios·css3
NaclarbCSDN2 小时前
Java集合框架
java·开发语言·前端
进取星辰3 小时前
28、动画魔法圣典:Framer Motion 时空奥义全解——React 19 交互动效
前端·react.js·交互
不爱吃饭爱吃菜4 小时前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别
程序员拂雨4 小时前
Angular 知识框架
前端·javascript·angular.js
GoodStudyAndDayDayUp5 小时前
gitlab+portainer 实现Ruoyi Vue前端CI/CD
前端·vue.js·gitlab