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

在本篇博客中，我们将学习如何使用 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/