需求：

小型企业级大屏项目

工具选取：

前端构建工具：Vite

前端框架：Vue3

语言：TypeScript

状态管理：Pinia

HTTP库：axios

包管理器：pnpm（可选npm)

CSS管理：TailwindCSS （可选）

路由router

自适应工具：autofit.js（可选）

工具说明：

1.Vite 7.x 最低要求 Node.js 20.19.0 或 22.12.0 及以上版本

2.Vue3可以不搭配ts，可以选择js，下文示例为ts

3.autofit.js：和grid和flex结合使用，可以使大屏样式的缩放更稳定，使用方法和引入简单，体积小

4.tailwindcss的优势：减少style里的代码量+方便ai后续辅助开发

对于在标签内太长的问题，可以使用插件，进行收回，点击icon即可再展开：

流程：

1.vite搭建vue3项目集成ts

新建文件夹E:\person\vite-vue-dp，用编程软（vscode)打开，在终端输入：

cd E:\person\vite-vue-dp
pnpm create vite@latest

此时如果提示node或者pnpm版本不对，自行切换版本，再次执行以上命令。

然后会进入一些选择

框架选择vue3

语言选择TypeScript

额外配置选择no（这里也可以选yes集成，但博主没这样操作所以不展示）

接下来就会自动构建，然后生成了基本架构

2.集成pinia

安装 Pinia

pnpm add pinia

创建 Pinia 实例 (src/stores/index.js)

// src/stores/index.js
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

在 main.js 中注册 Pinia

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores' // 导入 Pinia 实例

const app = createApp(App)
app.use(pinia) // 单独注册 Pinia
app.mount('#app')

3.集成router.js

安装 Vue Router

pnpm add vue-router@4

创建路由实例 (src/router/index.js)

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 创建路由映射表
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue')
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

 在 main.js 中注册路由

// src/main.js (更新后)
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores' // Pinia 实例
import router from './router' // 路由实例

const app = createApp(App)

// 分开注册插件
app.use(pinia)  // 先注册 Pinia
app.use(router) // 再注册 Router

app.mount('#app')

4.集成axios,封装网络请求

安装 Axios

pnpm add axios

创建封装目录结构

mkdir -p src/utils/request
touch src/utils/request/index.js
touch src/utils/request/interceptors.js

封装 Axios 核心逻辑

（1）.基础配置 (src/utils/request/index.js)

import axios from 'axios'
import { requestInterceptors } from './interceptors'
import router from '@/router' // 导入路由实例（用于401跳转）

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE, // 从环境变量获取 API 地址
  timeout: 15000, // 15秒超时
  headers: { 'Content-Type': 'application/json' }
})

// 注入请求拦截器（已在 interceptors.js 中实现，此处保持不变）
requestInterceptors(service)

// 响应拦截器（核心修改：移除 ElMessage，改用原生提示）
service.interceptors.response.use(
  // 成功响应处理（HTTP 状态码 2xx）
  (response) => {
    const res = response.data
    
    // 业务状态码非 200 时视为错误（根据后端实际调整）
    if (res.code !== 200) {
      // 原生错误提示（开发环境用 console，生产环境可选 alert）
      const errorMsg = res.message || '操作失败，请重试'
      console.error('[API Error]', errorMsg)
      // 生产环境可替换为 alert（谨慎使用，影响体验）：
      // alert(errorMsg)
      
      return Promise.reject(new Error(errorMsg)) // 抛出错误供业务层捕获
    }
    
    return res // 业务码 200 时返回数据
  },
  
  // 错误响应处理（HTTP 状态码非 2xx）
  (error) => {
    // 提取 HTTP 状态码和错误信息
    const status = error.response?.status
    let errorMsg = '网络异常，请检查网络连接'
    
    // 根据 HTTP 状态码细化提示
    switch (status) {
      case 401:
        errorMsg = '登录已过期，请重新登录'
        // 401 时跳转登录页（清除本地 token）
        localStorage.removeItem('token') // 假设 token 存储在 localStorage
        router.push('/login?redirect=' + encodeURIComponent(window.location.pathname))
        break
      case 403:
        errorMsg = '无权限访问该资源'
        break
      case 404:
        errorMsg = '请求的资源不存在'
        break
      case 500:
        errorMsg = '服务器内部错误，请联系管理员'
        break
      default:
        errorMsg = error.message || '未知错误'
    }
    
    // 输出错误日志（开发环境）
    console.error(`[HTTP Error ${status}]`, errorMsg, error.response?.data)
    // 生产环境可选 alert：
    // alert(errorMsg)
    
    return Promise.reject(error) // 抛出错误供业务层捕获
  }
)

export default service

（2）拦截器配置 (src/utils/request/interceptors.js)

// src/utils/request/interceptors.js
import { useUserStore } from '@/stores/user/user' // 导入用户状态（含 token）

