零基础element ui安装

使用ElementUI：基于Vue.js的前端框架安装与组件应用

最新推荐文章于 2025-09-11 04:09:29 发布

原创最新推荐文章于 2025-09-11 04:09:29 发布 · 2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端框架 #node.js

本文介绍了如何安装Node.js和VueCLI，设置淘宝镜像源，然后使用elementUI组件。步骤包括全局安装vue-cli，创建并初始化Vue项目，安装elementUI，以及在App.vue中引入和使用ElementUI的各种按钮组件。

element ui是饿了么前端团队推出的一个基于Vue.js2.0的桌面ui框架。一套专门为开发者准备的组件库。

1、安装node.js

node.js下载地址：https://nodejs.org/download/release/v16.20.2/

下载好之后，以管理员身份打开cmd窗口，输入node -v，回车，查看node版本号，出现版本号即为安装成功。

接下来是设置淘宝镜像源，因为npm是从国外的服务器，下载龟速。

npm config set registry https://registry.npmmirror.com

检验是否修改成功 npm config list

2、安装vue-cli脚手架

输入命令全局安装，初次安装可能要点时间，耐心等待一下

# 安装
npm install -g @vue/cli

# 检查是否安装
vue --version

进入你要存放vue项目的文件

vue create vue

这里按需选择，没多余需求默认即可，回车

出现这样提示，初始化成功

cd vue

# 运行
npm run serve

http://localhost:8081/

3、安装elementUI

elementUI官网： https://element.eleme.cn/#/zh-CN
组件地址： https://element.eleme.cn/#/zh-CN/component/installation

按三下ctrl + c 终止批处理操作。输入命令

npm i element-ui -S

在main.js 里引入以下内容

import App from './App.vue'
import ElementUI from 'element-ui';

Vue.use(ElementUI);

在这里插入图片描述

在 package.json中

到此已经安装element ui，咋们具体来使用下里面的组件

App.vue

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>


export default {
  name: 'App',
}
</script>

<style>
</style>