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配置规则