使用 IntelliJ IDEA 创建 Vue 3 项目及 Element Plus 组件的安装及使用

10年程序员

已于 2024-02-27 15:28:45 修改

阅读量5.1k

点赞数 11

文章标签： elementui

于 2024-02-27 13:32:47 首次发布

本文链接：https://blog.csdn.net/qq_35309973/article/details/136319860

版权

本文详细指导如何在IntelliJIDEA中创建Vue3项目，安装ElementPlus组件库，以及如何在项目中应用ElementPlus组件，包括引入、配置和使用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本篇博客中，我们将学习如何使用 IntelliJ IDEA 创建一个 Vue 3 项目，并安装 Element Plus 组件库。接下来，我们将介绍如何在项目中使用 Element Plus 组件。

1. 安装 IntelliJ IDEA

1）首先，确保你已经安装了 IntelliJ IDEA。如果没有，请访问官方网站下载并安装：https://www.jetbrains.com/idea/download/
2）安装vue.js插件
在这里插入图片描述

2. 创建 Vue 3 项目

打开 IntelliJ IDEA，点击 “File” -> “New” -> “Project”。
在这里插入图片描述
选择vue.js，右侧填写项目名称，选择项目位置，然后点击 “创建”。

项目创建好后会出现以下目录及文件

3. 安装 Element Plus

进入项目目录，运行以下命令安装 Element Plus：

cd myvue
npm install element-plus --save

出现以下字样即安装完成
在这里插入图片描述

4. 在项目中使用 Element Plus 组件

首先，在 src/main.js 文件中引入 Element Plus：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

现在，你可以在项目中使用 Element Plus 组件了。例如，在 src/components/HelloWorld.vue 文件中，我们可以添加一个 Button 组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button type="primary">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用 Element Plus!'
    }
  }
}
</script>

保存文件，点击运行
在这里插入图片描述

然后在浏览器中查看效果。你应该可以看到一个带有 “点击我” 文字的按钮。
在这里插入图片描述
至此，我们已经成功创建了一个 Vue 3 项目，并在其中安装了 Element Plus 组件库。你可以继续探索 Element Plus 提供的其他组件，以丰富你的项目。
Element Plus官网：https://element-plus.gitee.io/zh-CN/