阅读 620
一个对入门Vue3帮助极大的开发工具

一个对入门Vue3帮助极大的开发工具

最近有段时间要写 Vue3 项目,通常来说,我都需要访问 Vite 官网,然后 yarn create <dir> 从零开始创建项目。一点点添加 Vue-Router@4VuexPinia 等插件,接着再配置 eslintprettier 等质量管理组件。最后如果有需要的话,还得写 Dockerfiledocker-compose.yml 等内容来应付项目打包和部署。

还好我过去有别的项目做参考,可以复制以前的配置来节约一点时间。可如果我以往没有Vue3的项目经验呢?

这些初始化操作其实都是重复的,所以我从上次 如何开发一个 Vue3-cli 的项目初始化程序并发布到 npm 中 开始,正经地开发了一个 Cli 工具,用来把这些事情交给程序做。

它就是 xmo-cli gitee.com/dXmo/xmo-cl…

前情提要

什么时候你能用得上 xmo-cli

  1. 👉 最近在学习 Vue3 且需要一(系列)开源项目帮助你真正入门。
  2. 👉 想为 Vue3 项目添加质量管理配置,但对此一无所知无从下手。
  3. 👉 想为 Vue3 项目添加 Docker 容器配置,但对此一无所知无从下手。
  4. 👉 期待使用一个中文的 Vue3-cli 工具。
  5. 👉 乐于为开源项目提供建议和 Debug ,并成为 Contributors (贡献者)的一员。

xmo-cli 介绍

xmo-cli 旨在做最好的Vue3入门工具,且只关注 Vue3 + Vite

功能介绍

  1. 支持创建最新的 vue3.2 项目模板。
  2. 项目模板包含 mini primary full ts-mini ts-primary ts-full 多个分支,从业务功能到质量管理到容器运维部署。
  3. Vue3 + Vite 项目提供添加 质量管理配置 的支持;
  4. Vue3 + Vite 项目提供添加 Docker容器配置 的支持;(开发中
  5. (通过镜像),下载热门开源项目。

为什么不用 vue-cli

  1. 英文。
  2. 选择困难症,选项内容复杂且对于初学者很多选项看不懂。
  3. 不是 vite
  4. xmo-cli 提供多分支模板,是更好的入门学习工具。
  5. 缺少一些非常值得一用的插件。
  6. 并未提供 Docker 配置的示例。
  7. 维护略有些过时。

项目地址

gitee地址

github地址

npm地址

安装教程

  1. npm install xmo-cli -g

使用示例

详情最好还是看官方 README.md 文档,实时更新。

📦 新建项目模板

xmo-cli init [dir]
复制代码

⚓下载热门项目

xmo-cli create <dir>
复制代码

135219056-1f48af10-4788-467e-a47b-954f5d99f426.png

135219230-f91d15a9-158f-4b75-b6a8-912444578151.png

⚙️添加项目管理配置

xmo-cli init -q
复制代码

image

一键添加Docker配置(包括开发配置,打包配置和Nginx部署配置)。开发中

# 在项目根目录
xmo-cli init -d
复制代码

分支

默认推荐分支为 ts/primary 。(如果你使用xmo-cli init [dir] -y(添加 -y 参数)的话,将默认初始化该分支)

mini - 最简

vue3 + vue-router + pinia + axios

难度系数 ★

知识面覆盖系数 ★★★

理解了该分支代码,在不涉及特定UI框架的情况下,我认为可以覆盖**90%**的开发需求。

primary - 通常

vue3 + vue-router + pinia + axios + mitt + husky + eslint + commitlint + commitizen

难度系数 ★☆

知识面覆盖系数 ★★★★

理解了该分支代码,在不涉及特定UI框架的情况下,我认为可以覆盖**99%**的开发需求和质量管理配置需求。

full - 完备

primary 的基础上,

添加 docker 配置,更完整的项目实践指南,利用 docker 的一键化项目部署。

难度系数 ★★★

知识面覆盖系数 ★★★★☆

理解了该分支代码,在不涉及特定UI框架的情况下,我认为可以覆盖**99.9%**的开发需求和质量管理配置、部署需求。

Typescript分支

将所有原项目改造成 typescript 版本。例如 mini => ts-mini

初始化项目模板示例

模板不关注细节,只期望用最简单的方案之一来实现示例业务

image

Mini

  1. setup 使用示例
  2. 页面自适应示例(使用 display: grid
  3. 侧边栏自适应示例 image
  4. vue-router 使用示例
  5. pinia 使用示例
  6. axios 使用示例
  7. prettier 配置示例
  8. stylev-bind 示例

Primary

  1. Mitt 示例
  2. eslint + commitlint + commitizen + husky + prettier 项目质量管理示例
  3. 导航栏跳转示例

Typescript

  1. Vue3 配置 typescript 示例
  2. api + interface 接口的简单使用示例

后记

目前这个包和模板只用了一个星期来进行开发,内容可能还有些简陋,也许会有Bug或功能缺失。也正是因此,急需你使用项目并提供反馈。

当然,最主要的功能都已经可以使用了。

如果你是上文中提到的人群,不妨试一试。

文章分类
前端
文章标签