随着Vue3 和 Vite 版本的不断更新完善，开发体验有了质的飞跃。因此，越来越多的大厂也逐步拥抱 Vue3。 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目，但是作为Vue全家桶的 vue-router、vuex、axios等成员，需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli 脚手架模板工具，只需短短几个命令便能快速生成配置健全的Vue3全家桶项目，并且集成了VantUI，内置了rem移动端适配，真正做到了开箱即用。

#一、vue3全家桶模板介绍

#1.版本依赖

#2.全家桶内置集成

1. vue-router路由，配置了路由懒加载，全局路由守卫，组合式API中路由跳转，参数获取。
2. vuex状态管理，配置命名空间（namespaced）的业务模块（modules），vuex actions异步状态流管理。
3. axios实例全局引用。
4. vant移动端组件库。
5. lib-flexible+rem移动端适配，默认为375px设计稿的适配，若是750px的设计稿可调整remUnit的值，轻松适配。
6. sass预处理器。
7. vue.config.js本地跨域处理，更改对应的url和path即可使用。
8. nodemon动态监听vue.config.js，有更改自动重启服务，执行npm run dev时生效。
9. Composition API（<script setup>）搭配ref和reactive数据绑定、computed计算属性、watch监听、props组件传参等等常用API的使用都有完整事例，以供参考。
10. 配置了 tive-cli 自动化执行shell脚本功能。提示： tive-cli 工具需要使用 npm i -g tive-cli 全局安装。
11. 自动化打包和zip压缩。
12. 提供了 WebAssembly（Wasm）使用案例，以及对应的交互展示页面。

#二、安装tive-cli 命令行工具

前提：node和npm已经安装可用。

• 像使用vue-cli脚手架工具一样，第一步全局安装 tive-cli 命令行脚手架工具。

#三、生成项目

执行次命令后，会出现命令行交互式选择，可使用上（↑）下（↓）箭头进行选择，如下：

提示： 该脚手架内置了Vue2.0和Vue3.0两个版本所对应的 Vue全家桶 模板，可根据项目需要自行选择。

回车（enter）确认后，会输出：

接下来就可以按照提示的命令进行操作：

不出意外项目就成功启动了。

#四、项目体验

1. 项目展示：
2. Demo演示：地址，进入后可以进行交互体验。
3. 附带上vue2.0+VantUI移动端模板演示Demo地址：tive-vue2-mobile-demo

#五、注意事项

• px2rem不能转HTML中的内联样式，所以样式请写在css单独文件中或组件的style区域中，详细说明请查看：Vue项目配置rem移动端适配

---

#《Vue3学习与实战》系列

• Vue3学习与实战 · 组件通信
• Vue3学习与实战 · 全局挂载使用Axios
• Vue3学习与实战 · 配置使用vue-router路由
• Vue3学习与实战 · Vuex状态管理
• vue3 + vite实现异步组件和路由懒加载
• Vite+Vue3+Vant快速构建项目（本文）

---

欢迎访问：天问博客