Vue3+Vite5+Element-Plus项目搭建

原创已于 2025-04-14 02:19:38 修改 · 489 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2025-04-14 02:17:43 首次发布

1、简介

使用 Vue 3 + Vite 5 + Element plus + Vue Router + TypeScript 搭建前端项目。

2、创建Vue 3 + Vite 5 项目

npm create vite@latest my-vue-app

然后按照提示选择：

Project Name：my-vue-app（可自定义）
Framework：Vue
Variant：JavaScript 或 TypeScript（建议选 TypeScript）

在这里插入图片描述

进入项目目录：

cd my-vue-app

3、安装依赖

npm install

在这里插入图片描述

4、安装 Element Plus

npm install element-plus

由于使用了TypeScript，还需要安装 Vue 相关的类型定义：

npm install -D @vue/compiler-sfc

在这里插入图片描述

5、配置 Element Plus

在 main.ts 中导入 Element Plus：

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')

在这里插入图片描述

6、运行项目

npm run dev

出现如下输出，说明项目运行成功了，在浏览器打开：http://localhost:5173/

在这里插入图片描述

7、示例：使用 Element Plus 组件

在 App.vue 里加入一个简单的 el-button 组件：

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div style="padding: 20px;">
    <el-button type="primary" @click="count++">
      Clicked {{ count }} times
    </el-button>
  </div>
</template>