一、vite 入门

1、项目搭建

• 使用 vue create

npm init vue@latest # vue3官网✨提供的
# 或者
npm create vue@3 # vue create提供的

• 使用 vite

npm create vite@latest # vite官网提供的

2、构建流程

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vite-demo
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

3、项目结构

vite_project
├─ .vscode
│  ├─ extensions.json  # 建议安装的vscode插件
├─ public
│  └─ favicon.ico
├─ src
│  ├─ App.vue🤔（根组件）
│  └─ main.ts🚩（入口文件）
├─ index.html
├─ env.d.ts # 类型声明（默认进行了大量的文件声明）
├─ tsconfig.json # ts 配置文件（路径别名、类型检查的文件路径等）
├─ vite.config.ts
└─ README.md

• env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

二、vite.config.json

略