一，何为ElementUI及ElementPlus？

  1. 它们是前端框架。它是包含很多有自己风格的组件库。
  2. Element目前有两个版本：element-ui及 element-plus两个版本。
  3. 它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。
  4. Element UI是一款基于Vue2.x的界面框架；ElementPlus是一款基于Vue3.x的界面框架；

  5. 既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack

  6. 当然ElementUI与有React及Angular的版本了。

二、ElementUI与ElementPlus区别？

  1. Element UI框架的升级版（3.x）是ElementPlus；Element Plus 目前还处于快速开发迭代中
  2. 由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器
  3. Element-Plus 已经把vue的版本锁定了3.x；而ElementUI是基于Vue 2.

三、ElementUI与ElementPlus使用

方式一、直接引用方式，引用其CSS及JS，还有vue.js即可：

Button
Try Element
new Vue({el: '#app',data: function() {return { visible: false }}})

方式二、使用npm加载，以下以Vue3.0为例：

1，创建一个VueCLI项目：

2，添加elementplus引用：

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，创建一个控件Helloworld.vue：

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

4,调用Helloworld.vue:

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

结果：

注意：

1，使用element plus的时候，发现有些组件不能使用。查到问题，发现script加了lang=”ts”.

这个是说明这个组件是基于typescript的。去掉这个lang=”ts”，很多组件还是可以用的。

2，本人也尝试过安装typescript，但发现安装这个以后，语法需要遵循typescript的语法，且会自动将js文件变成.ts文件。不习惯，所以我又卸载了。

3，vue3.x支持使用export或的方式。但有些初始化数据，还是需要使用（不然会报错）：

例如：

  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',} ]

调用：

import {createRouter, createWebHashHistory} from "vue-router";constroutes = [{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自动匹配404redirect: '/404',},]const router=createRouter({history: createWebHashHistory(),routes})export default router;

结果：