当前位置：首页 > news >正文

Vue 3 + Composition API + Vite + Pinia + Element Plus 构建项目的完整指南

news 来源：原创 2025/6/13 11:23:25

以下是使用 Vue 3 + Composition API + Vite + Pinia + Element Plus 构建项目的完整指南，包含 TypeScript 支持配置：

1. 创建项目

使用 Vite 初始化项目

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

如果不需要 TypeScript，使用 --template vue

进入项目目录

cd my-vue-app

2. 安装核心依赖

npm install vue-router@4 pinia element-plus @element-plus/icons-vue
npm install -D sass  # 如需使用 Element Plus 的 SCSS 变量

3. 项目结构

src/
├─ assets/           # 静态资源
├─ components/       # 公共组件
├─ views/            # 页面组件
├─ router/           # 路由配置
│  └─ index.ts
├─ stores/           # Pinia 状态管理
│  └─ counter.ts
├─ styles/           # 全局样式
│  └─ element.scss   # Element Plus 自定义主题
├─ App.vue
├─ main.ts

4. 配置 Element Plus

(1) 按需自动导入 (推荐)

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

(2) 修改 `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()],
    }),
  ],
})

(3) 样式引入

在 main.ts 中添加：

import 'element-plus/dist/index.css'

5. 配置 Pinia

(1) 修改 `main.ts`

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

(2) 创建示例 Store (`stores/counter.ts`)

import { defineStore } from 'pinia'

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

6. 配置路由

(1) 创建 `router/index.ts`

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  { path: '/', component: HomeView },
  { 
    path: '/about', 
    component: () => import('../views/AboutView.vue') 
  }
]

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

export default router

(2) 修改 `main.ts`

import router from './router'

app.use(router)

7. 示例组件

`views/HomeView.vue`

<template>
  <div class="home">
    <el-button type="primary" @click="handleClick">
      Count is: {{ counter.count }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()

const handleClick = () => counter.increment()
</script>

8. 完整 `App.vue` 示例

<template>
  <div>
    <el-menu mode="horizontal" :router="true">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>

    <router-view />

    <el-footer style="text-align: center; margin-top: 20px;">
      © 2023 My Vue App
    </el-footer>
  </div>
</template>

<style>
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}
</style>

9. 运行与构建

npm run dev    # 开发模式
npm run build  # 生产构建

可选配置

TypeScript 类型支持

在 tsconfig.json 添加路径别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Element Plus 主题定制

创建 styles/element.scss：

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary': (
      'base': #409eff,
    )
  )
);

修改 vite.config.ts：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/styles/element.scss" as *;`
    }
  }
}

项目依赖清单

{
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "pinia": "^2.1.7",
    "element-plus": "^2.4.1",
    "@element-plus/icons-vue": "^2.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "unplugin-auto-import": "^0.17.4",
    "unplugin-vue-components": "^0.26.0",
    "sass": "^1.69.5",
    "vite": "^4.5.0"
  }
}