# 什锦视频前端

**Repository Path**: csmcool/csm-video

## Basic Information

- **Project Name**: 什锦视频前端
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-15
- **Last Updated**: 2025-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3-project前端项目模板

基于最新的Vue3 、TypeScript 、Vite5 、Pinia等主流技术，从零开始自主搭建的前端工程项目模板，开箱即用，PC端、移动端都适用。

## 项目说明

* 使用最新的前端技术栈Vue3 + Vite5 + TS等，截止目前使用最新版本的框架和插件。
* Git提交代码之前，可以有效阻止console等关键词的提交，可以灵活修改配置。
* ESlint、prettier等相关配置中都有详细说明，可以更好了解为何如此配置。
* scripts中包含比较全面的运行脚本配置。
* 项目模块化规范设置为ES Module。
* 项目插件和相关库会不断更新至最新稳定的版本。

## 仓库地址

* [https://gitee.com/yuanxuesheng/vue3-project](https://gitee.com/yuanxuesheng/vue3-project)


## 基础应用

* [框架：Vue3](https://cn.vuejs.org/)
* [路由管理：Vue-router](https://router.vuejs.org/zh/)
* [状态管理：Pinia](https://pinia.web3doc.top/)
* [工具链：Vite](https://cn.vitejs.dev/)
* [类型语言：TypeScript](https://www.typescriptlang.org/zh/)
* [CSS扩展：sass](https://www.sass.hk/)
* [接口请求：axios](https://github.com/axios/axios)
* [包工具：pnpm](https://www.pnpm.cn/)
* [移动端组件库：vant](https://vant-contrib.gitee.io/vant/#/zh-CN)
* [PC端组件库：Element Plus](https://element-plus.gitee.io/zh-CN/)

## 使用

### 安装依赖
```
pnpm install
```

### 启动服务
```
pnpm dev
```

### 代码打包-可以打包不同环境地址的包
```
pnpm build
```

### Lints and fixes files
```
pnpm lint-eslint
```


## 目录结构

```shell

vue3-project
  |-.vscode               // VsCode配置
  |-.husky                // husky提交校验配置
  |-build                 // 存放vite插件配置和相关构建js的目录
  |-env                   // 环境变量存储目录
  |-types                 // ts类型定义的公用目录
  |-src
      |─assets            // css、图片、字体包资源
      |─components        // 全局公用组件和页面组件
      |─config            // 可以存放环境等相关配置
      |─directive         // 自定义指令
      |─plugins           // 自定义vue插件目录
      |─router            // 路由配置
      |─service           // 公共api和axios请求方法的目录
      |─store             // 状态管理
      |─models            // 可用来存放前端静态数据的目录
      |─hooks             // 全局公用hooks的目录
      |─utils             // 全局公用方法的目录
      |─views             // 功能页面
      |─App.vue           // vue文件入口
      |─main.ts           // js文件入口
  |-vite.config.ts        // vite配置
  |-.editorconfig         // 编辑器编码设置
  |-.eslintrc             // eslint配置
  |-.prettierrc.cjs       // prettier配置
  |-.gitignore            // git忽略文件配置
  |-postcss.config.cjs    // css预处理和适配的配置文件
  |-commitlint.config.cjs // git提交规范配置
  |-package.json          // npm包管理文件
  |-README.md             // 项目说明

```
## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request