第一个Vue项目完成后的小总结

LittleBeast711
143 阅读2分钟

6.jpg

前言

文章开始于2022年3月13号星期日，昨天刚刚结束我的第一个Vue项目的编写，这个项目从2021年12月31号开始，之后断断续续的经历3个月的时间才编写完成，对其进行一些小小的总结（各位大佬轻喷）。

声明

这个项目是根据B站上Coderwhy老师的视频写的Vue项目，并后续对页面进行了一些完善。
视频地址：https://www.bilibili.com/video/BV15741177Eh
个人认为Coderwhy老师讲解还是比较详细的，初学者可以多看几遍。

1.项目基本展示：

首页展示：

此页面的轮播图，以及精灵图点击可以跳转至相应的页面。点击各个商品，可以跳转至相应的详情页面，选择不同的类型，商品展示会有相应变化。

详情页展示：

顶部导航，‘箭头’可返回至首页，点击不同导航会跳应到此页面的相应位置，底部‘加入购物车’，会跳出弹框提示加入购物车，同时购物车页面会有数据变化。 分类页面：
功能类似于首页，点击会有相应的变化。 购物车页面：
在详情页加入购物车的商品会在此页面显示，并且可以对商品数目进行更改。 个人页面：
个人页面开发不完全，接口数据不全，致畸性页面的展示，功能未实现。

2.基本配置：

  • Vuecli3创建项目：
    vue create 项目名称
  • 运行项目： npm run serve
  • 项目基本结构： blblblbl.png
  • 项目配置途径： 3.0 项目结构比2.0要简洁，缺少了build和confilg文件,可自行创建与package.json同级的 vue.config.js 文件，进行配置。（我配置vue.config.js文件后，不能正常使用，会提示找不到路径，所以没有使用。视频中有使用）
  • 项目安装的插件 O1Z2M1M_W5ER9%A14)H7)A5.png

对于better-scroll这个插件小小的diss一下：插件的目的是为了实现手机端的滚动效果，但是bug还是有不少的，近几年版本好像也没怎么更新。我的分类页面----目录模块有可能在手机上查看效果，不能滚动，在电脑浏览器开发者环境下，更换手机型号才能滚动，暂时没有找到解决的方法，貌似是版本问题。（如果有大佬能留言解决的话，感激不尽ヽ(✿ﾟ▽ﾟ)ノ）

获取项目源代码：github.com/LittleBeast…

avatar
文章
阅读
粉丝