【源码】基于Vue3框架的宠物精彩瞬间展示系统

项目简介

本项目是一个算法轻应用（SPA），用于展示摄像头通过算法捕捉宠物精彩瞬间所生成的靓照。以Vue 3为核心框架，搭配Vue Router、Vant、Pinia、Vite等技术，带来良好的开发与使用体验。

项目的主要特性和功能

1. 采用Vue 3的composition-api风格编码，提高代码模块化与组件化程度。
2. 利用Vue Router进行路由管理，实现页面灵活切换。
3. 借助Vant第三方UI库，快速搭建美观实用的用户界面。
4. 使用Pinia进行公共状态存储，方便组件间数据共享。
5. 以Vite作为构建包工具，实现快速开发与项目构建。
6. 通过node - sass和sass进行CSS预编译，提升样式开发效率。
7. 引用阿里iconfont图标库，提供多样化图标资源。

安装使用步骤

环境要求

需安装Node.js版本18.15.0和npm版本9.5.0。

安装依赖

在项目根目录下，打开终端执行： sh npm install

启动项目

开发环境启动： sh npm run dev 项目打包： sh npm run build

新建页面

1. 在src/view文件夹下新增demo/index.vue，按模板编写内容。
2. 在src/router/index.js文件中新增路由配置。
3. 访问页面：
   • history路由访问方式：当前启动服务的(ip/域名):端口号/路由路径
   • hash路由访问方式：当前启动服务的(ip/域名):端口号/#/路由路径

接口管理

新增接口

1. 在src/api文件夹下新增device/index.vue，编写新的接口方法。
2. 在src/api/index.js中注册新增接口模块。

访问接口

通过vue.getCurrentInstance()获取应用实例代理对象，使用proxy.$api[模块名][方法名]调用接口。

关于store

可参考Pinia中文网官网了解Pinia的使用。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】