【源码】基于Vite和Elementplus的Vue3全栈开发环境搭建项目

项目简介

本项目专注于构建基于Vite和Element-plus框架的Vue3全栈开发环境。借助docker-compose简化nginx容器管理与部署，完成nginx服务配置。项目包含Element-plus组件使用场景总结、代码规范设置、组件及图标自动导入、axios封装、mock配置、vue-router配置、svg图标引入等功能，为开发者提供完整实用的开发环境搭建方案。

项目的主要特性和功能

1. 容器部署管理：用docker-compose简化nginx容器部署与管理，实现前后端分离项目前端部署，处理前后端路由问题。
2. Element-plus组件运用：总结el-button、ElMessage、ElMessageBox、ElDialog使用场景及ElInput样式调整方法，便于交互设计。
3. 代码规范管理：配置Git提交、Eslint和stylelint规范，保障代码质量与规范性。
4. 自动导入功能：实现Element-plus组件、图标及相关库自动导入，提升开发效率。
5. 网络请求处理：封装axios实例，结合环境变量和代理配置简化HTTP请求，支持业务请求封装与类型定义。
6. Mock数据配置：通过vite-plugin-mock和mockjs配置mock数据，方便开发阶段接口测试。
7. 路由配置：配置vue-router，包含登录、首页、404页面和任意路由等一级路由，构建清晰前端路由结构。
8. 图标引入：用vite-plugin-svg-icons引入svg图标，封装SvgIcon组件，方便图标使用。
9. 开发体验优化：开发模式添加启动动画，用cross-env设置环境变量，提升开发体验。

安装使用步骤

1. 安装依赖

在项目根目录运行以下命令安装依赖： sh pnpm install

2. 配置相关文件

• commitlint配置：按文档配置commitlint相关文件，使Git提交规范生效。
• Eslint配置：根据文档配置.eslintrc.js等文件，进行代码风格检查。
• stylelint配置：配置.stylelintrc.cjs和.stylelintignore文件，规范样式代码。
• 自动导入配置：在vite.config.ts中配置组件和图标自动导入内容，在.eslintrc.cjs中解决编译器报错提示。
• axios配置：结合.env文件和vite.config.ts的server配置，设置axios实例代理请求地址。
• mock配置：安装vite-plugin-mock和mockjs，在vite.config.ts中配置插件，在指定目录编写mock文件。
• vue-router配置：在src/router/index.ts中配置路由信息。
• svg图标引入配置：安装vite-plugin-svg-icons，在vite.config.ts和main.ts中配置，封装SvgIcon组件。

3. 启动开发环境

运行以下命令启动开发环境，享受Vite快速开发和热更新功能： sh pnpm run dev

4. 构建生产环境

运行以下命令进行生产环境构建： sh pnpm run build

5. 个性化开发

依据src目录代码结构和vite.config.ts插件配置，进行个性化开发环境搭建和功能扩展。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】