# vite-vue3-multi_modulets

**Repository Path**: zhiquan181/vite-vue3-multi_modulets

## Basic Information

- **Project Name**: vite-vue3-multi_modulets
- **Description**: 这是一个基于 Vite 构建的 Vue3 + TS 项目，支持组件共享、分模块编译和打包。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2024-01-28
- **Last Updated**: 2025-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Vite+Vue多模块项目工程
 
```
这是一个由Vue3、Vite、TS、ElementPlus等框架和组件库搭建整合的Web前端项目工程。支持Vue2、Vue3、Vue3+语法糖+TS语法。
 
主要包含以下项目：
1. 项目A(AAA)
2. 项目B(BBB)
 
项目结构如下：
┌─ dist # 编译打包目录
├─ public # 公共静态资源目录
│   ├─ css # css样式目录
│   │   └─ global.css # 全局静态样式
│   ├─ scss # scss样式目录
│   │   └─ mixin.scss # 全局动态样式
│   └─ vite.svg # 网页ICON图标
├─ src # 源码目录
│   ├─ apps # APP模块目录
│   │   ├─ projectA # 项目A
│   │   │   ├─ assets # 项目A的静态资源目录
│   │   │   │   └─ vite.svg # 项目A的网页ICON图标
│   │   │   ├─ pages # 项目A的页面目录
│   │   │   ├─ App.vue # 项目A的组件入口文件
│   │   │   ├─ index.html # 项目A的HTML主文件
│   │   │   └─ main.ts # 项目A的程序入口文件
│   │   └─ projectB # 项目B
│   │       ├─ assets # 项目B的静态资源目录
│   │       │   └─ vite.svg # 项目B的网页ICON图标
│   │       ├─ pages # 项目B的页面目录
│   │       ├─ App.vue # 项目B的组件入口文件
│   │       ├─ index.html # 项目B的HTML主文件
│   │       └─ main.ts # 项目B的程序入口文件
│   ├─ components # 公共组件目录
│   ├─ plugins # 公共插件目录
│   ├─ App.vue # 组件入口文件
│   ├─ main.ts # 程序入口文件
│   ├─ shims-vue.d.ts # TS声明Vue文件
│   └─ vite-vue.d.ts # TS声明Vite环境变量文件
├─ .gitignore # Git忽略文件
├─ .npmrc # 源配置文件
├─ index.html # 父模块的HTML主文件
├─ package-lock.json # 锁定版本的依赖包配置文件
├─ package.json # 依赖包配置文件
├─ README.md # 说明文档
├─ tsconfig.json # TypeScript主要配置文件
├─ tsconfig.node.json # 针对Node.js应用程序的TypeScript配置文件
└─ vite.config.js # Vite项目配置文件
 
技术栈如下：
· Vue3           : 一套构建用户界面的渐进式框架，易学易用，性能出色，适用场景丰富的Web前端框架。
· ElementPlus    : 一个基于Vue3，面向设计师和开发者的组件库。
· TypeScript     : 简称TS，它是JavaScript类型的超集，它可以编译成纯JavaScript。
· VueRouter      : Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。
· Axios          : 是一个基于promise的网络请求库。
· Pinia          : 最新一代的轻量级状态管理插件。
· WangEditor     : 开源Web富文本编辑器，简洁易用，功能强大，支持Vue和React等。
· MonacoEditor   : 微软开源的一款网页版代码编辑器，具有智能提示，代码高亮，代码格式化等功能。
· Mitt           : 消息事件总线插件，类似于Vue2的Bus，作用于组件或页面之间通讯。
· CodeDiff       : 代码差异组件，类似Github风格代码对比。
· moment.js      : 日期处理类库，支持多语言的日期格式化。
 
项目编译和运行方式：
1. 首先安装好node.js的版本管理工具nvm
 
2. 使用nvm下载并使用版本为v18.18.2的node.js
 
3. 使用 Git 克隆项目代码
  > git clone xxxxxx
 
4. 导入依赖
  > npm i
 
5. 项目启动，需带上`--project=[module_name]`参数
  > npm run dev --project=AAA # 启动项目A前端
  > npm run dev --project=BBB # 启动项目B前端
  > npm run dev # 若父模块的前端页面依然保留未删除，也是可以启动的
 
6. 编译打包，需带上`--project=[module_name]`参数
  > npm run build --project=AAA 打包项目A前端
  > npm run build --project=BBB 打包项目B前端
  > npm run dev # 若父模块的前端页面依然保留未删除，也是可以打包的
```