单文件

介绍单文件编译开发特性，包括单文件中有哪些部分以及如何进行ide配置等

介绍

按照小程序的文件规范，app & page & component 的组成部分都是四个文件，js, wxss, wxml, json; 多文件的形式在开发上体验并不是特别友好，使用过vue的同学都知道，单文件的开发模式更内聚，更可维护。因此mpx也提供了单文件开发模式，文件扩展名为 .mpx

通过 webpack 构建工具和 mpx-loader 可以将文件扩展名为 .mpx 的 single file component 转换成小程序所需要的四个文件。

这四个文件对应于单文件中的四个区域

基础例子

  1. <!--对应wxml文件-->
  2. <template>
  3.   <view>hello mpx</view>
  4. </template>
  5. <!--对应js文件-->
  6. <script>
  7. </script>
  8. <!--对应wxss文件-->
  9. <style lang="stylus">
  10. </style>
  11. <!--对应json文件-->
  12. <script type="application/json">
  13. </script>

编辑器/IDE高亮、提示

IntelliJ

如果使用IntelliJ系IDE开发，可将mpx后缀文件关联到vue类型，按vue解析。
关联文件类型
但会报一个warning提示有重复的script标签，关闭该警告即可。
关闭警告

vscode

.mpx采用类似于.vue的单文件语法风格，在Visual Studio Marketplace中获取vue语法高亮插件
然后通过配置vscode扩展语言
，将.mpx绑定到.vue语法的支持