Vite - Vite 最小项目

我命由我123452026-03-31 10:39

Vite 最小项目

1、项目初始化

创建项目 my-project，安装 Vite

shell 复制代码

npm install vite --save-dev

完善项目结构

my-project/
├── node_modules/
├── package.json
├── package-lock.json
├── index.html
└── src/
└── main.js
package.json，配置项目

json 复制代码

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

2、代码编写

index.html

html 复制代码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>index</title>
    </head>

    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>

main.js

js 复制代码

console.log("项目启动");

const app = document.querySelector("#app");
if (app) {
    app.innerHTML = "<h3>Hello Vite</h3>";
}

3、项目运行

启动开发者服务器

shell 复制代码

npm run dev

项目打包

shell 复制代码

npm run build