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 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
php5中类的学习
2008/03/28 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python实现数据库并行读取和写入实例
2017/06/09 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python实现图片转字符小工具
2019/04/30 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python剪切视频与合并视频的实现
2020/03/03 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
利用python爬取有道词典的方法
2020/12/08 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
售后专员岗位职责
2013/12/08 职场文书
个人求职信范文分享
2013/12/13 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
仓库管理计划书
2014/05/04 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
阿甘正传观后感
2015/06/01 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
Golang map映射的用法
2022/04/22 Golang