系列五、Vue2 安装element

最新推荐文章于 2025-08-29 15:48:16 发布

原创最新推荐文章于 2025-08-29 15:48:16 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #ui

本文介绍了如何基于Vue2.0使用Element-UI组件库来初始化项目，包括通过vue-cli创建项目，验证安装，安装Element-UI，修改package.json和main.js，以及在App.vue中添加并展示Element的按钮组件，最后启动项目进行验证。

一、概述

Element-UI是一套为开发者、设计师和产品经理准本的基于Vue2.0的桌面端组件库。官网地址：

https://element.eleme.cn/#/zh-CN

二、初始化项目

vue init webpack vue-cli2-element-project-example --offline

三、验证安装是否成功

四、安装element-ui

npm i element-ui -S

4.1、package.json中的变化

4.2、main.js配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

五、App.vue中添加element组件

<el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
</el-row>