认识Vite
什么是vite呢?
官方的定位:下一代前端开发与构建工具;
如何定义下一代开发和构建工具呢?
我们知道在实际开发中,我们编写的代码往往是不能被浏览器直接识别的,比如ES6、TypeScript、Vue文件等 等; p所以我们必须通过构建工具来对代码进行转换、编译,类似的工具有webpack、rollup、parcel; p但是随着项目越来越大,需要处理的JavaScript呈指数级增长,模块越来越多; p构建工具需要很长的时间才能开启服务器,HMR也需要几秒钟才能在浏览器反应出来;
所以也有这样的说法:天下苦webpack久矣;
Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。
vite的构造
它主要由两部分组成:
一个开发服务器,它基于原生ES模块提供了丰富的内建功能,HMR的速度非常快速;
一套构建指令,它使用rollup打开我们的代码,并且它是预配置的,可以输出生成环境的优化过的静态资源;
是否学习
目前是否要大力学习vite?vite的未来是怎么样的?
我个人非常看好vite的未来,也希望它可以有更好的发展;
但是,目前vite虽然已经更新到2.0,依然并不算非常的稳定,并且比较少大型项目(或框架)使用vite来进行 构建;
vite的整个社区插件等支持也还不够完善;
包括vue脚手架本身,目前也还没有打算迁移到vite,而依然使用webpack(虽然后期一定是有这个打算的);
所以vite看起来非常的火热,在面试也可能会问到,但是实际项目中应用的还比较少;
浏览器原生支持模块化的缺点
文件目录
main.js
import {sum} from './js/sum.js' console.log("this is main.js"); console.log(sum(100,200));
sum.js
export function sum(num1,num2) { return num1+num2 }
index.html
<!DOCTYPE html> <html lang="zh"> <body> <script src="./src/main.js" type="module" ></script> </body> </html>
输出效果
总结
使用原生的浏览器加载模块化,需要在import中引入后缀,在script标签中加入类型type

