怎么用vite+vue3.0+ts+element-plus搭建項目

# 怎么用Vite+Vue3.0+TS+Element-Plus搭建項目

## 前言

隨著前端技術的快速發展，Vue3.0憑借其優秀的Composition API和更好的性能表現，已經成為現代前端開發的首選框架之一。而Vite作為新一代前端構建工具，憑借其極快的啟動速度和熱更新能力，正在逐步取代Webpack成為Vue項目的標配構建工具。本文將詳細介紹如何使用Vite+Vue3.0+TypeScript+Element-Plus搭建一個完整的前端項目。

## 環境準備

在開始項目搭建之前，請確保你的開發環境滿足以下要求：

- Node.js 版本 >= 14.18（推薦使用16.x LTS版本）
- npm 版本 >= 6.x 或 yarn >= 1.22
- 代碼編輯器（推薦VS Code）

### 檢查Node.js版本

```bash
node -v
# 應該顯示 v14.18.x 或更高版本

npm -v
# 應該顯示 6.x 或更高版本

如果版本過低，建議通過nvm（Mac/Linux）或nvm-windows（Windows）來管理Node.js版本。

創建Vite項目

Vite提供了多種模板，我們將使用Vue+TypeScript模板來初始化項目。

1. 使用npm創建項目

npm create vite@latest my-vue-app -- --template vue-ts

2. 進入項目目錄并安裝依賴

cd my-vue-app
npm install

3. 啟動開發服務器

npm run dev

此時，你應該能在瀏覽器中看到Vite+Vue3的歡迎頁面，訪問地址通常是http://localhost:3000。

項目結構解析

讓我們先了解一下Vite創建的默認項目結構：

my-vue-app/
├── node_modules/       # 項目依賴
├── public/            # 靜態資源目錄
├── src/               # 源代碼目錄
│   ├── assets/        # 靜態資源（圖片、字體等）
│   ├── components/    # Vue組件
│   ├── App.vue        # 根組件
│   ├── main.ts        # 應用入口文件
│   ├── vite-env.d.ts  # Vite環境類型聲明
│   └── style.css      # 全局樣式
├── index.html         # 應用入口HTML文件
├── package.json       # 項目配置文件
├── tsconfig.json      # TypeScript配置
└── vite.config.ts     # Vite配置

配置Vite

雖然Vite開箱即用，但我們還是需要根據項目需求進行一些配置調整。打開vite.config.ts文件：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 設置@別名指向src目錄
    }
  },
  server: {
    port: 8080, // 設置開發服務器端口
    open: true, // 自動打開瀏覽器
    proxy: { // 配置代理
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

集成TypeScript

Vite已經為我們配置好了TypeScript，但我們可以進一步完善TS配置。

1. 修改tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2. 添加類型聲明文件

在src目錄下創建shims-vue.d.ts文件，為.vue文件添加類型支持：

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

集成Element Plus

Element Plus是Vue3版本的Element UI組件庫，下面我們來集成它。

1. 安裝Element Plus

npm install element-plus
# 或者使用yarn
yarn add element-plus

2. 完整引入（適合小型項目）

修改main.ts文件：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

3. 按需引入（推薦，減少打包體積）

首先安裝unplugin-vue-components和unplugin-auto-import：

npm install -D unplugin-vue-components unplugin-auto-import

然后修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

這樣我們就可以直接在組件中使用Element Plus的組件，而無需手動導入。

項目架構優化

為了更好地組織代碼，我們可以對項目結構進行優化：

1. 調整目錄結構

src/
├── api/              # API請求
├── assets/           # 靜態資源
├── components/       # 公共組件
├── composables/      # 組合式函數
├── router/           # 路由配置
├── store/            # 狀態管理
├── utils/            # 工具函數
├── views/            # 頁面組件
├── App.vue           # 根組件
└── main.ts           # 入口文件

2. 配置路由

安裝Vue Router：

npm install vue-router@4

創建src/router/index.ts：

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

修改main.ts：

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

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

3. 配置狀態管理（Pinia）

安裝Pinia（Vue官方推薦的狀態管理庫）：

npm install pinia

創建src/store/index.ts：

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

創建示例store src/store/user.ts：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Guest',
    isLogin: false
  }),
  actions: {
    login(name: string) {
      this.name = name
      this.isLogin = true
    },
    logout() {
      this.name = 'Guest'
      this.isLogin = false
    }
  }
})

修改main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'

const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

樣式管理

1. 安裝Sass

npm install -D sass

2. 創建全局樣式文件

在src/assets目錄下創建scss文件夾，并添加以下文件：

• _variables.scss - 全局變量
• _mixins.scss - 混合
• index.scss - 主樣式文件

在main.ts中引入全局樣式：

import '@/assets/scss/index.scss'

3. 配置Element Plus主題

創建src/assets/scss/element-variables.scss：

/* 重寫Element Plus變量 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #409EFF,
    ),
  ),
);

然后在vite.config.ts中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/scss/element-variables.scss" as *;`,
      }
    }
  },
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        }),
      ],
    }),
  ],
})

