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在光标位置插入内容的实现代码
Jun 18 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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/02 无线电
PHP新手上路(六)
2006/10/09 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Django 实现下载文件功能的示例
2018/03/06 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
《春笋》教学反思
2014/04/15 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript