Element UI and Element Plus Framework

1. What are Element UI and Element Plus?

They are front-end frameworks. It is a library containing many components with their own styles.
Element currently has two versions: element-ui and element-plus.
It encapsulates the basic controls of HTML, and users only need to call these controls. There is no need to use CSS to adjust the style.
Element UI is an interface framework based on Vue2.x; Element Plus is an interface framework based on Vue3.x;
Since it is based on Vue, it can be packaged with a packaging tool, such as Vite or WePack
Of course, Element UI has React and Angular versions.

2. What is the difference between Element UI and Element Plus?

The upgraded version (3.x) of the Element UI framework is Element Plus; Element Plus is still in rapid development iteration
Since Vue 3 no longer supports IE11, Element Plus no longer supports IE browser
E element-Plus has locked the vue version to 3.x; and Element UI is based on Vue 2.

3. Use of Element UI and Element Plus

Method 1, direct reference method, refer to its CSS and JS, and vue.js:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

Method 2: Use npm to load, the following takes Vue3.0 as an example:

1. Create a Vue CLI project:

2. Add element plus reference:

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

//import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

import App from './App.vue'

const app = createApp(App)
 
//切换控件内部的语言
app.use(ElementPlus, {
    // locale:zhCn,
     locale:en,
  })
  
  
app.mount('#app')

3. Create a control Helloworld.vue:

<template> 
  <div>
     <el-calendar v-model="value" />
  </div> 
</template>

 import { ref } from 'vue'
 
 export default {
    name: 'HelloWorld',
    data: function() {
        return { 
          value: ref(new Date()) 
        }
    },
    props: {
      msg: String
    }
}

4. Call Helloworld.vue:

<template>
   <HelloWorld msg="Welcome to Your Vue.js App"/> 
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue' 
  export default{
    name: 'App',
    components: {
       HelloWorld
    } 
  }
</script>

result:

Notice:

1. When using element plus, I found that some components cannot be used. Found the problem and found that the script added lang="ts".

<script lang="ts" setup>

This is to show that this component is based on typescript. Remove this lang="ts", many components can still be used.

2. I also tried to install typescript, but found that after installing this, the grammar needs to follow the grammar of typescript, and it will automatically convert js files into .ts files. Not used to it, so I uninstalled again.

3. Vue3.x supports the use of export or <script stepup>. But for some initialization data, you still need to use <script stepup> (otherwise an error will be reported):

For example:

<template>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

 
 <script   setup> 
        const tableData = [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                } 
        ]  
   </script>

transfer:

import {createRouter, createWebHashHistory} from "vue-router";

const  routes = [
    {
        path: "/",
        component: () => import("../views/HomePage.vue")
    },
    {
        path: "/home",
        component: () => import("../views/HomePage.vue")
    },
    {
        path: "/vip",
        component: () => import("../views/VipPage.vue")
    },
    {
        path: "/404",
        component: () => import("../views/ErrorPage.vue")
    },
    {
        path: "/:catchAll(.*)", // 不识别的path自动匹配404
        redirect: '/404',
    },
]


const router=createRouter({
    history: createWebHashHistory(),
    routes
})

export default router;

result:

Element UI and Element Plus Framework

Guess you like