说明文档

zlycli: 一个帮助你快速搭建和开发前端 Vue 项目的 CLI

想不起来其他名字，以这个命名吧~

如何安装？

npm install zly-front-cli -g

创建Vue2项目

目前支持 Vue~

vue 项目模块已经帮你配置：

• 常用的目录结构（你可以在此基础上修改）
• vue-router
• vuex
• axios（网络请求 axios 的安装以及二次封装）
• element-ui

创建项目

zlycli createv2 your_project_name

自动拉取项目模板、安装项目依赖、打开浏览器 http://localhost:8080/、自动启动项目

创建Vue3+TS项目

目前支持 Vue~

vue 项目模块已经帮你配置：

• 常用的目录结构（你可以在此基础上修改）
• vue-router
• pinia
• axios（网络请求 axios 的安装以及二次封装）
• element-plus
• element-plus/icons-vue

创建项目

zlycli create your_project_name

自动拉取项目模板、安装项目依赖、打开浏览器 http://localhost:5173/、自动启动项目

创建Vue3+TS+Ruoyi项目

目前支持 Vue~

vue 项目模块已经帮你配置：

• 常用的目录结构（你可以在此基础上修改）
• vue-router
• pinia
• axios（网络请求 axios 的安装以及二次封装）
• element-plus
• element-plus/icons-vue

创建项目

zlycli createv3ruoyi your_project_name

自动拉取项目模板、安装项目依赖、打开浏览器 http://localhost:8003/、自动启动项目

创建React项目

目前支持 React~

React项目模块已经帮你配置：

• 常用的目录结构（你可以在此基础上修改）
• react-router-dom
• redux
• axios（网络请求 axios 的安装以及二次封装）
• @craco/craco
• craco-less
• styled-components
• classnames

创建项目

zlycli createreact your_project_name

自动拉取项目模板、安装项目依赖、打开浏览器 http://localhost:3000/、自动启动项目

项目开发

项目开发目前提供三个功能：

• 创建 Vue 组件
• 创建 Vue 页面，并配置路由
• 创建 Vuex 子模块

创建 Vue2 组件：

zlycli addcpn YourComponentName # 例如coderwhy add NavBar，默认会存放到src/components文件夹中
zlycli addcpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹

创建 Vue3 组件：

zlycli addcpn3 YourComponentName # 例如coderwhy add NavBar，默认会存放到src/components文件夹中
zlycli addcpn3 YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹

创建 Vue2 页面，并配置路由

zlycli addpage YourPageName # 例如coderwhy addpage Home，默认会放到src/views/home/Home.vue中，并且会创建src/router/home/home.js
zlycli addpage YourPageName -d src/views # 也可以指定文件夹，但需要手动集成路由

创建 Vue3 页面，并配置路由

zlycli addpage3 YourPageName # 例如coderwhy addpage Home，默认会放到src/views/home/Home.vue中，并且会创建src/views/home/home.js
zlycli addpage3 YourPageName -d src/views # 也可以指定文件夹，但需要手动集成路由