elementplus1. vue3中element-ui的使用 --elementPlus

#1.vue3中element-ui的使用 --elementPlus

elmentui是一款为vue设计的桌面组件库。vue3使用的是elementPlus.

官网地址

一、安装

1.npm 安装

npm install element-plus --save

2.也可以使用插件安装：（没成功）

vue create my-app
cd my-app
vue add element-plus

步骤照着这个填。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBJUDz27-1642320799763)(1.vue中element-ui的使用教程.assets/image-20220114115944541.png)]

配置：

//main.js
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//1)引入elementui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app=createApp(App)
app.use(store)
app.use(router)
//2)elementui
app.use(ElementPlus)
app.mount('#app')

按需引入：没有把组件全部安上，用哪个引入哪个。

https://www.jb51.net/article/201153.htm

二、使用组件

1.测试一下弹出框

官网案例：

<template>
  <el-button plain @click="open1"> Success </el-button>
</template>

<script lang="ts" setup>
import { ElNotification } from 'element-plus'

const open1 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}

</script>

vue3中改一下：

script标签不用加ts,不是typescript.

把open1放到methods里。

<template>
	<div>
		<h2>我是vue1-测试一些弹出框</h2>
		<h4>1.视图层成功框</h4>
		<el-alert title="success alert" type="success" center show-icon> </el-alert>
		<h4>2.点击弹出成功、失败消息  ---- 组件Notification 通知</h4>
			<el-button plain @click="open1"> Success </el-button>
		
	</div>
</template>

<script>
	import {
      
       ElNotification } from 'element-plus'
	export default {
      
      
	  name: 'elementui1',//本组件组件名
	  data() {
      
      
	    return {
      
      
	      arr:[],
	    }
	  },
	  created(){
      
      
		  console.log(1)
	  },
	  methods:{
      
      
		   open1(){
      
      
		    ElNotification({
      
      
		      title: '成功',
		      message: '执行成功！',
		      type: 'success',
		    })
		  },
		  
		  
	  } 
	
	}
</script>

<style scoped>
    
</style>

效果：