01 - Element
2024-08-27 04:05:50
¶安装
npm 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
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>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。在线演示
<!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/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>
最新文章
- 字符串作为map的key
- git 设置代理服务器
- python 数据处理学习pandas之DataFrame
- [转]架构蓝图--软件架构 ";4+1"; 视图模型
- 优化 PHP 代码建议
- Pycharm使用问题# 内部Terminal
- C#删除文件和文件夹到回收站
- 外部按键 控制 LED 中断 (参考 http://www.oschina.net/question/565065_115196?sort=time )
- 每日一九度之题目1016:火星A+B
- web前端基础知识及快速入门指南
- c#中using System.Runtime.Serialization.Json;不能引用
- 运行时报错 ADB server didn’t ACK
- Vue.js 基础示例
- Python-数据库支持
- HDU 3743 Frosh Week(归并排序求逆序数)
- MySQL多数据源笔记3-分库分表理论和各种中间件
- Python——模块——linecache(对文本行的随机访问)
- Maven插件一览
- 数据库中无数据时查询数据为空,但出现空指针异常的解决方案(转载https://blueskator.iteye.com/blog/2096026)
- C#设计模式(11)——装饰者模式