随着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
不出意外项目就成功启动了。
三、项目体验
- 首页展示:
- Demo演示:地址,进入后可以进行交互体检。
《Vue3学习与实战》系列
欢迎访问:天问博客