项目目录介绍

打开上篇文章中创建的vite-demo，观察项目目录：

public目录：一般用来存放静态资源，不会被vite所编译
src/asset：用来存放静态资源，如图片等
src/components：用来存放vue组件
src/App.vue：Vue全局入口文件
src/main.ts：ts的全局文件，可以用来引入全局css样式文件、全局api、全局配置
src/vite-env.d.ts:
```
/// <reference types="vite/client" />

declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
```
typescript的声明扩充文件，因为ts不能识别.vue结尾的文件，所以这个文件通过declare module给.vue文件做了一个文件的声明扩充。

src/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

像webpack或者rollup打包工具的entry文件都是js文件，而vite的入口文件是index.html文件，第11行通过tyoe module的形式作为入口，当页面使用script标签引入的js文件时，vite会进行拦截并且解析js文件。

package.json：依赖声明、项目运行命令
tsconfig.json：ts的配置文件
vite.config.ts:
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
```
是vite的配置文件，第6行使用plugin支持vue解析，后面会详细介绍。
vite基于esbuild做编译，打包基于rollup,后面详细介绍。

单文件组件SFC介绍

以App.vue为例：

<script setup lang="ts">
  // This starter template is using Vue 3 <script setup> SFCs
  // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
  import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>

vue文件件都由三种类型的顶层语法块所组成：

script标签：执行js文件，setup形式只能存在一个，非s etup形式可以存在多个
template标签：渲染页面结构，只能存在一个，存在多个会报错
style标签：页面样式，可以存在多个
vue插件介绍
使用vscode进行vue3开发时，需要使用一些插件方便开发：
Vue Language Feature
Typescripte Vue Plugin (volar)

ps:需要禁用vue2的vetur插件

npm run dev过程解析

使用npm run dev 启动项目：

可以看到vite启动项目速度非常快，当执行npm run dev 时，首先npm去package.json下的script对象读取命令：

所以实际上npm run dev执行的是vite命令，接着去node_modules目录下查看vite项目的package.json文件（只展示一部分）：

7-9行可以看到，执行vite命令实际上是使用软链接执行bin目录下的vite.js文件