export function requestInterceptors(instance) {
  // 请求拦截器：添加 token、防缓存等
  instance.interceptors.request.use(
    (config) => {
      // 添加认证 token（从 Pinia 状态获取）
      const userStore = useUserStore()
      if (userStore.token) {
        config.headers.Authorization = `Bearer ${userStore.token}`
      }
      
      // GET 请求添加时间戳防缓存
      if (config.method?.toLowerCase() === 'get') {
        config.params = { ...config.params, _t: Date.now() }
      }
      
      return config
    },
    (error) => {
      console.error('[Request Interceptor Error]', error)
      return Promise.reject(error)
    }
  )
}

创建 API 服务层

新建项目相关 API 文件夹(src/api)

在此文件夹下可以新建api相关ts文件

示例：

// src/api/demo.js
import request from '@/utils/request'  // 导入已封装的axios实例（前文修改版）

/**
 * 简单GET请求：获取数据列表
 * @param {Object} params - 可选查询参数（如 { page: 1, size: 10 }）
 * @returns {Promise} 响应数据（已处理code=200的情况）
 */
export function getDemoList(params = {}) {
  return request.get('/demo/list', { params })  // GET请求用params传参
}

/**
 * 简单POST请求：提交表单数据
 * @param {Object} data - 提交的数据（如 { name: '测试', age: 18 }）
 * @returns {Promise} 响应数据
 */
export function submitDemoData(data) {
  return request.post('/demo/submit', data)  // POST请求用data传参（默认）
}

5.安全问题处理

配置环境变量

在项目根目录创建 .env.development和 .env.production：

# .env.development
VITE_API_BASE = 'http://dev-api.example.com'

# .env.production
VITE_API_BASE = 'https://api.example.com'

在.gitignore里添加：

node_modules
dist
dist-ssr
*.local
//在这里后面添加
.env.local
.env.*.local

6.引入tailwind

引入稳定版本：

pnpm add -D tailwindcss@3.4.3 postcss@8.4.38 autoprefixer@10.4.19

初始化配置（适配指定版本）

# 用已安装的 tailwindcss@3.4.3 初始化配置
npx tailwindcss@3.4.3 init -p

配置 Tailwind v3.4.3

（1）修改 tailwind.config.js（v3.4.3 标准配置）

// tailwind.config.js（v3.4.3 稳定版）
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 内容扫描路径（v3.4.3 支持的文件类型）
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx,svelte}", // 包含 Svelte（如需）
  ],
  
  // 主题扩展（使用 v3.4.3 支持的语法）
  theme: {
    extend: {
      colors: {
        primary: "#3B82F6", // 蓝色（v3.4.3 标准色）
        secondary: "#10B981", // 绿色（v3.4.3 标准色）
      },
      spacing: {
        18: "4.5rem", // 自定义间距（v3.4.3 支持）
      }
    },
  },
  
  // 插件（仅用 v3.4.3 稳定插件）
  plugins: [],
}

（2）创建 CSS 入口文件（v3.4.3 标准结构）

# 创建稳定版 CSS 文件
mkdir -p src/assets/styles
touch src/assets/styles/tailwind.css

/* src/assets/styles/tailwind.css（v3.4.3 语法） */
@tailwind base;    /* 基础样式（重置默认样式） */
@tailwind components; /* 组件类（如按钮、卡片） */
@tailwind utilities;  /* 工具类（布局、颜色等） */

Vite 集成（v3.4.3 兼容配置）

（1） 修改 vite.config.js

// vite.config.js（适配 v3.4.3）
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), // 路径别名（可选但推荐）
    },
  },
  css: {
    preprocessorOptions: {
      css: {
        // 全局注入 Tailwind（v3.4.3 支持）
        additionalData: `@import "${path.resolve(__dirname, "src/assets/styles/tailwind.css")}";`,
      },
    },
  },
});

（2） 入口文件导入（显式引入）

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/styles/tailwind.css"; // 显式导入 v3.4.3 样式

createApp(App).mount("#app");

7.引入autofit.js

安装 Autofit.js

# 使用 PNPM 安装最新稳定版
pnpm add autofit.js

基本使用方法

在入口文件中引入并初始化

// src/main.js
import { autofit } from 'autofit.js'

// 初始化配置
autofit.init({
  designWidth: 1920,   // 设计稿宽度
  designHeight: 1080,  // 设计稿高度
  renderDom: "#app",   // 渲染容器选择器
  resize: true,        // 是否监听窗口变化
  ignore: [],          // 忽略缩放的元素选择器
  transition: 0,       // 过渡时间（毫秒）
  delay: 0             // 延迟执行时间（毫秒）
})

2在 HTML 中添加容器

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autofit.js 示例</title>
</head>
<body>
  <div id="app">
    <!-- 你的应用内容 -->
    <div class="dashboard">
      <div class="card">卡片1</div>
      <div class="card">卡片2</div>
      <div class="chart-container">
        <canvas id="myChart"></canvas>
      </div>
    </div>
  </div>
</body>
</html>

至此所有基本内容已导入，还可以增加引入ESLint + Prettier 统一代码风格，ElementUI等等