Git Product home page Git Product logo

apex-mpa's Introduction

🎉 🎉 🎉 Apex-MPA 🎉 🎉 🎉

Apex-MPA 是一个开箱即用的企业级多页面脚手架,基于 vue3+vite,配备各种工程化工具。如果觉得不错,点个 star 吧 😁

特性 🌼

  • 支持命令行一键创建子项目,并且可选是否使用 ts
  • 支持直接启动指定子项目 / 启动全部子项目
  • 支持打包指定子项目 / 全量打包
  • 打包后的 chunk,各子项目完全脱离解耦,降低风险
  • 配置完善的工程化工具,包括 esint、prettier、stulelint、husky、lint-stage、commitlint
  • 配置一些基本的插件,例如自动引入 Composition API、打包 size 分析工具、打包压缩工具

1.项目结构 📖

├── README.md
├── .husky   // git hook钩子
│   ├── commit-msg // 规范 commit message 信息
│   └── verify-commit-msg.mjs  // 脚本:commitlint 替代方案
├── dist //打包输出目录
├── scripts //存放一些脚本
│   ├── template         // 创建子页面的js模版
│   ├── template-ts      // 创建子页面的ts模版
│   ├── build.cjs        // 全量打包的脚本
│   ├── index.mjs        // 创建子页面的脚本
├── src
│   ├── arrets       // 公共静态资源
│   ├── components   // 公共组件
│   ├── store        // pinia 共享状态存储库
│   ├── utils        // 公共方法
│   └── Projects     // 多页面文件夹
│       ├── index.html         // 启动全部子项目的重定向导航页面
│       └── multiPages.json    // 所有子项目的集合
├── types  //ts 声明文件
├── .env.development   // 开发环境-环境变量
├── .env.production    // 生产环境-环境变量
├── .eslintrc.cjs      // eslint 配置
├── .gitignore         // git 提交忽略文件
├── .prettierignore    // prettier 忽略文件
├── .prettierrc.js     // prettier 配置
├── .stylelintignore   // stylelint 忽略文件
├── .stylelintrc.js    // stylelint 配置
├── .pnpm-lock.yaml    // 锁定项目于一份各个依赖稳定的版本信息
├── .stats.html        // chunck size 分析页面
├── tsconfig.json      // ts 配置
├── tsconfig.node.json // vite在node环境中的 ts 规则
├── vite.config.ts     // vite 配置
├── package.json

2.如何使用 🔑

🪴 基本操作

  //全局安装 pnpm
  npm install -g pnpm
  //切换淘宝源
  pnpm config set registry https://registry.npmmirror.com/

  pnpm i

安装husky,不然可能钩子不会生效

./node_modules/.bin/husky install

🪴 启动

启动全部子项目

npm run dev

启动指定子项目

npm run dev --page=子项目文件夹名
例如: npm run dev --page=pageone

🪴 创建子项目

执行以下命令:

npm run new:page

// 创建使用ts的子项目:
npm run new:page --ts

执行命令后终端提示:请输入要生成的'页面名称:页面描述'、会生成在 /src/Project 目录下
例如输入:mypage:我的页面
输入页面信息回车确认后,会在 scripts/multiPages.json 中生成对应的数据,后期如果要删除页面最好删除对应的数据以保持一致

multiPages.json页面中可以查看各个页面的功能,格式如下:

;[
  { chunk: 'pageone', chunkName: '页面1' },
  { chunk: 'pagetwo', chunkName: '页面2' },
  { chunk: 'pagethree', chunkName: '页面3' }
]

🪴 打包

正式环境打包

单页面打包:

npm run build --page=页面名称

全量打包:

npm run build:all

测试环境打包

单页面打包:

npm run build:test --page=页面名称

全量打包:

npm run build:all test

说在最后 💝

如果本脚手架对你有帮助,希望可以点个 star ⭐️⭐️⭐️ 谢谢 🌹🌹🌹

image.png

apex-mpa's People

Contributors

web-abin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

apex-mpa's Issues

public 文件夹问题

本地开发时,html 页面图标 路径需要加 public ,eg: <link rel="icon" href="./public/favicon.ico"
才能看到, run dev 开启本地开发服务public 中的文件没有被提出来;但run build打包部署时候public文件夹的文件提出来的,如何解决本地开发时候引入路径需要public 问题

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.