深入浅出 Vite 项目教程

深入浅出 Vite 项目教程

juejin-book-vite《深入浅出 Vite》掘金小册代码示例仓库项目地址:https://gitcode.com/gh_mirrors/ju/juejin-book-vite

1. 项目的目录结构及介绍

juejin-book-vite/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.ts
│   └── vite-env.d.ts
├── .gitignore
├── index.html
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.ts

目录结构说明

• public/: 存放公共资源文件，如 index.html。
• src/: 项目的主要源代码目录。
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放 Vue 组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
  • vite-env.d.ts: 类型声明文件，用于 TypeScript 类型检查。
• .gitignore: Git 忽略文件配置。
• index.html: 项目的主 HTML 文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 中。以下是 main.ts 的基本结构：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

功能说明

• 导入 createApp 函数和 App 组件。
• 使用 createApp 函数创建一个 Vue 应用实例。
• 将应用实例挂载到 DOM 中的 #app 元素上。

3. 项目的配置文件介绍

vite.config.ts

vite.config.ts 是 Vite 的配置文件，用于配置项目的构建和开发服务器等。以下是 vite.config.ts 的基本结构：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
})

配置说明

• plugins: 配置 Vite 插件，这里使用了 @vitejs/plugin-vue 插件来支持 Vue 3。
• server: 配置开发服务器，设置端口为 3000，并自动打开浏览器。

通过以上配置，可以实现项目的快速开发和构建。

juejin-book-vite《深入浅出 Vite》掘金小册代码示例仓库项目地址:https://gitcode.com/gh_mirrors/ju/juejin-book-vite