Vue 3 + TypeScript + Pinia + Vite 前端架构的详解

Vue 3 是 Vue.js 的最新版本，强调了关注点分离和更好的性能。TypeScript 是一个强类型的编程语言，可以提供更好的代码安全性和可读性。Pinia 是一个专为 Vue 3 实现的状态管理库，可以提供更好的代码可读性和可维护性。Vite 是一个快速的现代化构建工具，可以提供更快的构建和重载速度。以下是 Vue 3 + TypeScript + Pinia + Vite 前端架构的详解：

1. 安装和配置 Vite

首先需要使用 Node.js 安装 Vite：npm install -g vite。然后，在项目的根目录下创建一个 vite.config.ts 文件，并进行配置，例如：

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

export default defineConfig({
  plugins: [vue()]
})

1. 安装和配置 Vue 3 和 TypeScript

使用以下命令安装 Vue 3 和 TypeScript 的依赖：

npm install vue@next @vue/compiler-sfc typescript -D

然后，将 TypeScript 作为 Vite 的默认编译器，修改 vite.config.ts 文件：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  },
  optimizeDeps: {
    include: ['pinia']
  },
  build: {
    outDir: 'dist/www'
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080/api',
        changeOrigin: true
      }
    }
  }
})

然后，在项目目录下创建一个 tsconfig.json 文件，并进行配置，例如：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "noEmit": true,
    "strictPropertyInitialization": false,
    "allowJs": true,
    "moduleResolution": "Node",
    "experimentalDecorators": true    
  },
  "exclude": ["node_modules"]
}

1. 安装和配置 Pinia

使用以下命令安装 Pinia：npm install pinia -S。然后，在项目目录下创建一个 store.ts 文件，并进行配置，例如：

import { createPinia } from 'pinia'
import { App } from 'vue'

const pinia = createPinia()

export function useStore() {
  return pinia.store
}

export function installPinia(app: App<Element>) {
  app.use(pinia)
}

然后，在 main.ts 文件中导入和使用 installPinia 函数，例如：

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

const app = createApp(App)
installPinia(app)

app.mount('#app')

1. 结合使用

最后，可以在 Vue 3 组件中使用 Pinia 来管理状态。例如，在一个 MyComponent.vue 文件中：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '@/store'

export default defineComponent({
  setup() {
    const { count, increment } = useStore()

    return {
      count,
      increment
    }
  }
})
</script>

以上就是 Vue 3 + TypeScript + Pinia + Vite 前端架构的详解，在这个架构中，我们可以使用最新的前端技术来构建高质量的应用程序。