命令行
npm init
输出结果
命令行:安装lodash-es
npm install lodash-es
输出
main.js
原生如何引用node module中的模块
反正就是要写全,这里模块比较少,还好写,可以一旦多了起来,那就不得了了.
import _ from '../node_modules/lodash-es/lodash.default.js' import {sum} from './js/sum.js' console.log("this is main.js"); console.log(sum(100,200)); console.log(_.join([1,2,3],'+'));
输出
缺点
因为这个lodash-es又依赖其他js文件,所以会有很多请求,所以请求次数又六百多此,同时请求时间太长,严重消耗了浏览器的性能.
vite的安装
Node版本是大于12版本的,在命令行输入:
npm install vite –g # 全局安装 npm install vite –D # 局部安装
输出
vite的使用
命令行输入
npx vite
输出
main.js
import _ from 'lodash-es' import {sum} from './js/sum' console.log("this is main.js"); console.log(sum(100,200)); console.log(_.join([1,2,3],'+'));
输出
vite的好处
发现我们修改import名称之后,这个请求次数变少了,当然请求耗时也是变短了.
引入CSS文件
引入CSS文件:style.css
body { background-color: pink; }
输出
引入less文件
src
>css
>title.less
@fontSize:100px; @fontColor:blueviolet; .title { font-size: @fontSize; color: @fontColor; }
输出
输出
没有less处理器
安装less:命令行
npm install less -D
运行
npx vite
之后输出
引入postcss
安装postcss和postcss-preset-env:命令行
npm install postcss -D npm install postcss-preset-env -D
编写配置文件
postcss.config.js
module.exports = { plugins:[ require('postcss-preset-env') ] }
输出
可以自动帮我们添加浏览器内核前缀
引入TypeScript
src
>ts
>mul.ts
export default function(num1:number,num2:number):number{ return num1*num2 }
src
>main.js
引入关键代码
import _ from 'lodash-es' import {sum} from './js/sum' import mul from './ts/mul' import './css/style.css' import './css/title.less' console.log("this is main.js"); console.log(sum(100,200)); console.log(_.join([1,2,3],'+')); console.log(mul(200,300)); const titleEl = document.createElement('div') titleEl.className = 'title' titleEl.innerHTML = 'Hello Vite' document.body.appendChild(titleEl)
输出
引入Vue
安装vue:命令行输入
npm install vue@next -D
编写vue文件:src>vue>App.vue
<template> <div> <h2>{{message}}</h2> </div> </template> <script> export default { data(){ return { message:'this is App.vue' } } } </script> <style scoped> .h2{ color: hotpink; } </style>
引入Vue文件:main.js
关键代码
import _ from 'lodash-es' import {createApp} from 'vue' import {sum} from './js/sum' import mul from './ts/mul' import App from './vue/App.vue' import './css/style.css' import './css/title.less' console.log("this is main.js"); console.log(sum(100,200)); console.log(_.join([1,2,3],'+')); console.log(mul(200,300)); const titleEl = document.createElement('div') titleEl.className = 'title' titleEl.innerHTML = 'Hello Vite' document.body.appendChild(titleEl) createApp(App).mount('#app')
主页:index.html
关键代码
<!DOCTYPE html> <html lang="zh"> <body> <div id="app"></div> <script src="./src/main.js" type="module" ></script> </body> </html>
运行服务器:命令行
npx vite
输出报错
上午7:20:56 [vite] #内部服务器错误: #无法分析导入分析的源 #因为内容包含无效的JS语法。 Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. #安装 @vitejs/plugin-vue 插件来处理 .vue 的文件 Install @vitejs/plugin-vue to handle .vue files. Plugin: vite:import-analysis File: F:/00、coderwhy_Vue3+TypeScript/课堂资料day01_27/课堂/code/02_Learn_Webpack/10_vite的基本使用_2/src/vue/App.vue
安装@vitejs/plugin-vue插件,并再次运行,结果不行
npm install @vitejs/plugin-vue -D npx vite
配置插件:vite.config.js,然后再次运行
const vue = require('@vitejs/plugin-vue') module.exports = { plugins:[ vue() ] }
输出继续报错
原因
缺少插件Cannot find module '@vue/compiler-sfc'
PS F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\10_vite的基本使用_2> npx vite failed to load config from 'F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\10_vite的基本使用_2\vite.config.js' error when starting dev server: Error: Cannot find module '@vue/compiler-sfc'
1.安装 '@vue/compiler-sfc'插件:命令行输入
2.再次运行
npx vite
npm install @vue/compiler-sfc -D
成功输出
vite编译快的原因
这里也就解释vite编译快的原因,有个预编译,可以重复使用,知道改变的时候,才会重新编译这个预编译的东西
vite项目的打包
打包项目到dist文件夹
npx vite build
输出
预览打包之后的vite项目
预览打包之后的vite项目
npx vite preview
创建脚本
package.json
关键代码
{ "name": "learn_vite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "serve":"vite", "build":"vite build", "preview":"vite preview" }, "author": "", "license": "ISC", "dependencies": { "lodash-es": "^4.17.21" }, "devDependencies": { "@vitejs/plugin-vue": "^1.6.0", "@vue/compiler-sfc": "^3.2.6", "less": "^4.1.1", "postcss-preset-env": "^6.7.0", "vite": "^2.5.0", "vue": "^3.2.6" } }
vite脚手架工具
安装
全局安装
npm install @vitejs/create-app -g
使用
使用脚手架创建工程
create-app [项目名称]
PS F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack> create-app 11_vite_cli_demo_2 @vitejs/create-app is deprecated, use npm init vite instead √ Select a framework: » vue √ Select a variant: » vue-ts Scaffolding project in F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\11_vite_cli_demo_2... Done. Now run: cd 11_vite_cli_demo_2 npm install npm run dev
输出
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验