vue几种编译_GitHub - yangjunlong/compile-vue-demo: 编译vue单文件组件

编译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单文件组件，通过࿱