v-loalder是什么?
一,是什么:
他就是基于webpack的一个的loader,解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理,核心的作用,就是提取。
二,用途:
vue-loader会解析文件,提取出每个语言块,如果有必要会通过其他loader处理,最后将他们组装成一个commonjs模块;module.exports出一个vue.js组件对象;
1:< temlate>语言块
(1)默认语言:html
(2)每个.vue文件最多包含一个< template>块
(3)内容将被提取为字符串,将编译用作VUE组件的template选项;
2:< script>
(1)默认语言:JS(在监测到babel-loader或者buble-loader配置时,自动支持ES2015)
(2)每个.vue文件最多包含一个< script>块
(3)该脚本在类CommonJS环境中执行(就像通过webpack打包的正常JS模块)。所以你可以require()其他依赖。在ES2015支持下,也可以使用import跟export语法
(4)脚本必须导出Vue.js组件对象,也可以导出由VUE.extend()创建的扩展对象;但是普通对象是更好的选择;
3:< style>
(1)默认语言:css
(2)一个.vue文件可以包含多个< style>标签
(3)这个标签可以有 scoped 或者 module属性来帮助你讲样式封装到当前组件;具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
(4)默认情况下,可以使用style-loader提取内容,并且通过< style>标签动态假如文档的< head>中,也可以配置webpack将所有的styles提取到单个CSS文件中;
4:自定义块
可以在.vue文件中添加额外的自定义块来实现项目的特殊需求;例如< docs>块;vue-loader将会使用标签名来查找对应的webpack loaders来应用到对应的模块上;webpack需要在vue-loader的选项loaders中指定;
vue-loader支持使用非默认语言,比如CSS预处理器,预编译的HTML模板语言,通过设置语言块的lang属性:
Vue Loader 还提供了很多酷炫的特性:
- 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug;
- 允许在一个 .vue 文件中使用自定义块,并对其运用自定义的 loader 链;
- 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理;
- 为每个组件模拟出 scoped CSS;
- 在开发过程中使用热重载来保持状态。
简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用。
v-loalder是什么?相关推荐
- linux怎么卸载webpack,安装webpack后,执行webpack -v命令时报错:SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
- 心音数据库_小V云端数据库 | 2020.9.14—2020.9.18
桂花的芬芳 在雨后空气中弥散开来 似为湿润的情绪 赠予了一丝甜蜜 小V云端数据库 2020.9.14-2020.9.18 资讯情报关键词 健康.示范.安全 V宝体检,助力成长 2020年9月14日上午 ...
- 女士细线毛衣起多少针_潇洒帅气的男童V领开襟毛衣编织,带教程图解
终于又完工一件. 用线:宝宝毛9号8团多用针:ADD2.75,3.0成衣尺寸:衣长43cm,胸围72cm,袖长42cm,肩宽32cm编织过程:1,用另线起针法起222针,织双螺纹5cm,排花,织20c ...
- 【实用】几个实用的webstorm、IDEA编辑器窗口快捷键设置,Alt+V垂直复制当前窗口,Alt+Shift+V将当前窗口复制到另一边的分割窗口显示,Alt+Shift+M移动当前活动窗口到另一边
Alt+V垂直复制当前窗口 Alt+Shift+V将当前窗口复制到另一边的分割窗口显示,Alt+Shift+M移动当前活动窗口到另一边
- 基于持久内存的 单机上亿(128B)QPS -- 持久化 k/v 存储引擎
文章目录 性能数据 设计背景 设计架构 Hash 索引结构 及 PMEM空间管理形态 基本API 及 实现 API 初始化流程 写流程 读流程 删除流程 PMEM Allocator设计 主要组件 空 ...
- KVell 单机k/v引擎:用最少的CPU 来调度Nvme的极致性能
文章目录 前言 KVell背景 业界引擎使用Nvme的问题 CPU 会是 LSM-kv 存储的瓶颈 CPU 也会是 Btree-kv 存储的瓶颈 KVell 设计亮点 及 总体架构实现 KVell 设 ...
- 存储引擎 K/V 分离下的index回写问题
前言 近期在做on nvme hash引擎相关的事情,对于非全序的数据集的存储需求,相比于我们传统的LSM或者B-tree的数据结构来说 能够减少很多维护全序上的计算/存储资源.当然我们要保证hash ...
- linux进程间通信:system V 信号量 生产者和消费者模型编程案例
生产者和消费者模型: 有若干个缓冲区,生产者不断向里填数据,消费者不断从中取数据 两者不冲突的前提: 缓冲区有若干个,且是固定大小,生产者和消费者各有若干个 生产者向缓冲区中填数据前需要判断缓冲区是否 ...
- linux进程间通信:system V 信号量和共享内存实现进程间同步
关于信号量和共享内存的相关描述已经在前几篇提到过: 信号量:即内核维护的一个正整数,可以使用内核提供的p/v接口进行该正整数的+/-操作,它主要用来表示系统中可用资源的个数,协调各个进程有序访问资源, ...
- linux进程间通信:system V 信号量
文章目录 概念描述 通信原理 编程接口 使用流程 编程案例 概念描述 英文:semaphore 简称SEM,主要用来进行进程间同步 本质:内核维护的一个正整数,可对其进行各种+/-操作 分类:syst ...
最新文章
- c# 获取excel单元格公式结果_excel公式应用技巧:文字和数字混合的单元格,如何求和?...
- c语言怎样输出有颜色的迷宫,c语言写的迷宫问题
- websockets_使用Java WebSockets,JSR 356和JSON映射到POJO的
- 开源HTML5应用开发框架 - iio Engine
- Prometheus监控学习笔记之360基于Prometheus的在线服务监控实践
- NHibernate 3.3
- java中的强软弱虚_详解Java的四种引用——强软弱虚,颠覆你的认知!
- A*寻路算法的探寻与改良(一)
- 阿里巴巴java开发手册 《Java开发手册》v1.5.0 华山版.pdf
- 2021-2027全球与中国X射线检测系统市场现状及未来发展趋势
- 计算机类银行招聘考试考什么科目,计算机专业参加银行招聘考试要考哪些科目,除了行..._银行招聘考试_帮考网...
- python画出送花表情图编程_python画微信表情符的实例代码
- python3实现网络爬虫(4)--BeautifulSoup使用(3)
- 【哈工大SCIR】多模态情感分析简述
- 微信支付一直抱签名错误,但是校验通过。
- 毕设 JAVA.JSP网上学习答疑系统论文
- 年前人间尤物,年后惨不忍睹
- [YOLOv7/YOLOv5系列算法改进NO.17]CNN+Transformer——融合Bottleneck Transformers(更新,代码已开放分享)
- 计算机英语重点,计算机英语复习重点.doc
- otn与stn网络_全光网络:OTN与超长距离传输