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 命令行工具

项目模块化

模块化原理

项目模块目录在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]