幽会ElementUI

最新推荐文章于 2021-05-25 19:54:42 发布

一杯雪花勇闯天涯

最新推荐文章于 2021-05-25 19:54:42 发布

阅读量124

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/117189228

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

本文介绍了如何使用Element-UI，一个基于Vue2.0的组件库，来初始化和构建Vue项目。通过vue-cli创建项目，安装并引入Element-UI，然后展示了一个简单的按钮组件和使用$message提示的示例，帮助开发者快速搭建网站界面。

摘要由CSDN通过智能技术生成

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型

文章目录

前言
1.初始化vue项目
2. 安装element-ui 相关依赖
3. 在main.js 引入element-ui
4.把app.vue文件删掉，添加如下内容

前言

饿了吗开源组件库

1.初始化vue项目

vue create element-test

在这里插入图片描述

2. 安装element-ui 相关依赖

cd element-test
npm i element-ui -S
npm run serve

在这里插入图片描述

3. 在main.js 引入element-ui

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

在这里插入图片描述

4.把app.vue文件删掉，添加如下内容

<template>
   <div id="app">
	   <el-button @click="show">按钮</el-button>
   </div>
</template>

<script>


export default {
  name: 'app',
  methods: {
	  show() {
		  this.$message.success("element-ui提示");
	  }
  }
}
</script>

<style>

</style>