https://github.com/sumingcheng/moduvue

基于Webpack5和Vue3的框架，提供了许多常用的功能和工具，可以帮助快速搭建一个高效、可扩展和易维护的Web应用程序。
https://github.com/sumingcheng/moduvue

autoprefixer axios babel crypto dayjs echats element-plus gulp js-cookie less loadsh postcss prettier vue-router vue3 vuex webpack-analyzer webpack5

Last synced: about 2 months ago
JSON representation

基于Webpack5和Vue3的框架，提供了许多常用的功能和工具，可以帮助快速搭建一个高效、可扩展和易维护的Web应用程序。

• Host: GitHub
• URL: https://github.com/sumingcheng/moduvue
• Owner: sumingcheng
• License: apache-2.0
• Created: 2023-04-19T01:04:09.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-13T13:54:23.000Z (over 2 years ago)
• Last Synced: 2025-02-28T23:23:22.654Z (over 1 year ago)
• Topics: autoprefixer, axios, babel, crypto, dayjs, echats, element-plus, gulp, js-cookie, less, loadsh, postcss, prettier, vue-router, vue3, vuex, webpack-analyzer, webpack5
• Language: JavaScript
• Homepage:
• Size: 681 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ModuVue

该项目是开箱即用的一个基于 Vue3 + Webpack5 的模块化项目框架。

## 安装

    npm i

    yarn

    pnpm i

## 启动

    npm run dev

    yarn dev

    pnpm run dev

## 构建

    npm run build

    yarn build

    pnpm run build

## 推荐使用

1. nvm 管理 node 版本，推荐使用 v16 以上

2. less 编译器，推荐使用 less v4 以上

3. gulp 构建工具，推荐使用 gulp v4 以上

4. npm 包管理工具，推荐使用最高版本

5. Git Bash 命令行工具

# 项目模块化

![image](https://github.com/sumingcheng/ModuVue/assets/21992204/baa2a911-03a1-4798-a329-82f021a57b53)

## 模块化原理

项目模块目录在`src/views`，该目录下每个文件夹就代表一个模块，目录名称就是该模块名的缩写。

### 模块目录结构

* **service-config/**  - 模块基础服务配置

    - **http**  - 请求配置

    - **routes**  - 路由配置

    - **store**  - 状态配置

* **pages/**  - 模块页面目录

    - **index.js**  - 页面启动组件

## 创建新模块

模块的标准模板`src/baseModules/base`，创建一个新模块只需要把这个模块拷贝一份，然后声明下即可：

将拷贝的模块目录放到`src/views`，将文件夹名称改为新的**模块名称**，例如：`src/views/demo`

## 模块使用

* **http**  - 请求配置，你可以选择新建一个实例，或者使用示例中的 `AxiosInstances`，改写你的登录逻辑

* **routes**  - 路由配置，在`routes.js`定义该模块的路由，编写后会自动注入到路由内

* **store**  - 状态配置，在`store.js`定义该模块的状态，模块名就是`VueX`的`module`名，编写后会自动注入到`VueX`内

# 贡献指南

* 如果你想为本项目做出贡献，请按照以下步骤进行：

* 在GitHub上，Fork本项目到你的账户中；

* 克隆本项目到本地进行开发修改；

* 提交代码并创建一个Pull Request；

* 等待作者审核并合并你的代码。

# 许可证

    本项目使用了Apache License Version 2.0许可证。

    Copyright (c) [2023] [Sumingcheng]