【vue3-pbstar-books】大学生前端期末作业(vue3、element-plus、ts、pinia、vite、json-server)

一、项目要求

请添加图片描述

二、项目介绍

vue3-pbstar-books是一个图书主题的pc端网站,该项目有首页、全部书籍页、书籍分类页、书籍详情页和关于页五个页面。该方案结合了 Vue3、Element-Plus、TypeScript、Pinia 和 Vite 等先进技术,实现高效的页面布局、状态管理和构建体验。同时,后端采用基于 json-server 提供数据接口服务。

0.项目截图

0.1 首页

在这里插入图片描述

0.2 全部图书

在这里插入图片描述

0.3 图书详情

在这里插入图片描述

1.项目准备

项目GitHub地址:https://github.com/pbstar/vue3-pbstar-books

2.安装项目

1.nodejs环境要求
nodejs版本要求:18+
2.从GitHub上克隆项目
git clone https://github.com/pbstar/vue3-pbstar-books.git

3.启动项目

3.1 前端模块

1.进入项目目录
cd vue3-pbstar-books
2.安装依赖
npm install
3.运行项目前端模块
npm run dev
4.打包项目前端模块(非必须)
npm run build

3.2 后端模块

1.进入项目目录
cd vue3-pbstar-books
cd server
2.运行项目后端模块
json-server db.json

4.项目目录结构

├── public             # 静态资源
├── server             # 服务端模块
│ ├── public           # 静态资源
│ └── db.json          # 服务端入口文件 
├── src                # 源代码 
│ ├── api              # 接口 
│ ├── assets           # 静态资源 
│ ├── components       # 组件 
│ ├── router           # 路由 
│ ├── stores           # 状态管理
│ ├── views            # 所有页面 
│ ├── App.vue          # 根页面 
│ └── main.ts          # 入口文件 
├── .env               # 全局配置文件 
├── .gitignore         # git配置文件 
├── index.html         # html入口文件
├── vite.config.ts     # vite配置 
└── package.json       # package配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/615926.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【心路历程】初次参加蓝桥杯实况

送给大家一句话: 寂静的光辉平铺的一刻,地上的每一个坎坷都被映照得灿烂。 – 史铁生 《我与地坛》 初次参加蓝桥杯有感 一点小小的震撼难评的做题过程A题 艺术与篮球问题描述解题 B 题 五子棋问题描述解题 C题 训练士兵问题描述解题 D题 团建解题 E题 …

【C语言】字符串函数和内存函数及其模拟实现

文章目录 前言 一、常见字符串库函数1.strlen函数2.长度不受限制的字符串函数2.1 strcpy2.2 strcat2.3 strcmp 3.长度受限制的字符串函数3.1 strncpy3.2 strncat3.3 strncmp 二、字符串查找函数strstrstrtok 三、strerror函数四、内存操作函数1.memcpy2.memmove3.memcmp 五、字…

openstack-镜像服务 3

Glance镜像服务 创建glacnce数据库 创建glance用户并创建服务实体及api端点 安装glance软件包 修改配置文件 同步到数据库 设置开机自启并查看日志目录 使用测试镜像验证服务

Project Euler_Problem 178_Step Numbers_动态规划

原题目&#xff1a; 解题思路&#xff1a;动态规划 代码&#xff1a; ll R[50][11][2048];void solve() {ll i, j,k,x,y,z,p,q,u,v;N 40, NN 1024;//N 20;double a, b, c,d;for (i 0; i < 9; i) {R[1][i][1 << i] 1;}for (i 2; i < N; i) {for (j 0; j &…

css animation 动画详细学习

学习 CSS 动画是一个深入且富有创造性的过程&#xff0c;它允许开发者创建出引人入胜且交互性强的网页效果。以下是对 CSS 动画学习的一些总结和要点&#xff1a; 1. 关键帧动画&#xff08;keyframes&#xff09; 使用 keyframes 规则定义动画的整个过程。在 keyframes 中&a…

一些错误的记录

Linux使用rz命令出现乱码&#xff1f; 使用下面的命令上传&#xff1a; rz -besz filename //从linux操作系统上下载文件&#xff08;夹&#xff09;到本地云服务器上的redis连接不上&#xff0c;本地的图形化界面 1.在云服务器控制台-防火墙开放6379端口(使用命令开放端口不…

Traefik和Nginx全方位对比

在现代网络架构中&#x1f310;&#xff0c;选择合适的反向代理&#x1f504;和负载均衡器⚖️是至关重要的。Traefik &#x1f6a6; 和 Nginx &#x1f30a; 是两款广泛使用的开源软件&#x1f513;&#xff0c;它们都能有效地处理大量网络请求&#x1f4c8;&#xff0c;但在功…

力扣刷题 二叉树层序遍历相关题目II

NO.116 填充每个节点的下一个右侧节点指针 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;…

mysql8.0高可用集群架构实战

MySQL :: MySQL Shell 8.0 :: 7 MySQL InnoDB Cluster 基本概述 InnoDB Cluster是MySQL官方实现高可用读写分离的架构方案,其中包含以下组件 MySQL Group Replication,简称MGR,是MySQL的主从同步高可用方案,包括数据同步及角色选举Mysql Shell 是InnoDB Cluster的管理工具,用…

C++---vector容器

是STL容器中的一种常用的容器&#xff0c;由于其大小(size)可变&#xff0c;常用于数组大小不可知的情况下来替代数组。vector容器与数组十分相似&#xff0c;被称为动态数组。时间复杂度为O&#xff08;1&#xff09;。 数组数据通常存储在栈中&#xff0c;vector数据通常存储…

2024.4.13 Python 爬虫复习day01

目录 day01_HTTP协议HTML页面web服务器 各类名词解释 URL统一资源定位符 HTTP协议 HTML页面 知识点: 第一个页面 标题标签和图片标签 注册页面 登录页面 WEB服务器 安装fastapi和uvicorn 原始命令方式 镜像源命令方式 工具方式 快速搭建web服务器 知识点: 示例…

天地人和•大道不孤——卢禹舜中国画作品展在重庆美术馆隆重开幕

2024年4月12日&#xff0c;由中国国家画院、重庆市文化和旅游发展委员会主办&#xff0c;重庆美术馆&#xff08;重庆画院、重庆国画院&#xff09;、北京八荒锦绣美术馆、中国国际文化交流基金会卢禹舜艺术基金承办的“天地人和•大道不孤——卢禹舜中国画作品展”开幕式在重庆…