Language: 中文简体 | English

什么是 monia ? monia 取名灵感来自于希腊神话掌握和谐的女神：哈耳摩尼亚

寓意着 "联系所有人的爱"。从而达到和谐共存的状态。

所以这是一款同时支持 Vue、React、Flutter 的脚手架。

注：使用 monia-cli 创建 flutter项目之前，请确保你的本地已经安装了flutter的开发环境.

特性

💡 快速生成项目模板

⚡️ 支持 react + typescript + hooks

🌈 支持Vue 2.x

🛠️ 支持 Vue 3.x (vite + typescript)

🔩 支持 flutter + getx(现已更新空安全)

🌟 错误提示

🔗 命令联想☁

flutter 现有更新至空安全，主要架构为flutter v2.x + getx4.x

模版仓库

flutter-getx-with-null-safety-template

flutter-without-null-safety-template

vue3-vite-typescript-template

vue2-template

react-vite-typescript-template

安装

 yarn global add  monia-cli  ||  npm install -g  monia-cli

参数和命令

Usage: monia <command> [options]

Options:
  -V, --version      output the version number
  -h, --help         output usage information

Commands:
  create <app-name>    Create a project with template from monia git repository.
  init <page-name>     Generate new flutter getx page from monia.

命令示例

• 创建 vue3 新项目：

monia create vue3-demo

? Which framework do you want to create Vue
? Which vue version do you want to create Vue3
? Please input your project description description
? Please input your author name author
? Please input project version 1.0.0
? Which package manager do you want to use Yarn


✨  Creating project in /Users/xieyezi/Desktop/vue3-demo.

🗃  Initializing git repository....

📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 6.84s.

🎉  Successfully created project vue3-demo.
👉  Get started with the following commands:

$ cd vue3-demo
$ yarn start


                        _                  _ _ 
  _ __ ___   ___  _ __ (_) __ _        ___| (_)
 | '_ ` _ \ / _ \| '_ \| |/ _` |_____ / __| | |
 | | | | | | (_) | | | | | (_| |_____| (__| | |
 |_| |_| |_|\___/|_| |_|_|\__,_|      \___|_|_|
                                               

• 生成flutter getx 新页面：

monia init detail

✨  Generate page in /Users/xieyezi/Desktop/flutter_demo/lib/pages/detail.
⠋ Generating, it's will not be wait long...
generate detail lib success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/detail/detail_view.dart success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/detail/detail_controller.dart success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/detail/detail_binding.dart success.

🎉  Successfully generate page detail.

注意：当你想生成一个新的flutter 新页面时，命名尽量采用下划线命名方式（虽然你输入大驼峰或者小驼峰 monia也能正确处理，但是我们不建议你这样做）。

vscode 插件

对于flutter-getx-template，monia 还提供了vscode 插件: monia-vscode-extension

点击左下角的monia-generate 文字按钮，输入pageName，即可在pages目录下新建一个flutter getx page：

模版目录

flutter + getx

.
├── README.md
├── android
├── ios
├── lib
│   ├── common
│   ├── components
│   ├── config.dart
│   ├── env.dart
│   ├── global.dart
│   ├── main.dart
│   ├── pages
│   ├── router
│   ├── services
│   └── utils
├── pubspec.lock
├── pubspec.yaml
├── test
├── web
└── xsds.iml

react + vite + typescript

.
├── README.md
├── apiTemplate.ts
├── package-lock.json
├── package.json
├── pont-config.json
├── public
├── setupProxy.js
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── config
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── models
│   ├── pages
│   ├── react-app-env.d.ts
│   ├── router-menu-mapping
│   ├── routes
│   ├── serviceWorker.ts
│   ├── setupTests.ts
│   ├── style
│   └── utils
├── tsconfig.json
├── tsconfig.paths.json
├── tsconfig.prod.json
├── tslint.json
└── yarn.lock

vue3 + vite + typescript

.
├── README.md
├── commitlint.config.js
├── index.html
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── config
│   ├── directive
│   ├── hooks
│   ├── main.ts
│   ├── router
│   ├── store
│   ├── views
│   └── vue-shim.d.ts
├── tsconfig.json
├── vite.config.ts
├── yarn-error.log
└── yarn.lock