使用Vite快速构建前端Vue3项目,感受更轻更快的开发体验

简介: vite是一种全新的前端构建工具,由于vite是一个基于原生ESM的开发服务器,多以它能给用户带来更轻更快的开发体验。本篇文章带大家使用vite构建VUE项目,用了之后就知道有多香~

前言

vite是一种全新的前端构建工具,由于vite是一个基于原生ESM的开发服务器,多以它能给用户带来更轻更快的开发体验。本篇文章带大家使用vite构建VUE项目,用了之后就知道有多香~

创建vue项目

打开cmd进入想创建项目的目录
输入指令

npm init vite hello-vue3 -- --template vue

在这里插入图片描述
然后按上面提示输入指令
在这里插入图片描述

在浏览器中打开这个地址
在这里插入图片描述
出现这个页面,就说明创建了一个vue3+vite的项目,怎么样是不是比使用脚手架cli快不少

创建其它项目

上面我们举例说明了使用vite创建vue3项目,我们还可以使用vite创建其它框架的项目,使用的指令就不一样
输入指令:

npm create vite@latest

然后就可以看到其它可供选择的选项
在这里插入图片描述
当然可以选择vue+ts进行构建

vite和vue-cli4的区别

vue-cli基于webpack构建,并且有一些默认的预设配置,在服务启动之前会把所有代码打包成bundle,然后启动服务,提供给浏览器使用,所以vue-cli4在开发一些大型项目的时候,越到后面服务启动的越慢。
vite为了解决服务器动慢的问题,使用的ESbuild预编译依赖,比JS编写的打包器构建依赖要快很多倍。为了避免每次启动项目的时候要重建整个包,Vite把预构建的回来缓存到了node_modules/.vite。

相关文章
|
JavaScript 前端开发 编译器
Vue 3 深度解析:现代前端开发的革新引擎
Vue 3 深度解析:现代前端开发的革新引擎
429 6
|
10月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
617 106
|
10月前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架的革新
Vue 3:下一代前端框架的革新
551 103
|
10月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
552 104
|
10月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
396 102
|
10月前
|
JavaScript 前端开发 算法
Vue 3:下一代前端框架的革命性进化
Vue 3:下一代前端框架的革命性进化
574 103
|
10月前
|
JavaScript 前端开发 编译器
Vue 3:现代前端开发的新范式
Vue 3:现代前端开发的新范式
412 104
|
10月前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
419 104
|
11月前
|
JavaScript 前端开发 API
Vue 3:现代前端开发的革新之作
Vue 3:现代前端开发的革新之作
|
11月前
|
JavaScript 前端开发 安全
Vue 3:现代前端开发的全新体验
Vue 3:现代前端开发的全新体验

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1250
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    567
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    430
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    507