Vite - Vite 最小项目

Vite 最小项目

1、项目初始化

1. 创建项目 my-project，安装 Vite

npm install vite --save-dev

2. 完善项目结构

   my-project/
   ├── node_modules/
   ├── package.json
   ├── package-lock.json
   ├── index.html
   └── src/
   └── main.js

3. package.json，配置项目

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

2、代码编写

1. index.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>

2. main.js

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

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

3、项目运行

1. 启动开发者服务器

npm run dev

2. 项目打包

npm run build