CLI工具–快速搭建VUE3模板

2025/07/04

今天搭建一个模板框架叫 v3vjs-cli (Vue3 + Vite + JavaScript + Vue Router + Pinia + Axios + ESlint + Sass),已上传到npmjs,以后有新项目直接通过命令搭建即可,懒人必备。

一、实现功能

封装了项目中常用的功能:

  • 路由 Vue Router
  • 全局状态管理 Pinia
  • 请求 Axios
  • 语法检查 ESlint
  • 代码格式化 Prettier
  • CSS预处理器 Sass

二、项目结构

v3vjs-cli/
├── bin/
│   └── index.js      # CLI入口
├── package.json  
└── templates/         # 项目模板
│   └── src/         
│         ├── api/
│         │   └── index.js       # api统一导出
│         │   └── user.js        # api示例
│         ├── assets/
│         │   └── style.scss     # 全局样式
│         ├── router/
│         │   └── index.js       # 路由懒加载
│         ├── store/
│         │   └── index.js       # 全局状态管理
│         ├── utils/
│         │   └── request.js     # axios基础封装
│         ├── views/              
│         │   └── HomeView.vue   # 首页
│         ├── APP.vue     # 添加<router-view>
│         ├── main.js     # 挂载模块,引入全局样式
│   └── .eslintrc.json 
│   └── .prettierrc
│   └── vite.config.js    # 别名设置

三、使用

1.全局安装CLI工具

npm install -g v3vjs-cli

创建项目:

v3vjs-cli
// 或
v3vjs-cli my-project-name

2.使用npx直接运行 (无需安装)

npx v3vjs-cli my-project-name

然后根据提示输入项目名称,支持npm、yarn、pnpm方式安装项目,默认使用pnpm

3.启动项目

安装完成之后直接运行对应包管理器的命令即可:

pnpm dev

4.项目目录

目录中除了模板已有的内容,还会自动生成一些其他的,可以根据需要选择去留。

四、修改temples模板

1.本地使用

CLI源码:https://github.com/biancaplus/v3vjs-cli

可以把项目拉到自己本地玩玩,如果前面使用了 npm install -g v3vjs-cli 全局安装,那就先卸载 npm uninstall -g v3vjs-cli ,或者修改 package.json 中的”name”字段。没有全局安装则不影响。

安装依赖并把它本地注册为命令行工具:

npm install
npm link   // 在全局创建一个符号链接,指向本地的CLI项目目录

// 然后就可以在本地任何地方用命令行执行CLI工具创建项目了
v3vjs-cli my-app

2.修改模板内容

通过修改 temples 里封装的方法逻辑,改成自己想要的模板。如果需要新增或删除某些插件,可以通过bin/index.js进行配置。

如果只修改了 temples 中的内容,则无需重新 npm link 。如果修改了 CLI 的源码(尤其是 bin/index.js 和 package.json)之后,都建议重新运行 npm link

3.发布到 npm

如果你想把自己的 CLI 工具发布到npm,那么先注册一个npm账户,然后在终端登录npm后进行发布:

// 登录
npm login

// 发布
npm publish

发布过的项目再进行提交,都需要先修改版本号再发布,可以自己修改packages.json里的版本号,也可以通过命令修改

// 命令快速修改版本号
npm version patch   // 补丁修改(修 Bug) +0.0.1
npm version minor   // 新增功能但不破坏兼容性  +0.1.0
npm version major   // 破坏兼容性  +1.0.0
// 再发布
npm publish

发布之后想测试自己在npm上的工具的效果,需要先取消 link 的本地链接,取消之后即可全局安装使用。

npm unlink -g
// 或 知道link的包名
npm unlink -g v3vjs-cli