Merge pull request #19 from sexdevil/master

aOrz · web-flow · commit c54522c5aae7 · 2018-07-17T21:05:45.000+08:00
mpvue-lint
diff --git a/docs/assets/mpvue-lint/1.png b/docs/assets/mpvue-lint/1.png
diff --git a/docs/assets/mpvue-lint/2.jpg b/docs/assets/mpvue-lint/2.jpg
diff --git a/docs/build/mpvue-lint.md b/docs/build/mpvue-lint.md
@@ -0,0 +1,54 @@
+# mpvue-lint
+
+>针对很多需要h5和小程序页面同构开发的场景，开发者会出现很多h5的vue组件直接搬到mpvue中调试的开发流程。虽然mpvue支持大部分的vue语法，但是仍有些边界
+情况需要开发者自行处理。为了提升开发效率，我们提供mpvue-lint插件。目前有两个功能模块，语法检查模块和内存检查模块
+
+# mpvue-lint 语法检查
+语法检查模块,mpvue-lint检测h5版本的vue组件是否符合mpvue语法规则
+
+##使用方法 npm install mpvue-lint
+构建流中调用，传入entry(array) ,要检查的入口Vue文件列表 ,示例代码：
+```javascript
+const mpvueLint = require('mpvue-lint')
+mpvueLint.build(
+{
+	entry:
+	[
+	   path.resolve('mpvue/page/worldcup/home/index.vue'),
+	   path.resolve('mpvue/page/worldcup/card_detail/index.vue'),
+	   path.resolve('mpvue/page/worldcup/activity_rules/index.vue')
+	]
+})
+```
+
+如果有引用路径的错误，会报白色提示</br>
+如果有template错误，比如组件上用class,绑定click事件等会报**红色**错误名，文件名，和组件名</br>
+如果Vue文件方法里有写法错误，如使用zepto,window,document等，会报**红色**错误名，文件名，方法名，行号</br>
+如果想自定义需要报错的函数调用，请按照**mpvuelint.json**里的格式添加你的函数名，例如,"zepto":true会在 vue文件中所有调用zepto的地方报错提醒</br>
+lint检查非强制阻拦编译过程，FE同学自己根据提醒修改业务代码
+
+运行结果如图：</br>
+<img src="../../assets/mpvue-lint/1.png" width="800" alt="语法检查">
+
+# mpvue-trace 内存检查
+>内存检查模块,mpvue-trace辅助开发者检查操作时数据更新的变化，因为最后小程序更新数据需要调用setData接口，而setData小程序真机是
+通过把JSON对象转换字符串传递给实际的页面的，大块数据会造成页面卡顿，甚至极端情况会造成页面少渲染一部分(更新数据过大会丢弃一部分更新)。
+为了开发者更直观看到mpvue页面每次更新数据量，这个插件会检查每次数据更新后500ms内整个页面的数据更新总量。
+
+##使用方法 npm install mpvue-lint
+在mpvue/你的工作目录/你的页面目录/main.js中加入如下引用
+```javascript
+const mpvueTrace = require('mpvue-lint/mpvue-trace')
+mpvueTrace.trace(Vue); //Vue是当前页面中的Vue实例
+```
+##使用注意！
+上面的调试代码会监听Vue.$updateDataToMP方法并把更新数据转字符串计算大小，会有一定性能损耗，仅做调试trace用，**上线代码一定要去除**。
+
+#源码
+
+> mpvue-lint的源码已在github上开源[github 地址请参见](https://github.com/mpvue/mpvue-lint) 欢迎开发者们根据自己项目的情况灵活增减功能
+
+源码基本原理图：</br>
+<img src="../../assets/mpvue-lint/2.jpg" style="margin:0 auto;display:block;" width="400" alt="语法检查流程">
+
+
diff --git a/docs/build/mpvue-loader.md b/docs/build/mpvue-loader.md
@@ -198,3 +198,212 @@ export default {
 ### checkMPEntry
 在 [项目建构](/build/#module) 文档的这个部分，有讲到需要给所有 `js` 后缀文件增加 `mpvue-loader` ，并且需要加 options，通过这个配置，我们的 loader 才能知道 entry 进来的 js 和 vue 的类型是 app 还是 page，从而做了一些页面类型的区分。
 
+## TypeScript支持
+`mpvue-loader`目前支持用TypeScript来写，功能还在完善中(WIP)。目前实现了用`<script lang="ts" src="./xx.ts"></script>`这种方式的自动识别，并且需要搭配[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)来使用。
+
+### 配置
+
+#### 添加对应的`loader`
+```js
+// webpack.conf.js
+module.exports = {
+  //...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'mpvue-loader',
+        options: {
+          //...
+          ts: [ //添加对应vue的loader
+            'babel-loader',
+            {
+              // loader: 'ts-loader',
+              loader: 'awesome-typescript-loader',
+              options: {
+                // errorsAsWarnings: true,
+                useCache: true,
+              }
+            }
+          ]
+        }
+      },
+      // ts文件的loader
+      {
+        test: /\.tsx?$/, 
+        exclude: /node_modules/,
+        use: [
+          'babel-loader',
+          {
+            loader: 'mpvue-loader',
+            options: {
+              checkMPEntry: true
+            }
+          },
+          {
+            // loader: 'ts-loader',
+            loader: 'awesome-typescript-loader',
+            options: {
+              // errorsAsWarnings: true,
+              useCache: true,
+            }
+          }
+        ]
+      },
+    ]
+  // ...
+  }
+```
+### main.ts
+```ts
+// main.ts
+import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
+import { VueConstructor } from "vue";
+
+interface IMpVue extends VueConstructor {
+  mpType: string
+}
+
+// 添加小程序hooks http://mpvue.com/mpvue/#_4
+Component.registerHooks([
+  // app
+  'onLaunch', // 初始化
+  'onShow', // 当小程序启动，或从后台进入前台显示
+  'onHide', // 当小程序从前台进入后台
+  // pages
+  'onLoad', // 监听页面加载
+  'onShow', // 监听页面显示
+  'onReady', // 监听页面初次渲染完成
+  'onHide', // 监听页面隐藏
+  'onUnload', // 监听页面卸载
+  'onPullDownRefresh', // 监听用户下拉动作
+  'onReachBottom', // 页面上拉触底事件的处理函数
+  'onShareAppMessage', // 用户点击右上角分享
+  'onPageScroll', // 页面滚动
+  'onTabItemTap', //当前是 tab 页时， 点击 tab 时触发 （mpvue 0.0.16 支持）
+])
+
+Vue.config.productionTip = false
+// 在这个地方引入是为了registerHooks先执行
+const MyApp = require('./App.vue').default as IMpVue
+const app = new Vue(MyApp)
+app.$mount()
+```
+### App.vue
+```vue
+<script lang="ts" src="./app.ts"></script>
+<style></style>
+```
+```ts
+//app.ts
+import { Vue, Component } from 'vue-property-decorator'
+declare module "vue/types/vue" {
+  interface Vue {
+    $mp: any;
+  }
+}
+
+// 必须使用装饰器的方式来指定components
+@Component({
+  mpType: 'app', // mpvue特定
+}as any)
+class App extends Vue {
+  // app hook
+  onLaunch() {
+    let opt = this.$root.$mp.appOptions
+  }
+
+  onShow() {
+  }
+
+  onHide() {
+  }
+
+  mounted() { // vue hook
+  }
+}
+
+export default App
+```
+### 页面
+```vue
+<!-- page.vue -->
+<template>
+  <div class="counter-warp">
+    <p>Mpvue</p>
+    <p>ts value {{ ver }}</p>
+    <card text="card component"></card>
+    <comp-b text="card component"></comp-b>
+    <a :href="AppUrls.COUNTER" class="home">去往vuex</a>
+  </div>
+</template>
+<!--必须指定为ts-->
+<script lang="ts" src="./index.ts"></script>
+<style></style>
+```
+```ts
+// index.ts
+import { Vue, Component } from 'vue-property-decorator'
+import Card from '@/components/card.vue' // mpvue目前只支持的单文件组件
+import CompB from '@/components/compb.vue' // mpvue目前只支持的单文件组件
+// 必须使用装饰器的方式来指定component
+@Component({
+  components: {
+    Card,
+    CompB, //注意，vue的组件在template中的用法，`CompB` 会被转成 `comp-b`
+  },
+})
+class Index extends Vue {
+  ver: number = 123
+  
+  onShow() { // 小程序 hook
+  }
+
+  mounted() { // vue hook
+  }
+}
+
+export default Index
+```
+
+### 组件
+```vue
+<!-- card.vue -->
+<template>
+  <div>
+    <p class="card">
+      From Card {{text}} {{ver}}
+    </p>
+  </div>
+</template>
+<!--必须指定为ts-->
+<script lang="ts" src="./card.ts"></script>
+<style></style>
+```
+```ts
+// card.ts
+import { Vue, Component, Prop } from 'vue-property-decorator'
+// 必须使用装饰器的方式来指定component
+@Component
+class Card extends Vue {
+  @Prop({ default: '1' }) //注意用法！
+  text: string;
+  
+  ver: number = 2;
+
+  onShow() {
+  }
+
+  onHide() {
+  }
+
+  mounted() { // vue hook
+  }
+}
+
+export default CompB
+```
+
+### 示例Demo
+
+示例: [mpvue-ts-demo](https://github.com/WingGao/mpvue-ts-demo)
diff --git a/docs/index.md b/docs/index.md
@@ -54,6 +54,7 @@ Owl.start({
 - [mpvue-webpack-target](/build/mpvue-webpack-target) webpack 构建目标
 - [postcss-mpvue-wxss](/build/postcss-mpvue-wxss) 样式代码转换预处理工具
 - [px2rpx-loader](/build/px2rpx-loader) 样式转化插件
+- [mpvue-lint](/build/mpvue-lint) 开发辅助插件，包括语法检查，内存检查等功能
 - 其它
 
 
diff --git a/docs/mpvue/index.md b/docs/mpvue/index.md
@@ -390,6 +390,10 @@ mpvue 可以支持小程序的原生组件，比如： `picker,map` 等，需要
 </picker>
 ```
 
+## TypeScript支持
+
+目前`mpvue-loader`是可以支持TypeScript选项的，配置方法[在此](/build/mpvue-loader/#typescript)。具体Demo可以见[mpvue-ts-demo](https://github.com/WingGao/mpvue-ts-demo)
+
 ## 最佳实践
 
 **1. 精简 data 数据**
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -14,6 +14,7 @@ pages:
 - [build/mpvue-webpack-target.md, Build ]
 - [build/postcss-mpvue-wxss.md, Build]
 - [build/px2rpx-loader.md, Build]
+- [build/mpvue-lint.md, Build]
 - [qa.md, Q&A]
 
 extra:
