工欲善其事，必先利其器：打造一个 Vue3 + TypeScript 项目模板

2023-10-22 08:48:36

在软件开发中，有一个至关重要的原则：工欲善其事，必先利其器。对于 Vue.js 开发人员而言，拥有一个精心配置的项目模板至关重要，可以节省时间、减少重复性任务，并确保项目的一致性和可维护性。

本教程将引导你一步步配置一个全面的 Vue3 + TypeScript 项目模板，集成了 vue-router、pinia、ant-design-vue、vue-i18n 和 vite 等强大库，为构建复杂的 Web 应用程序奠定坚实的基础。

项目配置

初始化项目

使用 Vue CLI（脚手架）创建一个新的 Vue3 项目：
```
vue create my-vue3-project --preset typescript
```
安装依赖项

安装 vue-router、pinia、ant-design-vue、vue-i18n 和 vite：
```
npm install vue-router pinia ant-design-vue vue-i18n vite --save
```

配置 vue-router

在 main.ts 中配置 vue-router：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    }
  ]
})

export default router

配置 pinia

在 main.ts 中配置 pinia：

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

配置 ant-design-vue

在 main.ts 中配置 ant-design-vue：

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(Antd)

配置 vue-i18n

在 main.ts 中配置 vue-i18n：

import { createI18n } from 'vue-i18n'
import en from 'ant-design-vue/lib/locale/en_US'
import zh from 'ant-design-vue/lib/locale/zh_CN'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en,
    zh
  }
})

export default i18n

配置 vite

在 vite.config.ts 中配置 vite：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})