Element UI 及 Element Plus框架

Jim-Zheng 2023-04-15 原文

一，何为Element UI 及 Element Plus？

它们是前端框架。它是包含很多有自己风格的组件库。
Element目前有两个版本：element-ui 及 element-plus两个版本。
它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。
Element UI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；
既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack
当然Element UI与有React及Angular的版本了。

二、Element UI 与 Element Plus区别？

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

三、Element UI 与 Element Plus使用

方式一、直接引用方式，引用其CSS及JS，还有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>

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

1，创建一个Vue CLI项目：

2，添加element plus引用：

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：

<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,调用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>

结果：

注意：

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

<script lang="ts" setup>

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

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

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

例如：

<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>

调用：

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;

结果：

Element Plus xff 34 gt elementui vue.js javascript 前端前端框架

有关Element UI 及 Element Plus框架的更多相关文章

TimeSformer：抛弃CNN的Transformer视频理解框架 - 2
Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图
ruby - sinatra 框架的 MVC 模式 - 2
我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？最佳答案您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho
ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目，它们运行良好，但在这个过程中重新发明了轮子，自来水(和热水)和止痛药，正如我随后了解到的那样，这些已经存在于框架中。那么基本上，正确了解框架中所有智能部分的最佳方法是什么，这将节省时间而不是自己构建已经实现的功能？从第1页开始阅读文档？是否有公开所有内容的特定示例应用程序？一个特定的开源项目？所有的rails交通？还是完全
ruby - 自动将院子文档框架添加到现有的 Rails 遗留代码中 - 2
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭4年前。Improvethisquestion我希望能够将模板化的YARD文档样式注释插入到我现有的Rails遗留应用程序中。目前它的评论很少。我想要具有指定参数的类header和方法header(通过从我假定的方法签名中提取)和返回值的占位符。在PHP代码中，我有一些工具可以检查代码并在适当的位置创建插入到代码中的文档header注释。在带有Ducktyping等的Ruby中，我确信诸如@params等类型之类
ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2
我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序，在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络，数据库，日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中，我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上，我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗？最佳答案 ROM呢？(Ruby对象映射器)。还有
python - Ruby 是否有相当于 Python 的扭曲框架作为网络抽象层？ - 2
据我了解，Python的扭曲框架为网络通信提供了更高级别的抽象(？)。我正在寻找在Rails应用程序中使用与twisted等效的Ruby。最佳答案看看EventMachine.它不像Twisted那样广泛，但它是围绕事件驱动网络编程的相同概念构建的。关于python-Ruby是否有相当于Python的扭曲框架作为网络抽象层？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/9
ruby-on-rails - 使用 Rails 以外的 Ruby 框架是否有任何潜在的缺点？ - 2
我想使用比Rails(Sinatra/Ramaze/Camping)更轻的框架，但我担心这样做我将无法使用许多以插件形式为Rails定制的共享库.这是一个主要问题，还是这些插件中的大多数都可以跨不同的Ruby框架使用？使用Ruby框架而不是Rails是否还有其他潜在的缺点？最佳答案您仍然可以使用gems在你提到的所有框架中，很多东西都是可重用的。想要交换一个新的ORM，没问题。想要一个花哨的shmacy语法高亮，没问题。Rails一直在大力插入摆脱旧的插件模型，转而使用gems。如果其他框架之一符合您的需求，最好使用它。请记住，
ruby - 应该 validate_format_of 。 not_with 在框架中有问题(或者在我的理解中) - 2
我将以下代码放入RSpec测试中:it{shouldvalidate_format_of(:email).not_with('test@test')}并设置实际的类:validates:email,:presence=>true,:format=>/\b[A-Z0-9._%-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b/i当我运行测试时，我得到:失败:1)用户失败/错误:它{应该validate_format_of(:email).not_with('test@test')}当电子邮件设置为“test@test”时，预期错误包括“can'tbeblank”，得到错误
ruby-on-rails - Rails 使用了哪些测试框架？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭9年前。ImprovethisquestionRails使用了哪些单元测试框架？我正在阅读一本书(PragmaticProgrammersAgileDev.withRails)，其中展示了如何在Rails中进行单元测试。这本书向我展示了默认的Rails测试套件(Test::Unit的子类)。这是Rails社区中使用的主要测试框架吗？我在执行常规ruby时使用RSpec，我也希望能够在Rails中使用它(如果不是太麻烦的话)？
ruby - rspec模拟与其他模拟框架的优缺点是什么？ - 2
我看过很多过时的播客，其中提到摩卡是我想安装的一个宝石，因为它确实比rspec更好模仿。我有一种感觉，rspec开发人员已经意识到这一点，并从那时起改进了他们的模拟。但是，在默认的spec_helper.rb文件中，我看到三个模拟框架的一些注释掉的代码存根mochaflexmockrr向任何能给我一个像样答案的人投赞成票，就这些框架中至少一个的利弊与rspec自己的模仿框架进行比较。如果你能给我一个关于这三个问题的详细说明，我会接受你的回答。最佳答案真的，这只是口味的问题。看一看语法，看看什么最适合你。当然，使用rspec的内置

Element UI 及 Element Plus框架

有关Element UI 及 Element Plus框架的更多相关文章

随机推荐