Vue页面开发和脚手架开发 Vue2集成ElementUI Vue3集成Element Plus

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>