Element库的Vue版本ElementUI的本地引入方法
最近刚接触ElementUI，发现官方介绍的使用方法中只有npm安装和CDN引入这两种方式，没有本地引入的方法。
因为我的学习环境有时候是断网状态的，所以自己研究了一下本地引入的方法，记录在此。
1、ElementUI是基于Vue.js的，所以先下载Vue.js
学习阶段选择开发版本。
Vue.js 官方下载
2、下载ElementUI
ElementUI GitHub
点击 Clone or download
再点击 Download ZIP，下载完成后解压，得到lib-master文件夹
3、新建一个html文件，例如index.html，将Vue.js和lib-master文件夹移动到和index.html同一目录下。
4、index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="lib-master/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="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="lib-master/index.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
————————————————
版权声明：本文为CSDN博主「wly_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36275259/article/details/103400133
Element库的Vue版本ElementUI的本地引入方法的更多相关文章
- vue结合element-ui table本地分页
<template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- vue入门|ElementUI使用指南
vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...
- 聚是一团火散作满天星，前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
- vue+elementui按需引入
转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...
- VUE基于ElementUI搭建的简易单页后台
一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/Eleme ...
- vue使用element-ui实现按需引入
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.ele ...
- element ui 在vue中使用可能遇到的问题
组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: import Vue from 'vue ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
随机推荐
- 开发者故事：基于 KubeSphere LuBan 架构打造下一代云交付平台
前言 在 KubeSphere Marketplace,个人开发者的创意和才能正在逐渐崭露头角.今日,我们荣幸地向大家介绍 Shipper 云交付平台的开发者--凌波,一位云原生领域的资深专家. 凌波 ...
- KubeSphere Meetup 北京站火热报名中 | 搭载 CIC 2021 云计算峰会
"CIC 2021 云计算峰会"是一场 Top 级行业盛会,将汇聚 800 家青云QingCloud 企业客户信息化负责人,采取线上线下相结合的方式,与会规模将超过 10000 人 ...
- 云原生爱好者周刊：Lens 5.2 发布，支持 M1 芯片
云原生一周动态要闻: Lens 5.2 发布 CNI 1.0.1 发布 K8ssandra 从 Helm 迁移到 Operator Amazon EKS Anywhere – 现在普遍可用于在本地创建 ...
- P1762 偶数&杨辉三角
P1762 偶数&杨辉三角(天立OI) 解题思路 一.结论法 杨辉三角形结论 第\(n\)行有\(n\)个数. 每行奇数个数必为\(2^k\)(\(k\)不是行数) 当行数恰为\(2^k\)时 ...
- CSS动画（登录页面）
1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6Pfop3IiakrZOtiaiaKniaxeH2Gs407DmkXPsMo8AFKdsYib ...
- 开源 PHP 商城项目 CRMEB 二次开发和部署教程
上篇文章给大家介绍了如何使用 Sealos 应用商店一键部署 CRMEB 开源商城系统,那速度真叫一个快啊,比宝塔快多了! 但是有些读者还不满足于此,问我能不能边运行边改代码,而且还得用 Cursor ...
- （系列十一）Vue3框架中路由守卫及请求拦截（实现前后端交互）
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...
- Microsoft.Extensions.AI 初探
.NET Conf上的介绍 在今年的.NET Conf上Steve Sanderson带来了题为"AI Building Blocks - A new, unified AI layer&q ...
- 微信小程序原生AI运动（动作）检测识别解决方案
前几年受疫情影响,人员流动受限,反而让"AI运动"概念风靡一时.空前火爆.目前已经在AI运动锻炼.体育教学.线上运动主题活动等场景中,成功得到了应用,并获得了广大互联网用户的认可. ...
- apt安装后需要移除的问题
之前记录了 apt-get remove 的命令,现在了解到原来还有 apt-get purge 的命令 这个命令可以清除配置数据 看来我们要转变一下,将来尽量用这个purge 了不然又使用清除 au ...