三国鼎立web(三国鼎立web 每日任务)

更新时间:2023-03-01 18:33:39 阅读：评论：0

简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。

官网截图

2.11.0 版本更新新特性Drawer新增抽屉组件 (#16577 by @JeremyWuuuuu)Bug 修复Checkbox修复 CSS 样式问题 (#16006 by @Hazlank)Tree更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)修复设置节点 isCurrent 的为 fal 的问题 (#15870 by @kkkisme)Dropdown更新 split-button 默认颜色 (#15931 by @JuniorTour)Cascader修复一级菜单更新问题 (#16399 by @luckyCao)更新显示正确的 header 的逻辑 (#16354 by @ziyoung)懒加载时设默认值 (#16420 by @luckyCao)修复显示问题 (#15935 by @junyiz)对外暴露 getCheckedNodes 和修复 option 问题 (#16709 by @SimonaliaChen)Submenu修复 append-to-body 问题 (#16289 by @a631807682)Table修复 tree table 数据更新问题 (#16481 by @island205)Select修复内存泄漏问题 (#16463 by @island205)InfiniteScroll更新命名和说明 (#16698 by @iamkun)Avatar修复图片不居中的问题 (#16489 by @luckyCao)Dialog增加 destroyOnClo 属性 (#16455 by @ziyoung)Image增加大图预览 (#16333 by @luckyCao)优化Docs修复 dropdown 示例 (#16193 by @webxmsj)修正笔误 (#15971 by @howiefh)I18n更新泰文翻译 (#16689 by @ponkrit)Chore更新基础 API 地址 (#16607 by @iamkun)增加 Form 的主题 token (#16699 by @iamkun)更新统计 (#16609 by @iamkun)修复文档锚点问题 (#16692 by @iamkun)本地开发安装

# 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i element-ui -S快速上手完整引入

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.u(ElementUI);new Vue({ el: '#app', render: h => h(App)});通过 CDN 引入

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script>自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件npm i babel-plugin-import -D// 在.babelrc 中添加配置{ "prets": [["es2015", { "modules": fal }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}// 如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：import Vue from 'vue';import { Button, Select } from 'element-ui';import App from './App.vue';Vue.component(Button.name, Button);Vue.component(Select.name, Select);/* 或写为 * Vue.u(Button) * Vue.u(Select) */new Vue({ el: '#app', render: h => h(App)});Hello World 示例

<!DOCTYPE html><html><head> <meta chart="UTF-8">  <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>  <script src="https://unpkg.com/vue/dist/vue.js"></script>  <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: fal } } }) </script></html>

本文发布于:2023-02-28 20:16:00，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/zhishi/a/167766681980310.html

本文word下载地址：三国鼎立web(三国鼎立web 每日任务).doc

本文 PDF 下载地址：三国鼎立web(三国鼎立web 每日任务).pdf

上一篇：ipad2 6.1.3降级(ipad2.4降级6.1.3)

下一篇：返回列表

标签：web

留言与评论（共有 0 条评论）