Vue3 + TypeScript + TailwindCSS + ElementPlus 项目

项目概述

这是一个基于Vue3、TypeScript、TailwindCSS和ElementPlus的快速开发模板。

技术栈详解 🛠️

• Vue 3 🌱: 使用组合式API和Composition API，提供更好的代码组织方式
• TypeScript 📝: 静态类型检查，提高代码可维护性
• TailwindCSS 🎯: 实用优先的CSS框架，快速构建自定义设计
• ElementPlus 💎: 基于Vue 3的组件库，提供丰富的UI组件
• Vite 🚄: 下一代前端构建工具，极快的开发体验

项目目录结构

car/
├── public/              # 静态资源
├── src/
│   ├── assets/          # 图片等资源
│   ├── components/      # 公共组件
│   ├── pages/           # 页面组件
│   ├── router/          # 路由配置
│   ├── styles/          # 全局样式
│   ├── App.vue          # 根组件
│   └── main.ts          # 应用入口
├── .gitignore
├── Dockerfile
├── package.json
├── README.md
├── tailwind.config.js   # Tailwind配置
└── vite.config.ts       # Vite配置

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

生产构建

# 构建生产版本
pnpm run build

Docker 部署

1. 构建Docker镜像

   docker build -t vue3-ts-template .
   

2. 运行容器

   docker run -d --name vue3-ts-template -p 80:80 vue3-ts-template
   

或者直接运行部署脚本：

./deploy.sh

应用将会运行在 http://localhost