Element UI组件的安装及使用

最新推荐文章于 2024-06-28 20:05:36 发布

程序老猫

最新推荐文章于 2024-06-28 20:05:36 发布

阅读量678

点赞数 9

文章标签： elementui

本文链接：https://blog.csdn.net/m0_73811154/article/details/136320344

版权

Element UI 是一套基于 Vue.js 的前端组件库，它提供了丰富的 UI 组件，可以帮助开发者快速构建企业级桌面应用。以下是安装和使用 Element UI 的基本步骤：

### 安装 Element UI

#### 使用 npm 安装
1. 首先确保你已经初始化并安装了 Vue CLI，并创建了一个 Vue 项目。

```bash
# 如果尚未全局安装Vue CLI
npm install -g @vue/cli

# 创建一个新的Vue项目
vue create your-project-name
```

2. 进入你的 Vue 项目目录并安装 Element UI：

```bash
cd your-project-name
npm install element-ui --save
```

#### 在 main.js 中引入并注册 Element UI

在项目的 `src/main.js` 文件中添加以下代码以全局引入 Element UI 和其默认样式：

```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
```

### 使用 Element UI 组件

一旦 Element UI 被正确引入，你就可以在任何 Vue 组件中直接使用 Element UI 提供的组件了。

例如，在一个 `.vue` 单文件组件中使用 Element UI 的 Button 组件：

```html
<template>
<div>

<el-button type="primary">主要按钮</el-button>
</div>
</template>

### CDN 方式安装（非推荐，但在简单项目或测试环境中可用）

如果你不打算通过 npm 管理依赖，也可以通过 CDN 引入 Element UI：

在 HTML 文件的 `<head>` 标签内添加以下链接：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你的应用标题</title>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button type="primary">主要按钮</el-button>
</div>
<script>
new Vue({
el: '#app',
mounted() {
// 如果需要，这里可以初始化某些 Element UI 组件
}
})
</script>
</body>
</html>

程序老猫

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Element UI组件的安装及使用

一旦 Element UI 被正确引入，你就可以在任何 Vue 组件中直接使用 Element UI 提供的组件了。主要按钮主要按钮-- 使用 Element UI 的 Button 组件 -->-- 引入 Element UI JavaScript 库 -->-- 引入 Element UI CSS -->-- 引入 Vue.js -->
复制链接

扫一扫