# miao-web

**Repository Path**: ling1314/miao-web

## Basic Information

- **Project Name**: miao-web
- **Description**: vite+vue3+ts+element-plus 工程模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-27
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 待完善的点

1. 动态路由注册还没弄。
2. eslint配置的不完善，默认的eslint安全但是有些类型检查过于繁琐，有时间研究一下，找一个适合自己的平衡点。

### 项目创建

感觉初始化前端项目真的好难，要完全配置好所有的东西一两天都不一定能弄好。比如eslint的各种配置、vscode 等等，我到现在都是会用，但是不完全懂，信息量太大太繁杂了。
但是vue3做了很大的优化，这玩意真的做的很用心，开箱即用。一行命令 `npm create vite@latest` 就配置好了路由、状态管理、eslint 和最基础的vscode插件。然后自己引入常用的 element-plus、vue模板等等就能开干了！

#### 1. 安装 Tailwind CSS

1. 安装 Tailwind css 和相关工具。

```shell
npm install -D tailwindcss@3.4.17 postcss autoprefixer
```

2. 初始化tailwindcss 配置文件。

```shell
npx tailwindcss init -p
```

执行完成后会在当前目录生成两个文件tailwind css配置文件。

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

```js
// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

注意：2025-02-28 当前tailwindcss npm 默认版本4.0.3, 但是官网版本是 3.4.17，`npx tailwindcss init -p` 需要配合3.4.17使用。
若遇到 `npm error could not determine executable to run` 等相关提示，请切换对应版本。

3. 添加tailwind CSS 到项目中
   在src目录下创建style.css ,然后再main.ts中引入该文件

```css
// src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

```

配置完成，现在就能愉快的玩耍了。

#### 2. 添加配置文件

Vite 会根据**运行模式（mode）**自动加载对应的环境变量文件:

```sh
npm run dev → development 模式 → 加载 .env.development
npm run build → production 模式 → 加载 .env.production
npm run preview → production 模式 → 加载 .env.production
```

文件加载顺序：

```sh
.env                    # 所有情况下都会加载
.env.local              # 所有情况下都会加载，但会被 gitignore
.env.[mode]             # 只在特定模式下加载
.env.[mode].local       # 只在特定模式下加载，但会被 gitignore
```

配置文件中以 `VITE_` 开头的变量会被默认载入。项目中通过`import.meta.env` 获取。

```ts
// 在src/config/env.ts 中定义环境变量,给项目使用。
export const ENV_CONFIG = {
  // API 配置
  API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
  WS_BASE_URL: import.meta.env.VITE_WS_BASE_URL,

  // 应用配置
  APP_TITLE: import.meta.env.VITE_APP_TITLE,
  APP_VERSION: import.meta.env.VITE_APP_VERSION,

  // 获取完整WebSocket地址
  getWsUrl(path: string = ''): string {
    return `${this.WS_BASE_URL}${path}`
  },

  // 获取完整API地址
  getApiUrl(path: string = ''): string {
    return `${this.API_BASE_URL}${path}`
  },
} as const

export default ENV_CONFIG

// env.d.ts 是 类型定义 文件，TypeScript 会自动发现根目录下的 .d.ts 文件，只是提升开发体验。
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_WS_BASE_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_APP_VERSION: string
  readonly NODE_ENV: 'development' | 'production' | 'test'
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
```

我不建议在 axios 中使用环境变量，我认为 axios 中的 baseURL 应该就指向 '/api',然后通过 vite.config.ts 中配置代理指向 API_BASE_URL。  
src 下是我的工程文件，axios 被二次封装后是一个工具类，不应该被环境影响。  
环境变量的手应该尽量避免伸到 src 下，要伸进去的地方尽量都约束在 config 下，然后在被 src 下的其他模块调用。