最近刚接触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的本地引入方法的更多相关文章

  1. vue结合element-ui table本地分页

    <template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...

  2. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  3. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  4. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  5. 聚是一团火散作满天星，前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...

  6. vue+elementui按需引入

    转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...

  7. VUE基于ElementUI搭建的简易单页后台

    一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/Eleme ...

  8. vue使用element-ui实现按需引入

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.ele ...

  9. element ui 在vue中使用可能遇到的问题

    组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: import Vue from 'vue ...

  10. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

随机推荐

  1. 快速部署单服务器oracle12c

    docker pull docker.io/truevoly/oracle-12c mkdir -p /usr/local/oracle/data_temp chmod 777 /usr/local/ ...

  2. 快速部署mysql并开启binlog

    curl -fsSL https://get.docker.com | bash yum -y install docker-ce sudo systemctl start docker sudo s ...

  3. VS2019插件更新慢的解决办法

    VS2019更新巨慢,可以尝试通过以下几个方法解决: 1. 关闭IPV6 关闭IPV6:Win10怎么样禁用IPV6 如何关闭IPV6协议-百度经验 (baidu.com) 2. 选择最快的DNS 百 ...

  4. freeswitch的话单处理

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. 如果对cdr话单要求不高,可以直接使用fs的原始话单文件,使用脚本做一些简单的统计. 环境 CentOS 7.9 freeswitc ...

  5. Greenplum 通过外部表快速导入数据

    通过Greenplum外部表可以快速导入数据 create external table "public"."ext_tablename" ( like &qu ...

  6. 轻量级网络-MobileNetv1 论文解读

    1.相关工作 标准卷积 分组卷积 从 Inception module 到 depthwise separable convolutions 2.MobileNets 结构 2.1,深度可分离卷积 D ...

  7. manim边学边做--通用二维坐标系

    Manim的Axes对象是通用的坐标系对象,之前几篇介绍的数轴和各种坐标平面都是继承Axes对象. Axes对象的主要作用在于创建和管理二维坐标轴,以满足我们制作数学动画时的各种需求. 具体来说,Ax ...

  8. PHP Excel Word 文件转 HTML输出

    ob_end_clean(); $filePath = './123.xls'; //$filePath = './123.docx'; $savePath = './123.html'; //这里记 ...

  9. 禁止http请求自动跳转到https--解决网站使用了HSTS的问题

    前言 目前有些网站支持http和https两种协议访问,有些只支持一种协议访问.根据动态域名安全策略(HSTS),只要该域名在浏览器中访问过一次https,那么,谷歌浏览器会自动将http跳转到htt ...

  10. [OtterCTF 2018]-内存取证-WP

    [OtterCTF 2018] WP [OtterCTF 2018] What the password? 题目描述: you got a sample of rick's PC's memory. ...