vue生成静态html文件_vue单文件组件,如何生成.html文件

vue-cli项目怎么生成.html文件?

项目使用了element-ui还有自定义的less文件

vue组件:

这是一段文字

...

生成

...

...

handlerBulder () {

const html = this.$refs.fields.outerHTML

var a = document.createElement('a');

var url = window.URL.createObjectURL(new Blob([html],

{ type: "text/plain;charset='utf-8'" }));

a.href = url;

a.download = 'form.html';

a.click();

window.URL.revokeObjectURL(url);

}

...

我想生成xxx.html的格式如下:

//这里是否可以把所需的element.ui的css片段代码和公共的less文件的css代码加载过来

...

...

...

//是否可以把该组件以及该组件的后代组件的js代码加载过来

...

我通过this.$refs.el.outHTML,生成xxx.html但是只有html片段,css和js无法生成

是否可以通过node.js或者webpack生成上述的格式html文件。

目前我没有什么思路,请教各位大神指点

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++头插法尾插法建立单链表,合并两个有序单链表

A和B是两个单链表&#xff08;带表头结点&#xff09;&#xff0c;其中元素递增有序。设计一个算法&#xff0c;将A和B归 并成一个按元素值非递减有序的链表 C&#xff0c;C由A 和B 中的结点组成。 #include<iostream> #include<stdlib.h>using namespace std;typ…

Java毕业设计—springboot健身房管理系统

一、项目背景介绍&#xff1a; 随着人们生活水平的提高和健康意识的增强&#xff0c;健身行业逐渐兴起并迅速发展。而现代化的健身房管理系统已经成为健身房发展的必备工具之一。传统的健身房管理方式已经无法满足现代化健身房的需求&#xff0c;需要一种更加高效、智能、安全…

C/C++二叉树前序遍历,中序遍历,后序遍历

二叉树的先序遍历&#xff0c;中序遍历&#xff0c;后序遍历 #include <iostream>using namespace std;typedef struct BTNode {char data;struct BTNode* lchild;struct BTNode* rchild; }BTNode;void preorder(BTNode* p) {if(p!NULL){cout<<p->data;preord…

学校校车运营各项安全管理制度_学校校车接送安全管理制度(通用3篇)

学校校车接送安全管理制度(通用3篇)在不断进步的时代&#xff0c;各种制度频频出现&#xff0c;制度是维护公平、公正的有效手段&#xff0c;是我们做事的底线要求。你所接触过的制度都是什么样子的呢&#xff1f;以下是小编为大家整理的学校校车接送安全管理制度(通用3篇)&…

osm数据下载 python_GIS Experience (十):OSM数据获取

参考资料 1 OSM OpenStreetMap 获取城市路网数据及转为ESRI shp数据的方法 2 OSM获取路网数据 &#xff08;数据转换方法对比&#xff09;1 前言OpenStreetMap&#xff08;OSM&#xff09;意在创造一个内容自由且能让所有人编辑的世界地图&#xff0c;详见官网。2 数据获取2.1 …

两个字符串的最长公共子序列长度_程序员编程算法,解决文本相似度问题的最长公共子序列算法!...

在前面我讲解了如何通过最长公共子串来求解两个文本的相似度问题&#xff0c;但它有一定缺陷&#xff0c;举个例子&#xff0c;看下面的两个字符串我爱吃小青菜和各种鲜水果。我很爱吃青菜与各样水果。上面两个字符串&#xff0c;如果通过计算子串来求相似度&#xff0c;会发现…

VOC2007xml转YOLO的txt格式代码

使用方法&#xff08;二选一即可&#xff09;&#xff1a; python 这个文件名.py --xml_dir xml文件路径 --image_dir 图片所在路径 --out_dir 输出文件夹放在和VOC2007同级路径下运行即可 import os import xml.etree.ElementTree as ET import cv2 import argparse from tqd…

ctf up怎么写 write_??零基础写网络爬虫的思路??

网络爬虫&#xff0c;用一句话简单总结&#xff0c;就是一种按照一定的规则&#xff0c;自动的抓取万维网信息的程序或者脚本。写这篇文章的初衷是有个知友私信我说&#xff0c;模仿了很多网上用Python写爬虫的例子&#xff0c;但到了需要自己动手写爬虫的时候又不知道怎么写了…

VMwarestation环境下的centos7(Minimal)静态ip配置(桥接模式)

笔者本来是为了用三台centos7&#xff08;最小化安装版本&#xff09;的虚拟机搭建一个Zookeeper的环境&#xff0c;但是在搭建的过程中遇到了一些问题&#xff0c;遂记录之。 为了便捷&#xff0c;除了希望三台配置了静态ip的虚拟机可以和宿主机之间互相ping通之外&#xff0…