代碼規范配置

為了保證代碼質量和一致性，我們需要配置ESLint和Prettier。

1. 安裝依賴

npm install -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier

2. 配置ESLint

創建.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
}

創建.eslintignore：

node_modules
dist
*.md
*.json
*.d.ts

3. 配置Prettier

創建.prettierrc.js：

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'es5',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'lf',
}

4. 添加腳本命令

在package.json中添加：

"scripts": {
  "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
  "format": "prettier --write ."
}

環境變量配置

Vite使用import.meta.env來訪問環境變量。

1. 創建環境文件

• .env - 所有環境通用
• .env.development - 開發環境
• .env.production - 生產環境

示例.env.development：

VITE_API_BASE_URL=/api
VITE_APP_TITLE=Development App

2. 使用環境變量

在代碼中可以通過import.meta.env.VITE_API_BASE_URL訪問。

3. 類型支持

在src/env.d.ts中添加：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

生產環境構建

1. 構建命令

npm run build

構建結果會生成在dist目錄下。

2. 預覽構建結果

npm run preview

3. 自定義構建配置

在vite.config.ts中：

export default defineConfig({
  build: {
    outDir: 'dist', // 輸出目錄
    assetsDir: 'assets', // 靜態資源目錄
    assetsInlineLimit: 4096, // 小于此值的資源將內聯為base64
    cssCodeSplit: true, // 啟用CSS代碼分割
    sourcemap: false, // 生產環境不生成sourcemap
    minify: 'terser', // 使用terser進行代碼壓縮
    terserOptions: {
      compress: {
        drop_console: true, // 移除console
        drop_debugger: true // 移除debugger
      }
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  }
})

常見問題解決

1. 解決Vite熱更新慢的問題

在vite.config.ts中添加：

server: {
  watch: {
    usePolling: true // 解決WSL2中熱更新問題
  }
}

2. 解決Element Plus圖標顯示問題

安裝Element Plus圖標：

npm install @element-plus/icons-vue

使用示例：

<template>
  <el-icon><Edit /></el-icon>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

3. 解決TypeScript類型報錯

如果遇到類型報錯，可以嘗試以下方法：

1. 檢查tsconfig.json配置是否正確
2. 確保安裝了所有必要的類型聲明包
3. 使用// @ts-ignore臨時忽略錯誤（不推薦長期使用）

項目優化建議

1. 代碼分割

Vite默認支持代碼分割，但我們可以進一步優化：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'element-plus': ['element-plus'],
        'vue': ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

2. 圖片壓縮

安裝vite-plugin-imagemin：

npm install -D vite-plugin-imagemin

配置：

import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7, interlaced: false },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 20 },
      pngquant: { quality: [0.8, 0.9], speed: 4 },
      svgo: {
        plugins: [
          { name: 'removeViewBox' },
          { name: 'removeEmptyAttrs', active: false }
        ]
      }
    })
  ]
})

3. 使用CDN加速

安裝vite-plugin-cdn-import：

npm install -D vite-plugin-cdn-import

配置示例：

import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://cdn.jsdelivr.net/npm/element-plus@2.0.5/dist/index.full.min.js',
          css: 'https://cdn.jsdelivr.net/npm/element-plus@2.0.5/dist/index.css'
        }
      ]
    })
  ]
})

結語

通過本文的詳細步驟，我們已經成功搭建了一個基于Vite+Vue3+TypeScript+Element Plus的現代化前端項目。這種技術組合不僅提供了極佳的開發體驗，還能保證應用的性能和可維護性。在實際項目中，你還可以根據需要集成更多工具和庫，如測試框架、國際化方案等。

希望本文能幫助你快速上手Vite和Vue3的開發，為你的項目開發提供堅實的基礎。Happy coding! “`