今日目标
✔ 掌握如何使用 Vite 创建项目。
✔ 掌握通过 Vite 如何配置 alias 别名、Less 自动导入等。
项目介绍
项目介绍
电商发展十余年,是个成熟的模式,小兔鲜儿是 B2C 电商平台,综合品类平台,参考网易严选。平台理念:(品质)新鲜、(价格)亲民、(物流)快捷。
首页模块。
顶部通栏,吸顶导航,网站头部,左侧分类,轮播图,新鲜好物,人气推荐等。
一级分类。
面包屑,轮播图,全部二级分类,二级分类推荐商品等。
二级分类。
筛选区域,排序功能,商品列表,无限加载等。
商品详情。
商品图片展示,基本信息展示,配送城市选择,SKU 选择,库存选择,商品详情展示,商品评价展示,24 小时热销,相关专题,加入购物车等。
购物车。
头部购物车:展示商品数量和列表,删除商品,跳转购物车页面等。
购物车页面:购物车商品展示,选择商品,修改数量,修改商品规格,价格计算,跳转下单等。
登录模块。
表单校验,账户密码登录,手机号登录,第三方登录,绑定手机,完善信息等。
填写订单。
订单商品展示,收货地址选择,收货地址修改,支付方式选择,生成订单等。
进行支付。
订单信息展示,跳转支付网关,提示正在支付,等待支付结果,跳转支付成功页面等。
个人中心。
中心首页:展示个人信息,近期收藏商品,近期足迹,猜你喜欢等。
订单管理:全部订单,待付款,待发货,待收货,待评价,已完成,已取消。立即付款,取消订单,确认收货,删除订单,查看物流等。
订单详情:订单状态,订单进度,详细信息等。
总结总结。
完成电商支付闭环,之前负责登录/注册(没啥含金量)?现在负责商品管理、购物车、支付、订单管理等。
配套资源
目标
清楚企业开发都会用到哪些配套资源。
内容
1 | # 支付账号 |
使用技术
目标
能够说出项目用到的技术栈和相关组件。
技术
Vue3.0 (使用组合 API 的方式来开发)。
Vite 开发。
Axios (请求接口)。
Vue Router (单页路由)。
Pinia (状态管理)。
normalize.css (初始化样式)。
@Vueuse/core (组合 API 常用工具库)。
算法 Power Set。
dayjs (日期处理)。
vee-validate (表单校验)。
组件
轮播图、面包屑、查看更多、骨架屏组件、单选框、复选框、对话框组件、消息提示、消息确认组件、标签页、城市选择组件等。
项目起步
创建项目
目标
使用 Vite 初始化小兔鲜项目。
内容
- 使用 Vite 初始化项目。
1 | yarn create vite rabbit-vue3-ts --template vue-ts |
- 安装依赖包,需要进入到
rabbit-Vue3-ts
项目中。
1 | yarn |
- 启动项目。
1 | yarn dev |
目录调整
目标
能够调整项目目录结构,规范开发环境。
修改文件
App.Vue
,删除无用的内容。
1 | <template> |
删除文件
src/components/HelloWorld.Vue
,HelloWorld 组件。src/assets/logo.png
,Vue 默认的 logo。
新增文件夹
utils
,用于存放工具相关。assets/images
,用于存放图片相关。assets/styles
,用于存放样式相关。router
,用于存放路由相关。store
,用于存放数据相关。views
,用于存放页面级别的组件。types
,用于存放 ts 的公共类型。
管理项目
目标
能够使用 Git 管理项目并上传到码云。
内容
初始化项目:
git init
。将代码添加到暂存区:
git add .
。提交代码
git commit -m '初始化提交'
。在码云上创建项目
rabbit-Vue3-ts
,选择开源。关联远端仓库。
1 | git remote add origin https://gitee.com/ifercarly/rabbit-vue3-ts.git |
- 推送到远程仓库。
1 | git push -u origin master |
Axios 封装
目标
基于 Axios 封装一个请求方法,调用接口时使用。
内容
- 安装 axios。
1 | yarn add axios |
- 新建模块,
src/utils/request.ts
。
1 | import axios from 'axios' |
- 代码测试,
App.vue
。
1 | <script lang="ts" setup> |
配置路径别名
目标
能够配置 @
路径别名,方便导入模块。
内容
- 修改 Vite 配置,
vite.config.ts
。
1 | import { defineConfig } from 'vite' |
- 安装 Node 的类型声明文件。
1 | yarn add @types/node -D |
- 修改 TS 配置,
tsconfig.json
。
1 | { |
🧐 注意:修改完 vite.config.ts
配置文件需要重启。
样式处理
less 变量与 mixins
目标
能够使用 less 变量定义项目中常用的颜色,使用 mixins 定义项目中常用的样式。
内容
- 安装 less 依赖包。
1 | yarn add less -D |
- 定义变量,
assets/styles/variables.less
。
1 | // 主题 |
- 定义混入,
assets/styles/mixins.less
。
1 | // 鼠标经过上移阴影动画 |
- 测试,
App.vue
。
1 | <style lang="less" scoped> |
- 了解,混入也可以传递参数。
1 | .hoverShadow(-20px); |
1 | .hoverShadow (@y: -3px) { |
自动导入
目标
能够自动导入项目中的 less 变量
和 mixins
。
问题
variables.less
和 mixins.less
两个 less 文件是需要在多个组件中去使用的,每次使用都要重新导入,麻烦。
内容
- 修改 Vite 配置,
vite.config.ts
。
1 | export default defineConfig({ |
- 修改代码,
App.vue
。
1 | <style lang="less" scoped> |
统一样式
目标
能够使用 normalize.css 统一项目中的样式。
内容
- 安装
normalize.css
。
1 | yarn add normalize.css |
- 使用
normalize.css
,main.ts
。
1 | import { createApp } from 'Vue' |
- 测试,
App.vue
。
1 | <template> |
🧐 通过效果会发现,h1 ul 等样式还是保留的,但是不一致的样式已经被统一了(例如 body 的 margin)。
公共样式
目标
能够给项目设置公用的样式。
内容
- 新建文件,
assets/styles/common.less
。
1 | // 按照网站自己的需求,提供公用的样式 |
- 导入样式,
main.ts
。
1 | import { createApp } from 'Vue' |