随着Vue3
和 Vite
版本的不断更新完善,开发体验有了质的飞跃。因此,越来越多的大厂也逐步拥抱 Vue3
。
利用Vite
脚手架工具可以很轻松生成以 Vue3
为模板的项目,但是作为Vue
全家桶的 vue-router
、vuex
、axios
等成员,需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli
脚手架模板工具,只需短短几个命令便能快速生成配置健全的Vue3全家桶
项目,并且集成了VantUI
,内置了rem
移动端适配,真正做到了开箱即用
。
一、vue3全家桶模板介绍
1.版本依赖
1 | { |
2.全家桶内置集成
vue-router
路由,配置了路由懒加载
,全局路由守卫
,组合式API中路由跳转,参数获取。vuex
状态管理,配置命名空间(namespaced
)的业务模块(modules
),vuex actions
异步状态流管理。axios
实例全局引用。vant
移动端组件库。lib-flexible
+rem
移动端适配,默认为375px
设计稿的适配,若是750px
的设计稿可调整remUnit
的值,轻松适配。sass
预处理器。vue.config.js
本地跨域处理,更改对应的url
和path
即可使用。nodemon
动态监听vue.config.js
,有更改自动重启服务,执行npm run dev
时生效。Composition API
(<script setup>
)搭配ref
和reactive
数据绑定、computed
计算属性、watch
监听、props
组件传参等等常用API的使用都有完整事例,以供参考。- 配置了
tive-cli
自动化执行shell脚本功能。提示:tive-cli
工具需要使用npm i -g tive-cli
全局安装。 - 自动化打包和zip压缩。
- 提供了
WebAssembly
(Wasm
)使用案例,以及对应的交互展示页面。
二、安装 tive-cli
命令行工具
前提:
node
和npm
已经安装可用。
- 像使用
vue-cli
脚手架工具一样,第一步全局安装tive-cli
命令行脚手架工具。
1 | npm i -g tive-cli |
三、生成项目
1 | tive create vue3-demo |
执行次命令后,会出现命令行交互式选择,可使用上(↑
)下(↓
)箭头进行选择,如下:
1 | E:\dev>tive create vue3-demo |
提示: 该脚手架内置了Vue2.0
和Vue3.0
两个版本所对应的 Vue全家桶 模板,可根据项目需要自行选择。
回车(enter
)确认后,会输出:
1 | E:\dev>tive create vue3-demo |
接下来就可以按照提示的命令进行操作:
1 | cd vue3-demo |
不出意外项目就成功启动了。
四、项目体验
- 项目展示:
- Demo演示:地址,进入后可以进行交互体验。
- 附带上
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快速构建项目(本文)
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-12-08
最后更新: 2022-12-07
本文标题: Vite+Vue3+Vant快速构建项目
本文链接: https://www.tiven.cn/p/de241e23/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-12-08
最后更新: 2022-12-07
本文标题: Vite+Vue3+Vant快速构建项目
本文链接: https://www.tiven.cn/p/de241e23/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!