单页面组件的<template>是怎么被获取到的

Question

单页面组件的<template>是怎么被获取到的？vue router用component来映射组件，比如说 component: () => import('../pages/demo')，那应该只能获取到export的内容啊。是怎么获取到<template>内容的？

<template>
  <ax-button>按钮</ax-button>
</template>
<script>
export default {
  name: 'Button'
}
</script>

比如这个，export根本没导出<template>相关啊，求大佬解惑

Answer 1

导入语法引用了demo文件
webpack找到demo文件
将demo文件内容交给vue-loader
vue-loader将原始的vue文件拆分为template，js，css三部分
template被编译成为渲染函数放到了js里
js和css再分别交给babel-loader，css-loader style-loader处理

Answer 2

1 单文件组件

• vue 的单文件组件是官方提供的一种用来组织组件代码的形式，
• 该文件以 .vue 为后缀，
• 该文件会被 vue-cli内置的 webpack解析生成对应的 javascript、html、css文件
• 单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中
• 一个单文件组件最少必须包含 template，可以不需要 script 和 style

2 src 属性

我们还可以通过 src 属性把文件分离到单独的文件中

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源

Answer 3

可以看看 vue-loader的相关原理介绍