element-ui 本地化使用教程详解


Posted in Javascript onOctober 28, 2019

起因:

用 element-ui 时,本人是没有安装其它环境,而是直接用链接引入,这个带来的问题是,每次打开网页都很慢,于是想本地化,但是发现只是下载两个引入的 js 和 css 是不够的,很多功能会无法使用,打开 DevTools 发现是还有别的资源本地没有。

element-ui 本地化使用教程详解

再次前往官网,找到下载页面,结果发现并没有给直接的下载链接。。没办法了,自己写个脚本来下载。最后成功离线化。

下载后在 html 中引入:

<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css" rel="external nofollow" >

<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="element-ui/lib/index.js"></script>

element-ui 本地化使用教程详解

下载脚本:

临时起意做的,代码里面可能会有些瑕疵,但是不影响使用,本人已经成功下载并使用。
路径可以自己更改,注意不要从 Windows 资源管理器复制,Linux 系统当我没说。

package com.ycr;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;

public class Main {
 static String fileP = "C:\\Users\\YCR\\Desktop\\element-ui\\"; // 不要从资源管理器复制,有的字符会有问题,导致无法创建文件
 static String urlP = "https://unpkg.com/browse/element-ui@2.12.0/";
 static String urlF = "https://unpkg.com/element-ui@2.12.0/";
 public static void main(String[] args){
 try {
  GetPage("");
 } catch (Exception e) {
  e.printStackTrace();
 }
 }
 static void GetPage(String after) throws Exception {
 System.out.println(urlP + after);
 new File(fileP + after).mkdir();
 HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
 http.setRequestMethod("GET");
 http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
 http.connect();
 if(http.getResponseCode() == 200) {
      InputStream inputStream = http.getInputStream();
      byte [] buffer = new byte[1024];
      ArrayList<byte []> byteList = new ArrayList<>();
      ArrayList<Integer> byteLength = new ArrayList<>();
      int length;
      int totalLength = 0;
      while( (length = inputStream.read(buffer)) != -1 ) {
       byteList.add(buffer);
       byteLength.add(length);
       totalLength += length;
       buffer = new byte[1024];
      }
      http.disconnect();
      byte [] all;
      all = new byte[totalLength];
      totalLength = 0;
      while(byteList.size() != 0) {
       System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
       totalLength += byteLength.get(0);
       byteList.remove(0);
       byteLength.remove(0);
      }
      String content = new String(all, StandardCharsets.UTF_8);
      all = null;
      content = content.split("tbody")[1];
      String [] us = content.split("href=\"");
      for(int i = 1; i < us.length; i ++) {
       String href = us[i].split("\"", 2)[0];
       if(href.equals("../")) {
      continue;
     }
       if(href.charAt(href.length() - 1) == '/') {
       GetPage(after + href);
       } else {
       GetFile(after + href);
       }
      }
    } else {
  GetPage(after);
 }
 }
 static void GetFile(String url) throws Exception{
 System.out.println(url);
 HttpURLConnection http;
 http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
 http.setRequestMethod("GET");
 http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
 http.connect();
 if(http.getResponseCode() == 200) {
      InputStream inputStream = http.getInputStream();
      byte [] buffer = new byte[1024];
      ArrayList<byte []> byteList = new ArrayList<>();
      ArrayList<Integer> byteLength = new ArrayList<>();
      int length;
      int totalLength = 0;
      while( (length = inputStream.read(buffer)) != -1 ) {
       byteList.add(buffer);
       byteLength.add(length);
       totalLength += length;
       buffer = new byte[1024];
      }
      http.disconnect();
      byte [] all;
      all = new byte[totalLength];
      totalLength = 0;
      while(byteList.size() != 0) {
       System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
       totalLength += byteLength.get(0);
       byteList.remove(0);
       byteLength.remove(0);
      }
      File f = new File(fileP + url.replaceAll("/", "\\\\"));
      f.createNewFile();
      FileOutputStream fos = new FileOutputStream(f, false);
      fos.write(all);
      fos.flush();
      fos.close();
 } else {
  GetFile(url);
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue 全局环境切换问题
Oct 27 #Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
You might like
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
前端如何实现动画过渡效果
2021/02/05 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
目标责任书范本
2014/04/16 职场文书
小学一年级评语大全
2014/04/22 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers