在前端页面中使用element-ui和echarts教程（CDN引入方式）

&lt;!-- 引入样式 --&gt;
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&gt;
<!-- 引入组件库 --&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"&gt;</script&gt;

然后将这两个放入自己的项目中，例如：

！！！这里特别注意链接的位置，样式链接实在<head>标签里面，组件标签是在<body>外面

然后进入Vue 官网：安装 — Vue.js (vuejs.org)

这里有两个版本可以选择：新手建议使用第一个学习版的会有错误提示。开发版的没有提示信息，但也有其他好处，根据自己需求，都可以使用。

然后将链接放入自己刚刚的网页代码中

2.创建 app，导入组件

在下方创建一个<script>创建一个app 实例，同时在<body>中创建与之对应的id为app的div 盒子

3.加入组件测试 效果

回到element-ui：组件 | Element

我们尝试添加一个button 点击图中展开代码，复制即可，放到我们创建的div中。

然后再浏览器打开查看效果，这样我们就成功引入 button组件了。

element-ui提供了很多组件，大家可以各取所需，直接拿来用，加快自己的页面搭建速度。

二、使用 echarts 表格

1.引入链接，放入<head>标签 即可。

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2.创建容器，引入代码

1.创建一个div 盒子，id为main（和表中的id一样）。

然后进入 echarts的官网 Apache ECharts，然后我们点击所有示例，选择一个表格

然后选择一个表格，将代码复制

2.创建一个js 文件，将表格的代码粘贴进去，记得在页面 位置 引入 js 文件，可以参考图‘容器创建’。

3.运行 查看 表格情况

如果有其他问题欢迎评论区提出。

原文地址:http s://blog.csdn.net/qq_52781460/article/d etails/131008125

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_8839.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.co m进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

element ui 组件

一、使用element–ui组件

1.引入CDN：

2.创建app，导入组件

3.加入组件测试效果

二、使用echarts表格

1.引入链接，放入<head>标签即可。

2.创建一个js文件，将表格的代码粘贴进去，记得在页面位置引入js文件，可以参考图‘容器创建’。

3.运行查看表格情况

相关文章

发表回复 取消回复

一、使用 el ement–ui 组件

2.创建 app，导入组件

二、使用 echarts 表格

2.创建一个js 文件，将表格的代码粘贴进去，记得在页面位置引入 js 文件，可以参考图‘容器创建’。

发表回复取消回复