Element UI&&Element Plus
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。https://element.eleme.cn/#/zh-CN/component/installation
Element Plus，基于 Vue 3，面向设计师和开发者的组件库。https://element-plus.org/zh-CN/#/zh-CN
Element UI安装： npm install element-ui --save
Element Plus安装： npm install element-plus --save
页面开发，Vue2集成ElementUI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.1" />
<title>VUE2+ElementUI</title>
<!-- 引入Element UI的CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Element UI的JavaScript库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="root1" style="background-color: blueviolet;">
<span>{{msg}}</span>
<my-title></my-title>
<user-info></user-info>
</div>
<script>
// 全局组件
const component1 = Vue.extend({
template : '<h2>关于VUE的页面</h2>'
});
Vue.component('my-title',component1);
// 局部组件
const userComponent1 = Vue.extend({
template: `<div>
<p>姓名:{{name}}，年龄:{{age}}</p>
<el-button type="primary" icon="el-icon-warning" @click='info'>信息</el-button>
</div> `,
data(){
return {
name:'古怪今人',
age:'43'
}
},
methods:{
info(){
alert('这里是信息呀~');
}
}
});
// 实例
const vueApp1 = new Vue({
el: '#root1',
data:{
msg:'hello vue2!'
},
components:{
'user-info': userComponent1
}
});
</script>
</body>
</html>
页面开发，Vue3集成Element Plus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.1" />
<title>VUE3</title>
<!-- 引入Element Plus的CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入Element Plus的JavaScript文件 -->
<script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<div id="root1" style="background-color: blueviolet;">
<el-button type="primary" @click="handleClick1">点击我</el-button>
<el-button type="info" @click="handleClick2">点击我</el-button>
<span>{{msg}}</span>
<my-title></my-title>
<user-info></user-info>
</div>
<script>
// 全局组件
const component1 = {
template: '<h2>关于VUE的页面</h2>'
};
// 局部组件
const userComponent1 = {
template: `<div>
<p>姓名:{{name}}，年龄:{{age}}</p>
<el-button type="primary" @click='info'>信息</el-button>
</div> `,
data() {
return {
name: '古怪今人',
age: '43'
}
},
methods: {
info() {
alert('这里是信息呀~');
}
}
};
// 实例1
const vueApp1 = Vue.createApp({
setup() {
// 定义点击事件处理函数
const handleClick1 = () => {
alert('1、按钮被点击~');
};
return {
msg: 'hello vue3!',
handleClick1
}
},
methods: {
handleClick2(){
alert('2、按钮被点击~');
}
},
components: {
'user-info': userComponent1
}
});
// 注册全局组件
vueApp1.component("my-title", component1);
// 使用Element Plus组件库
vueApp1.use(ElementPlus);
vueApp1.mount("#root1");
</script>
</body>
</html>
Vue CLI脚手架开发，Vue2集成ElementUI
安装Vue CLI： npm install -g @vue/cli
Element UI安装： npm install element-ui --save
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<el-button type="primary" @click="handleClick1">点击我</el-button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods:{
handleClick1(){
alert('按钮被点击~');
}
}
}
</script>
Vite脚手架开发，Vue3集成Element Plus
创建项目： npm init vite@latest <project-name> --template vue
Element Plus安装： npm install element-plus --save
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app')
App.vue
<template>
<div>
<el-button type="primary" @click="handleClick1">点击我</el-button>
</div>
</template>
<script setup>
// 定义点击事件处理函数
const handleClick1 = () => {
alert('1、按钮被点击~');
};
</script>