【源码】基于Vue 3和Vite 3的前端开发模板

项目简介

本项目是基于Vue 3、Vite 3、Vue Router和Pinia的现代化前端开发模板。集成了vant@3、axios、less和echarts等常用技术栈，提供开发与自定义环境的配置方法，支持组件热拔插和国际化功能，旨在为开发者提供快速启动、高效开发的环境，使其专注于业务逻辑实现。

项目的主要特性和功能

1. 使用最新Vue 3框架，提供高效组件化开发体验。
2. 以Vite 3作为开发服务器，具备快速模块热替换（HMR）和冷启动能力。
3. 集成Vue Router和Pinia，提供路由与状态管理解决方案。
4. 集成移动端UI库vant@3，便于开发移动端界面。
5. 集成axios库，方便进行网络请求。
6. 支持使用less编写样式。
7. 集成echarts库，便于进行图表展示。
8. 支持自定义开发环境，通过配置mode和env文件管理不同环境变量。
9. 可通过简单文件夹操作实现组件热拔插，方便服务注册与删除。
10. 支持应用多语言显示，便于国际化部署。

安装使用步骤

步骤 1: 安装依赖

确保Node.js版本为v16及以上，运行以下命令安装项目依赖： sh yarn install

步骤 2: 运行项目

开发环境下运行项目： sh yarn run dev 构建生产包： sh yarn run build 构建测试包： sh yarn run build:test

步骤 3: 自定义配置和环境

可根据项目需求自定义开发环境mode和env文件，例如新增灰度环境的script和对应的.env.gray文件。

步骤 4: 使用组件热拔插功能

将组件文件夹拷贝到指定位置并重启服务，可实现服务注册；删除文件夹则完成服务删除。具体实现参考view/goods或view/peoples。

步骤 5: 实现国际化功能

使用vue - i18n库实现应用国际化，具体使用方法参考项目示例代码。跨组件通信使用mitt库，通过简单API调用完成跨组件通信。

下载地址

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