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 UI-Draggable 参数集合
Jan 10 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
jquery 笔记 事件
Nov 02 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Vue render深入开发讲解
Apr 13 Javascript
解决linux下node.js全局模块找不到的问题
May 15 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
咖啡的植物学知识
2021/03/03 咖啡文化
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php获取远程文件大小
2015/10/20 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python实现的读写json文件功能示例
2018/06/05 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python将字母转化为数字实例方法
2019/10/04 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
校园新闻广播稿
2014/01/10 职场文书
小学英语教学反思
2014/01/30 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
2015中学教学工作总结
2015/07/22 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL