vite教程
2025年12月6日大约 2 分钟约 450 字
初始化vite项目
# --- 创建npm项目 ---
mkdir demo-vite ; cd demo-vite
pnpm init # 初始化一个包
# --- 创建vite项目 ---
pnpm add -D vite@v8.0.0-beta.4
vim package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite previeww"
},
# vite是浏览器优先,vite的入口文件是 index.html
touch index.html
<html>
<body>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
touch src/main.ts
console.log("hello world");
# 搭建完成,启动vite项目
pnpm build
pnpm dev支持vue文件
vite本身只是一个微内核,vite用插件的模式来扩展功能(vite插件的本质是一个函数)。
- 安装vue:
pnpm add vue - 给vite的入口文件index.html添加标签供vue挂载:
<div id="app"><div> - 写一个vue的示例
src/App.vue
<template></template>
<script setup></script>
<style scoped></style>src/index.js
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");- 可以先启动试试(会报错),因为vite现在还不认识vue文件,需要安装vite插件
- 安装vite插件
pnpm add -D @vitejs/plugin-vue
vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});安装Typescript类型安全检查工具
vite原生支持Typescript文件和语言的编译,它只是在编译时仅转换文件。
所以需要在研发时支持Typescript的类型检查工具。
- ts类型检查工具:
pnpm add vue-tsc -D vue-tsc可以检查.ts文件,也可以检查.vue文件中的ts代码vue-tsc需要搭配tsconfig.json配置文件,配置文件需要正确的完整配置规则,否则运行报错- vue官方有推荐的配置,需要安装:
pnpm add -D typescript @types/node @vue/tsconfig - 使用
pnpm create vite命令创建一个vite模板项目,可以查看标准的vue-tsc配置规则