vite的基本使用

 

目录

一、Vite简介

1.1 Vite组成

1.2 浏览器支持

二、vite的常用使用指令

1. 创建 vite 的项目

 2.梳理项目的结构

3. vite 项目的运行流程

3.1 在 App.vue 中编写模板结构

3.2 在 index.html 中预留 el 区域

3.3 在 main.js 中进行渲染


一、Vite简介

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

1.1 Vite组成

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

一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。总的来说,Vite希望提供开箱即用的配置,同时它的插件API和JavaScript API带来了高度的可扩展性。不过,相比Vue-cli配置来说,Vite构建的项目还是有很多的配置需要开发者自己进行处理。

1.2 浏览器支持

开发环境中:Vite需要在支持原生 ES 模块动态导入的浏览器中使用。生产环境中:默认支持的浏览器需要支持 通过脚本标签来引入原生 ES 模块 。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。

二、vite的常用使用指令

1. 创建 vite 的项目

按照顺序执行如下的令,vite vue 3.x 的工程化项目:

vite的基本使用_第1张图片

 2.梳理项目的结构

使vite 创建的项目结构如下:

vite的基本使用_第2张图片

其中:

node_modules 目录用来存放第三依赖包

public 是公共的静态资源

src 是项目的源代码目录程序所有码都此目下)

.gitignore Git 的忽略文件

index.html SPA 单页面应用程序中唯一HTML 页面

package.json 是项目的包管理配置文件

  src 这个项目源代码目之下了如的文件夹:

vite的基本使用_第3张图片

 其中:

assets 目录用来存放项目中所态资(cssfonts等)

components 目录用来存放项目所有义组件

App.vue 是项目的根组件

index.css 是项目的全局样式文件

main.js 是整个项目的打包入文件

3. vite 项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:main.js App.vue 渲染到 index.html 的指定区域中。 其中:

①  App.vue 用来编写待渲染的模板

②  index.html 中需要预留一el 区域

③  main.js App.vue 渲染到了 index.html 所预留的区域中

3.1 App.vue 中编写模板结构

App.vue 的默认内容,并书如下模板结构:vite的基本使用_第4张图片

3.2 index.html 中预留 el 区域

打开 index.html 页面,确认预留el 区域:vite的基本使用_第5张图片

3.3 main.js 中进行渲染

vue 3.x 标准用法App.vue 中的模板内容渲染到 index.html 页面el 区域中:

vite的基本使用_第6张图片

你可能感兴趣的:(Vue,vue.js,前端,VUE3,vite,前端框架)