小说前端PC项目

基于 Vue 3 + Element Plus + Pinia + Vue Router + SCSS 的小说网站前端项目。

技术栈

• Vue 3 - 渐进式JavaScript框架
• Element Plus - 基于Vue 3的组件库
• Pinia - Vue的状态管理库
• Vue Router - Vue官方路由管理器
• SCSS - CSS预处理器

项目结构

novel-front-pc/
├── public/             # 静态资源
├── src/
│   ├── api/            # API请求
│   ├── assets/         # 资源文件(图片、样式等)
│   │   └── styles/     # 样式文件
│   ├── components/     # 组件
│   │   ├── common/     # 通用组件
│   │   └── layout/     # 布局组件
│   ├── router/         # 路由配置
│   ├── store/          # Pinia状态管理
│   ├── utils/          # 工具函数
│   ├── views/          # 页面视图
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .gitignore          # Git忽略文件
├── index.html          # HTML模板
├── package.json        # 项目依赖
├── README.md           # 项目说明
└── vite.config.js      # Vite配置

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run serve

开发规范

• 组件名使用 PascalCase 命名法
• 文件夹和文件名使用 kebab-case 命名法
• 使用 SCSS 编写样式
• 组件样式使用 scoped 属性限定作用域
• 使用 Pinia 进行状态管理
• 使用 Vue Router 进行路由管理

组件复用

在编写代码前，请先查看项目目录结构，确认是否有可复用的组件。如果没有可复用的组件，请按照模块进行拆分，使代码可以被复用。