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>
相关推荐
小毛驴8505 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏34 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html