# pc-web-templates

**Repository Path**: wswhq/pc-web-templates

## Basic Information

- **Project Name**: pc-web-templates
- **Description**: vue3+vite 搭建的 通用 官方网站模板, 针对 该模板做了一些动画处理, 头部和内容都有添加
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-12-04
- **Last Updated**: 2025-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: whq
 * @Date: 2022-12-28 11:13:53
 * @LastEditTime: 2023-12-04 18:03:23
 * @LastEditors: whq
 * @Description: 
 * @FilePath: \pc-web-zjalny\README.md
-->

# Vue 3 + TypeScript + Vite + VueHook Plus + pinia + Element plus 搭建的脚手架

# Node 16.20.0

## Element plus ui库
https://element-plus.gitee.io/zh-CN/component/button.html

## VueHook 首选 useRequest，强大的请求中间层
https://inhiblab-core.gitee.io/docs/hooks/useRequest/guide/
https://inhiblab-core.gitee.io/docs/hooks/guide/
https://juejin.cn/post/7143488626955911181

## vue3+vite ＜script setup ＞ 配置name属性
 ```
//安装插件
 npm i vite-plugin-vue-setup-extend -D
// vite.config.ts 引入
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default {
    plugins: [vue(), vueSetupExtend()],
}
//vue组件
<script setup  lang="ts" name="simpleTemp"> 直接使用
 ```

# 项目说明
## 项目展示
<img alt="项目1" src="./doc/img/1.png" />



# 项目依赖
##  [scrollreveal](https://scrollrevealjs.org/api/reveal.html)（监听滚动触发动画）
```目的实现滚动条滚到相应高度触发对应的动画效果```
scrollreveal https://scrollrevealjs.org/api/reveal.html
动画基于 动画库：https://animate.style/  （src\static\animate.css） [Version - 3.5.1]
使用方式 详看src\view\home\index.vue

## [swiperjs](https://swiperjs.com/vue)  (轮播图)