编译vue单文件组件
背景
Vue官方定义了一种名叫单文件组件(SFC)规范的*.vue文件,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 、
{
{ msg }}
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
.example {
color: red;
}
This could be e.g. documentation for the component.
为此Vue的官方提供了vue-loader,它会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 ES Module,它的默认导出是一个 Vue.js 组件选项的对象。
vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以像下面这样使用 Sass 语法编写样式:
/* write Sass! */
开始
大部分情况下我们开发Vue项目是通过vue-cli这个脚手架快速生成一个项目骨架而开始的
vue init webpack my-vue-project
然后我们在这个项目中编写.vue单文件组件,通过