Vite+Vue3+Vant快速构建项目

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vite+Vue3+Vant快速构建项目相关的知识,希望对你有一定的参考价值。

参考技术A

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

执行次命令后,会出现命令行交互式选择,可使用上( ↑ )下( ↓ )箭头进行选择,如下:

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

回车( enter )确认后,会输出:

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

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

欢迎访问: 天问博客

使用Vite快速构建前端React项目

一、Vite简介

Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite3,Vite全新的插件架构、丝滑的开发体验,可以和Vue3完美结合。

相比Webpack和Gulp等构建工具,Vite有如下一些优势:

  • Vite主要对应的应用场景是开发模式,跳过打包按需加载,因此更新的速度非常快;
  • 在大型项目上可以有效提高本地开发编译打包的速度,解决“改一行代码等半天”的问题;
  • 浏览器解析 imports,利用了 type="module"功能,然后拦截浏览器发出的 ES imports 请求并做相应处理;
  • 闪电般的冷启动速度;
  • 即时热模块更换(热更新);
  • 真正的按需编译;

总的来说,Vite希望提供开箱即用的配置,同时它的插件API和JavaScript API带来了高度的可拓展性。不过,相比Vue-cli配置来说,Vite构建的项目还是有很多的配置需要开发者自己进行处理。

Vite构建工具由两部分组成:

  • 开发服务器:基于原生 ES 模块提供了丰富的内建功能,如模块热更新(HMR)。
  • 构建指令:使用 Rollup 打包代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。

同时,在浏览器支持方面,Vite也区分了开发环境和生产环境:

以上是关于Vite+Vue3+Vant快速构建项目的主要内容,如果未能解决你的问题,请参考以下文章

使用vite构建Vue3组件库,发布npm包

基于最新 Vite+Vue3+VantUI移动端应用项目搭建

vue3+vite+vant搭建项目

在 vue3 vite 项目中构建 vite 时出错

vue3.0入门:vite构建vue项目

vue3.0入门:vite构建vue项目