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

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

相关推荐
excel8 分钟前
迭代器与生成器全面理解
前端
可口码农20 分钟前
MixOne:Electron Remote模块的现代化继任者
java·前端·electron
发如雪-ty26 分钟前
Bash常用操作总结
前端·chrome
冲!!37 分钟前
使用nvm查看/安装node版本
前端·node.js·node·nvm
LilyCoder1 小时前
HTML5二十四节气网站源码
前端·javascript·html·html5
Bruce_Liuxiaowei1 小时前
跨站脚本攻击(XSS)高级绕过技术与防御方案
前端·网络安全·xss
EF@蛐蛐堂1 小时前
【vue3】v-model 的 “新玩法“
前端·javascript·vue.js
两个月菜鸟2 小时前
vue+微信小程序 五角星
前端·vue.js·微信小程序
GISer_Jing3 小时前
React手撕组件和Hooks总结
前端·react.js·前端框架
Warren987 小时前
Lua 脚本在 Redis 中的应用
java·前端·网络·vue.js·redis·junit·lua