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 等，可以使我們的項目更加模塊化、可維護和易於擴展。