学子商城项目

学子商城网站:

首页 — 学子商城

生成vue项目包来书写项目: vue create xuezi-pro

网站结构:

• 头和脚: 独立的模块, 但是不随路径产生变化 -- components
• 身体: 独立的模块 但是 随路径产生变化 -- 路由系统 + views 目录

一个网站要书写3种代码:

• HTML: 描述网页上有什么 和 其内容结构
• CSS: 美化页面内容 + 布局
• JS: 网络请求, DOM操作, 让页面活起来

路由系统

路由系统与地址栏息息相关

HTML和CSS直接复用原网站的, 我们只书写JS部分

​

引入头部和脚部，只需要复制粘贴源代码即可，需要注意区分全局和局部引入的css代码

​

 ​

​

为避免输入错误的地址网页没有反应，建议先制作notfound的路由

​

 ​

网络请求

项目下安装 axios: npm i axios vue-axios

在 main.js 中优雅的全局注入 axios

如果遇到资源里的图片是相对路径，要在图片地址前面加上网址前缀

​

轮播图swiper

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

​

Vue3 和 Vue2 使用的 swiper 版本不同, 需要区别安装

vue2项目 只能使用 低版本的 swiper

安装命令: npm i swiper@5.* vue-awesome-swiper@4.*

百度网盘中提供的包vue-pro, 已经安装好了模块, 可以直接用

使用时: 需要到 main.js 中全局注入给vue

​

 然后用这两个组件展示

​

还有专为swiper提供的方法，获取不用样式展示轮播图

​

方法更多的参数可以浏览disableOnInteraction_Swiper参数选项

Swiper官方提供的在线 Vue Demo. 可以用来参考

vue-awesome-swiper | Homepage | Surmon's projects

官网api(适合DOM方式): 中文api - Swiper中文网

新增知识点总结

事件修饰符: 可以为事件提供增强功能
语法: @事件名.修饰符
native: 允许把 原生 事件绑定给自定义的组件
ref: 可以把一个变量和元素捆绑在一起. 代替原生DOM的选择器
语法 <元素 ref="变量名"/>
使用时: ref变量会存储在 $refs 属性里, 直接从这里读取使用即可

生成项目包

vue create xuezi-pro

​

 第三方模块安装:

• axios: npm i axios vue-axios
• swiper: 轮播图

​

 把两者全局引入: main.js

​

项目具体步骤