今天搭建一个模板框架叫 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