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解决图片路径不存在执行替换路径
Feb 06 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python实现交并比IOU教程
2020/04/16 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
葬礼司仪主持词
2014/03/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书