vue生成静态html文件_是否可以将Vue.js模板编译为静态HTML和CSS文件?
最近我爱上了Vue.js的single file components。让组件的模板和样式彼此接近非常好,现在我发现我编写的bug比现在少很多,因为它很容易将页面的一部分分解并在多个地方使用。是否可以将Vue.js模板编译为静态HTML和CSS文件?
我想知道是否可以将此单文件组件结构扩展为生成静态HTML页面,而不涉及Vue。
例如,假设我想要一个包含标题,节和页脚的主“内容”div的页面。使用Vue.js,我可以创建'header','section'和'footer'组件,并使用JavaScript在页面加载后实例化它们。因为页面的每个部分都在它自己的组件中,所以一个组件中的CSS不会影响另一个组件,并且我有更清晰的文件树来编辑。
然而,这似乎有点浪费,因为这些组件不实际的互动:我没有使用v-model或v-bind或v-on,我只是用Vue.js,因为它让我的页面独立的部分了。这也意味着,如果JavaScript被禁用,我的页面将无法工作,因为每个元素(保存主要内容div)都依赖于Vue的可用性。
那么有没有什么办法可以编译.vue文件,而不是在运行时使用Vue.js加载这些组件的页面,而是分隔不带任何JavaScript呈现的HTML和CSS文件?
理想情况下,我有一个组件 'greeting.vue':
Hello!
.greeting { color: red; }
一个页面中使用:
而这将汇编成两个文件:与HTML页面模板编译和预渲染,以及包含所有组件样式的CSS文件。然后我可以将生成的样式表包含在页面中,并且所有组件都将被样式化。
我看过vue-loader和vueify,但我不明白他们在做什么,因为我没有使用Webpack或Browserify。
是我想要做的可能吗?
2017-03-17
Ben S
vue生成静态html文件_是否可以将Vue.js模板编译为静态HTML和CSS文件?相关推荐
- vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
- dom vue 加载完 执行_前端面试题——Vue
前言 前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
- vue router name命名规范_超完整的Vue入门指导
脚本之家 你与百万开发者在一起 作者 | kiba518出品 | 脚本之家(ID:jb51net)前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一 ...
- mfc检测一个目录是否产生新文件_细数Java8中那些让人纵享丝滑的文件操作
在丑陋的 Java I/O 编程方式诞生多年以后,Java终于简化了文件读写的基本操作. 打开并读取文件对于大多数编程语言来是非常常用的,由于 I/O 糟糕的设计以至于很少有人能够在不依赖其他参考代码 ...
- dom vue 加载完 执行_前端面试题Vue
前言 前几天整理了一些 html + css + JavaScript 常见的面试题,然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴. 如果文章中有出现 ...
- vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
- python输出日志到文件_【已解决】Python中,如何让多个py文件的logging输出到同一个日志log文件...
[问题] 有一个比较长的python脚本文件,其中关于log日志输出,用的是logging,对应初始化代码为:logging.basicConfig( level = logging.DEBUG, f ...
- ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
- python什么是入口文件_小问题大隐患:如何正确设置 Python 项目的入口文件?
有一位同学提到了 Python 找不到模块的问题: 问题涉及到的代码结构和代码截图如下: 这个问题的解决方法非常简单,就是把start.py文件从bin文件夹移出来就好了. 但如果对这个问题进一步分析 ...
- html文件显示不了box,Workbox.js registerNavigationRoute找不到/加载html文件
我几乎完全设置为具有应用程序shell体系结构的pwa,使用像前端(但使用mithril作为渲染引擎)的反应,并使用express node.js后端和ssr,但努力在最后一个问题上过去.Workbo ...
最新文章
- 串口流控--软件流控与硬件流控
- thinkbook14 2021款电脑买来后发现:关机后电源指示灯仍然是亮的
- 嵌入式系统实验 构建嵌入式Linux系统,《嵌入式系统与开发》构建嵌入式Linux系统-实验报告.doc...
- docker命令行解析以及如何向服务器端发送请求(docker源码学习一)
- HDU - 6356 Glad You Came(线段树)
- json java对象 简书_Java 对象的 Json 化与反 Json 化
- (56)zabbix Screens视图配置
- 实验——Windows常用网络测试命令
- 【Linux系统编程学习】 静态库的制作与使用
- 【转】VS中常用图标提示含义
- windows php sqlite,如何在Apache 2.4(Windows 7)上为PHP 5.6.14配置SQLite3?
- Js高级(1) 事件11.30
- 20个使用Bootstrap制作的前端框架网站案例
- php微信自动登录,利用php怎么实现一个自动登录微信并获取昵称的功能
- 《从零开始学Swift》学习笔记(Day 45)——重写方法
- spring自动注入bean
- 浅谈IAST,DAST,SAST之区别
- Redis 的key设计技巧缓存问题
- 阿里云商标注册流程步骤
- IconFont使用方式简介
热门文章
- CentOS 7.X配置连接网络
- 《VMware Virtual SAN权威指南》一2.2.2 VSAN Ready Nodes
- Google I/O 还没开始,我们先来看点什么?
- Oracle Active database duplication
- SQL Server2005如何进行数据库定期备份
- 《MySQL必知必会》学习笔记——第六章(过滤数据)
- ios13 文件 连接服务器 您已离线,iOS13,终于可以屏蔽系统更新了
- 网络编程与分层协议设计:基于linux平台实现,网络编程与分层协议设计基于Linux平台实现[按需印刷]...
- fastcopy会损坏硬盘_绚丽多彩 卓有不凡 三星移动固态硬盘T5金属红新品评测
- 计算机专业学不学ps,慎重!不建议你报的院校专业,是因为真的考不上!