零基础element ui安装_安装element ui

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
1

检验是否修改成功 npm config list

2、安装vue-cli脚手架

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

# 安装
npm install -g @vue/cli

# 检查是否安装
vue --version
1
2
3
4
5

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

vue create vue
1

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

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

cd vue

# 运行
npm run serve
1
2
3
4

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
1

在main.js 里引入以下内容

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

Vue.use(ElementUI);
1
2
3
4

在 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24