技术系统进化法则包括_技术系统进化论,模式五、技术集成以增加系统功能

阿奇舒勒TRIZ理论三个核心思想&#xff1a;1、无论是一个简单产品还是复杂的技术系统&#xff0c;其核心技术的发展都是遵循着客观的规律发展演变的&#xff0c;即具有客观的进化规律和模式&#xff1b;2、各种技术难题和矛盾的不断解决是推动这种进化过程的动力&#xff1b;3、…

zookeeper一键启动关闭JAVA_HOME在PATH中找不到报错踩坑记

最近看了尚硅谷的zookeeper教程&#xff0c;在集群环境搭建中&#xff0c; 有这么一个脚本zk.sh用来一键启动和查询 #!/bin/bash case $1 in "start"){ for i in zknode2 zknode3 zknode4 doecho ---------- zookeeper $i 启动 ------------ ssh $i "/opt/modu…

里面怎么使用import引用_谈谈模块化的 require 和 import

一、区别require是commonjs的规范&#xff0c;在node中实现的api&#xff0c;import是es的语法&#xff0c;由编译器处理。所以import可以做模块依赖的静态分析&#xff0c;配合webpack、rollup等可以做treeshaking。commonjs导出的值会复制一份&#xff0c;require引入的是复制…

HJ107 求解立方根

https://www.nowcoder.com/practice/caf35ae421194a1090c22fe223357dca 强行二分&#xff0c;这是一种不好的解法&#xff0c;缝缝补补&#xff0c;又臭又长 import java.util.Scanner; import java.math.BigDecimal;public class Main{public static void main(String[] arg…

mysql if exists用法_MySQL中EXISTS的用法

比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(SELECT OrderID FROM Orders o WHERE o.CustomerIDc.CustomerID)这里面的EXISTS是如何运作呢&#xff1f;子查询返回的是OrderId字段&#xff0c;可是外面的查询要找的是Cus…

二叉搜索树的建立和排序

二叉搜索树的建立和排序今天面了一家自研&#xff0c;有一道二叉搜索树的题目&#xff0c;但是自己做的不好 就是有几个学生和成绩&#xff0c;使用树来存储 左子树大于等于root&#xff0c;右节点小于root package org.example;public class Main {public static void main(S…

python绘图矩阵散点图_Python实践:seaborn的散点图矩阵(Pairs Plots)可视化数据

如何快速创建强大的可视化探索性数据分析&#xff0c;这对于现在的商业社会来说&#xff0c;变得至关重要。今天我们就来&#xff0c;谈一谈如何使用python来进行数据的可视化&#xff01;一旦你有了一个很好的被清理过的数据集&#xff0c;下一步就是探索性数据分析(EDA)。EDA…

项目入口_新进展!石家庄地铁项目长安公园站出入口全部封顶

(通讯员 韩静娟)5月3日&#xff0c;伴随着长安公园站C出入口最后一方混凝土的浇筑到位&#xff0c;由中铁隧道局路桥公司承建的石家庄地铁2号线06标长安公园站出入口全部封顶&#xff0c;为石家庄地铁二号线顺利开通打下了坚实的基础。石家庄地铁2号线作为石家庄市南北向骨干线…

echo怎么把日志清空_shell脚本清空系统message日志

1 #/bin/bash2 #此脚本用来清空系统message日志文件3 #author:wyf date:16/10/304 LOG_DIR/var/log5 ROOT_UID06 #必须系统管理员权限才能执行7 if [ "$UID" -ne "${ROOT_UID}" ]8 then9 echo "Must be root to run this script"10 …

一直显示数据格式错误_Excel数据分析,新手最容易犯的10个建表错误

在使用Excel 建立数据表时&#xff0c;养成规范、良好的制表习惯至关重要&#xff0c;这不仅有益于后期数据分析的顺利进行&#xff0c;而且能体现专业素质。下面介绍一些新手容易犯的规范上的错误。1.随意插入空格很多新手在制表时容易随意插入空格&#xff0c;认为这样可以更…

python编程中的运算_Python编程中的四大运算法则

接触过编程的人都知道&#xff0c;编程中的数学知识无处不在&#xff0c;通过数学建模能够解决我们实际生活中的很多问题。当然这并不是说必须要成为一名数学大神才能学编程&#xff0c;但掌握数学知识在编程中的表达方法却是很有必要的&#xff0c;今天南京小码王Python培训班…