Vue3 + Vite 实战详解

Vue3 是下一代 Vue.js 框架，它带来了 many new features，如 Composition API 和全局 API 的改进，对 TypeScript 的更好支持等。Vite 是新一代的前端构建工具，由尤雨溪在 Vue 3 中提到。它可以快速启动并监听文件更改，让开发者可以更容易地编写前端应用。

一、Vue3 与 Vite3

Vue3 在底层进行了大量重构，通过使用 Proxy 代理实现响应式系统来提高性能，通过优化 Virtual DOM 来加快渲染速度。Vite 介绍它自己是一种“像雪一样飞快”的构建工具。它在开发环境中采用原生 ES 模块动态导入，并通过 Rollup 进行打包。

// Vue3 示例代码
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
    
// Vite 示例代码
import { createServer } from 'vite'
import { resolve } from 'path'

createServer({
  root: resolve(__dirname, 'dist'),
  port: 3000
}).listen()

Vue3 和 Vite3 可以很好地搭配用于开发和构建前端应用程序，Vue3 提供了强大的组件化和响应式机制，Vite3 提供了更快速的开发、构建和热更新的能力。

二、Vue3 + Vite3 + TypeScript

TypeScript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型检查和其他高级功能。Vue3 核心团队提供了对 TypeScript 的完全支持。对于使用 TypeScript 的开发者，Vue3 提供了完整的类型声明文件，并支持使用类组件风格的编码方式。

// 引用 TypeScript 文件
import { defineComponent } from 'vue'

// TypeScript 类型定义
interface User {
  name: string,
  age: number
}

// 使用 TypeScript 类型
export default defineComponent({
  setup() {
    const user: User = {
      name: 'John Doe',
      age: 30
    }

    return {
      user
    }
  }
})

TypeScript 可以使团队更容易地维护和重构代码，它可以提供更详细的类型检查并使代码更加模块化。

三、Vue3 + Vite3 配置

Vite 的配置文件名为 vite.config.js，可以在其中配置打包输出目录、模块解析等。

// vite.config.js 示例代码
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'esbuild'
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

这里配置了 Vue3 的插件，并设置了打包输出目录、静态资源目录、sourcemap、压缩方式和开发服务器的代理等。

四、Vue3 + Vite3 打包

Vite 在开发环境中采用原生 ES 模块动态导入，并通过 Rollup 进行打包。在生产环境中，Vite 可以生成一个静态资源目录，并使用 Rollup 进行打包。通过动态导入和异步加载，Vite 可以在不同的路由之间进行代码分割，从而提高了加载速度。

// Vue3 + Vite3 打包示例代码
vite build

打包命令将会在项目根目录中生成 dist 目录，其中包含了静态资源和编译后的代码。

五、Vue3 + Vite3 Base

在 Vue3 中，Base 类型可以实现 mixin 的功能，可以让不同的组件或模块使用相同的代码。使用 Base 时，我们只需要定义一个基础类，然后将它与组件或模块混合。

// Vue3 + Vite3 Base 示例代码
import { defineComponent } from 'vue'

class UserMixin {
  name = 'John Doe'
  age = 30
}

export default defineComponent({
  mixins: [UserMixin],
  setup() {
    return {}
  }
})

这里定义了一个 UserMixin 类，并实现了 name 和 age 属性。通过将它与组件或模块进行混合，可以让它们共享这些属性。

六、Vue3 + Vite3 动态路由

Vue3 支持动态路由，可以在路由路径中传递参数。Vite 可以实时编译和热重载这些路由组件，使开发更容易。使用 Vue Router，可以轻松实现动态路由。

// Vue3 + Vite3 动态路由示例代码
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这里定义了三个路由：Home、About 和 User。在 User 路径中可以通过 :id 传递参数。

七、Vue3 + Vite3 Pinia

Pinia 是基于 Vue 3 的轻量级状态管理库，可以更好地使用 Typescript 和 Composition API。

// Vue3 + Vite3 Pinia 示例代码
import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

这里定义了一个名为 counter 的 store，并在 state 中定义了一个名为 count 的状态和一个名为 increment 的 action。使用 Pinia 可以让我们更好地使用 Typescript 和 Composition API。

八、Vite 创建 Vue3 项目

Vite 提供了一个命令行实用程序，可以创建基于 Vue3 的新项目。在创建新项目时，可以选择使用预设模板或手动配置。

// Vite 创建 Vue3 项目示例代码
npm init vite-app my-app
cd my-app
npm install
npm run dev

这里以 create-vite-app 工具为例，在项目根目录中执行 create-vite-app my-app 命令，创建一个名为 my-app 的新项目，并在其中安装依赖和启动开发环境。

九、Vite 脚手架创建 Vue3 项目

Vite 还提供了一个脚手架工具，可以快速创建基于 Vue3 的项目。该工具提供了更详细的配置选项，并支持 Vue3 的 TypeScript、CSS 预处理器等。

// Vite 脚手架创建 Vue3 项目示例代码
npm install -g vue-cli
vue create my-app
cd my-app
npm install
npm run serve

这里以 vue-cli 工具为例，在安装完 vue-cli 后，执行 vue create my-app 命令，创建一个名为 my-app 的新项目，并在其中安装依赖和启动开发环境。

总之，Vue3 和 Vite3 是一个非常好的组合，可以帮助我们更快、更高效地构建现代的 Web 应用程序。通过使用 Composition API、TypeScript、Pinia 等，可以使我们的项目更加模块化、可维护和易于扩展。