# 一、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

更新于 : 7/8/2024, 10:21:14 AM