Vite+Vue3+Vant快速构建项目

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

一、安装 tive-cli 命令行工具

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

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

npm i -g tive-cli

二、生成项目

tive create vue3-demo

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

E:\dev>tive create vue3-demo
? 请选择要创建的脚手架或Demo (Use arrow keys)
> vue2.0+VantUI移动端Demo
  vue3.0+vite2+VantUI移动端Demo

提示： 该脚手架内置了Vue2.0和Vue3.0两个版本所对应的 Vue全家桶 模板可供选择。

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

E:\dev>tive create vue3-demo
? 请选择要创建的脚手架或Demo vue3.0+vite2+VantUI移动端Demo
{ tel: 'tive6/tive-vue3-vite-demo' }
√ tive-vue3-vite-demo 下载成功

Done. Now run:

   cd vue3-demo
   npm install
   npm start

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

cd vue3-demo

npm install

npm start

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

三、项目体验

1. 首页展示：

2. Demo演示：地址，进入后可以进行交互体检。

《Vue3学习与实战》系列

• Vue3学习与实战 · 全局挂载使用Axios
• Vue3学习与实战 · 配置使用vue-router路由
• Vue3学习与实战 · Vuex状态管理
• Vite+Vue3+Vant快速构建项目（本文）

欢迎访问：天问博客

更多文章请关注《万象专栏》