Vue学习--- vue3 安装 ElementUi Element Plus 依赖 与引用

ElementUi 官网 快速开始 | Element Plus

vue2 依赖 ElementUi  ， vue3 依赖 Element Plus

一、安装 Element Plus

1.命令安装

  

npm install element-plus --save
或 (包含更新)
npm install element-plus --force 

2.视图安装

vue ui

3.引用自动安装(编辑工具自动安装如：webstorm)

二、Element Plus 引用

 1.全局引用(完整引入)

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'


const app = createApp(App)


app.use(ElementPlus)
app.mount('#app')

2.局部引用（在需要使用Element组件的单文件组件中）

<template>
  <el-button @click="handleClick">Click me!</el-button>
</template>
 
<script>
import { ElButton } from 'element-plus'
export default {
  components: {
    [ElButton.name]: ElButton,
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    },
  },
}
</script>

3.自己练习中的引用 （组件中，局部引用）

const version = require('element-plus/package.json').version // element-ui version from node_modules

npm run build 通过