# vue3

**Repository Path**: uniquey/vue3

## Basic Information

- **Project Name**: vue3
- **Description**: vu+ts+vite
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-11
- **Last Updated**: 2024-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, vite

## README

# relia-vue3

## 项目介绍

基于 Vue3 + Ant-Design-Vue4.x + Vite5 + TypeScript + Pinia 等主流技术栈构建

## 环境准备

| 环境 | 名称版本 | 备注 |
| --- | :-- | --- |
| **开发工具** | VSCode | [下载地址](https://code.visualstudio.com/Download) |
| **运行环境** | Node 16+ | [下载地址](http://nodejs.cn/download) |
| **VSCode插件(必装)** | 1. `Vue Language Features (Volar) ` <br/> 2. `TypeScript Vue Plugin (Volar) ` <br/>3. 禁用 Vetur | ![vscode-plugin](https://foruda.gitee.com/images/1687755823108948048/d0198b2d_716974.png) |

## 项目启动

```bash
# 克隆代码
git clone https://???

# 切换目录
cd xoa-vue3

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm run dev
```

## 项目部署

```bash
# 项目打包
pnpm run build

# 上传文件至远程服务器
将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
			proxy_pass http:???/; #后端API地址
	}
}
```

## 目录结构和说明

```bash

├── dist
|—— node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
|   |—— constant/
│   ├── components/
│   ├── router/
│   ├── store/
|   ├── utils/
│   ├── views/
│   ├── App.vue
│   └── main.ts
├── tests/
├── .gitignore
├── babel.config.ts
├── package.json
├── README.md
└── vue.config.ts

每个目录和文件详细说明:

dist/ 项目构建后的输出目录

node_modules/ 是npm加载的项目依赖模块

public/ 目录存放了与业务逻辑无关的静态资源，例如 index.html、favicon.ico 等。index.html 是应用程序的入口文件，它被打包后生成到生产环境中。可以在其中引入外部脚本或样式表，例如 CDN 上的库文件。

src/ 目录是主要工作目录，包含了整个应用程序的源代码。

assets/ 目录用于存放应用程序使用的静态资源文件，例如图片、样式表等。

constant/ 项目中的常量，如css主体色，屏幕的最小宽度等等,一般大写表示为常量

components/ 目录用于存放程序的公共组件。一个组件通常由 .vue 文件组成，其中包含了模板、样式和逻辑等内容。

router/ 目录用于定义应用程序的路由配置。可以使用 Vue Router 来实现客户端路由，这样用户在访问不同页面时可以切换视图，而无需重新加载整个页面。

store/ 目录用于管理应用程序的状态。Vue3 使用 Vuex 作为应用程序的状态管理工具。通过 Vuex，可以集中管理和共享数据，简化组件之间的通信。

utils/ 目录存放工具函数或模块。这里可以编写一些与业务逻辑无关的通用函数，并在项目中引用。

views/ 目录用于存放应用程序的页面级组件。每个页面通常由一个 .vue 文件组成，并且通过路由进行导航。

App.vue 是应用程序的根组件，它包含了应用程序的整体布局和结构。可以在此文件中定义全局样式和全局组件。

main.ts 是入口文件，用于初始化 Vue3 应用程序和配置一些全局设置。

tests 目录用于存放测试文件。可以使用单元测试、集成测试等方式对应用程序进行测试。测试是保证代码质量和可靠性的重要手段。

.gitignore 文件用于指定 Git 版本控制系统忽略的文件和目录。可以在其中列出不需要被提交到代码仓库的文件和目录，例如依赖包、构建产物等。

babel.config.js 文件用于配置 Babel，一个 JavaScript 编译工具。可以在其中指定需要使用的 Babel 插件和预设，以及其他相关配置。

package.json 是 Node.js 项目的配置文件，其中包含了项目的元数据和依赖信息。可以在其中配置脚本、安装依赖、指定启动命令等。

README.md 是项目的说明文档，通常用于介绍项目的概况、安装步骤、使用方法以及其他相关信息。

vue.config.ts 文件用于自定义 Vue CLI 的默认配置。可以在其中修改输出目录、配置代理服务器、添加自定义插件等。
```

##