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

Tree_Lock
1,295 阅读4分钟

最近有段时间要写 Vue3 项目，通常来说，我都需要访问 Vite 官网，然后 yarn create <dir> 从零开始创建项目。一点点添加 Vue-Router@4，Vuex 或 Pinia 等插件，接着再配置 eslint ，prettier 等质量管理组件。最后如果有需要的话，还得写 Dockerfile 和 docker-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. style 的 v-bind 示例

Primary

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

Typescript

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

后记

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

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

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

avatar
文章
阅读
粉丝