# Souchong-vue

**Repository Path**: MocCard/Souchong

## Basic Information

- **Project Name**: Souchong-vue
- **Description**: vite + vue3 + ts 开箱即用现代开发模板 🐳 
- **Primary Language**: TypeScript
- **License**: Artistic-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-10-26
- **Last Updated**: 2023-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

<div align="center">
    <h1>Souchong-vue</h1>
    <p>vite + vue3 + ts 开箱即用现代开发模板 🐳 </p>
</div>

<br />
<br />

## 特点 🐳

1. Vite 的
2. Vue3 的
3. 文件路由
4. 布局系统
6. Api 自动引入
7. 组件自动引入
7. 图标echarts、highcharts
9. element-plus 
10. TypeScript 的
11. SASS
12. 暗黑模式支持
13. axios 请求支持
13. vue-router 
14. pinia 状态管理
15. npm 包管理器
25. tsx 支持
27. 环境变量配置支持
28. 统一的代码规范与风格支持
29. 生产环境自动移除开发日志

<img src="public/bg.png">

## 使用 🐂

> 该模板不限定大家使用某一特定的包管理器，npm，yarn 和 pnpm 都行。同时注意 npm 的版本应该尽量的新。

1. 安装依赖
```shell
npm install
```
2. 开发
```shell
npm run dev
```
3. 预览
```shell
npm run dev
```
4. 打包
```shell
npm run build
```
5. 项目部署-Nginx配置
```shell

orker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location / {
            root   /home/Souchong/projects/Souchong-vue;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /dev-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}  
```