第1步. 對項目進行初始化操作：
npm init -y
由此生成package.json文件。
第2步. 安裝Vite
npm install vite -D
安裝成功后會在package.json文件中添加以下內(nèi)容：
"devDependencies": {
"vite": "^3.1.6"
}
第3步. 安裝Vue
npm install vue
安裝成功后會在package.json文件中添加以下內(nèi)容：
"dependencies": {
"vue": "^3.2.40"
}
第4步. 安裝插件：
npm install @vitejs/plugin-vue -D
第5步. 在項目根目錄中創(chuàng)建配置文件vite.config.js，內(nèi)容如下：
import { defineConfig} from "vite";
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue()]
})
第6步. 在項目根目錄中創(chuàng)建入口文件index.html，內(nèi)容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vite + Vue</title>
</head>
<body>
<script type="module" src="src/main.js"></script>
</body>
</html>
第7步. 在src目錄中新建main.js文件：
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app')
第8步. 在src目錄中創(chuàng)建單組件文件App.vue，內(nèi)容如下：
<template>
<h1>Hello Vite + Vue!</h1>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
第9步. package.json文件中添加以下內(nèi)容：
"scripts": {
"dev": "vite"
}
第10步. 運行項目：
npm run dev
