全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

vue-loader的实现原理是什么

发布时间:2023-06-29 17:50:00
发布人:zyh

  一. vue-loader的作用是什么

  1.首先我们需要达成共识的是,目前浏览器,只能识别普通的html、css、javascript。

  2.但是为了能够方便使用vue的组件化开发,需要我们将代码写在.vue单文件组件中。

  3..vue文件,以及其内部的template、style、script区域代码,不能直接交给浏览器去解析,因为它解析不了。

  4.所以我们需要一个vue-loader进行.vue单文件组件代码的转换,也就是

  5..vue方便开发 ------> vue-laoder协助翻译 -----> 浏览器才能展示

vue-loader的实现原理是什么

  二. vue-loader 工作原理

  vue-loader 的工作流程, 简单来说,分为以下几个步骤:

  1.将一个 .vue 文件 切割成 template、script、styles 三个部分。

  2.template 部分 通过 compile 生成 render、 staticRenderFns。

  3.获取 script 部分 返回的配置项对象 scriptExports。

  4.styles 部分,会通过 css-loader、vue-style-loader, 添加到 head 中, 或者通过 css-loader、MiniCssExtractPlugin 提取到一个 公共的css文件 中。

vue-loader的实现原理是什么

  5.使用 vue-loader 提供的 normalizeComponent 方法, 合并 scriptExports、render、staticRenderFns, 返回 构建vue组件需要的配置项对象 - options, 即 {data, props, methods, render, staticRenderFns...}。

#vue-loader的实现原理

相关文章

直播0人观看怎么回事

2023-09-19

短视频同时发抖音和快手好吗

2023-09-19

新人如何在短视频平台赚钱的方法有哪些

2023-09-19

做短视频准备工作有哪些

2023-09-19

三点教你完全了解自己账号的粉丝画像

2023-09-19

做短视频是全职好还是兼职

2023-09-19
在线咨询 免费试学 教程领取