之前试过从0搭建一个基于webpack的Vue我的项目，当初再尝试下从0搭建一个基于vite的Vue我的项目，目标在于相熟Vite的流程，不然咱们在应用webpack或者vite的时候，对整个过程都是不清不楚的。

初始化

创立文件夹，并用vscode关上

npm init -y

装置依赖

npm i vite --savenpm i vue@next --save // 目前vue默认装置版本还是2 所以咱们在装置的时候须要指定版本npm i @vitejs/plugin-vue --save--devnpm install vuex@next --savenpm install vue-router@4.0

创立必要的文件夹以及文件

src/App.vuesrc/index.htmlsrc/main.tsvite.config.jssrc/router/index.tssrc/shims-vue.d.ts

index.html

参考官网，index.html须要放到根目录;如果不放在根目录也能够，须要在vite.config.ts中配置root即可。

<script type="module" src="./src/main.ts"></script>

main.ts

import { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App);app.use(router);app.mount('#app');

vite.config.ts

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';export default defineConfig({    plugins: [vue()],})

package.json

增加执行命令，启动我的项目

 "scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "serve": "vite" },