feat: 集成 vue-function-api

  - ts: 修复类型声明
  - ts: vue 类型加强 拆分

doc/@types/index.d.ts

@@ -185,7 +185,7 @@ declare namespace Doc {
        * path
        *  * /
        */
-      interface index extends asyncData {
+      interface app extends asyncData {
         serverStore: {
           hello: string
         }

doc/@types/shims-vue-options.d.ts

@@ -0,0 +1,9 @@
+
+import Vue from 'vue'
+import { Trouter } from '@types'
+
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    asyncData?: (this: void, context: Trouter.asyncData) => void
+  }
+}

doc/@types/shims-vue.d.ts

@@ -1,4 +1,4 @@
 declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
-}
+}

doc/build/webpack.base.conf.babel.js

@@ -6,6 +6,7 @@ export default function(config, { resolve }) {
     },
     resolve: {
       alias: {
+        vue: resolve('node_modules/vue'),
         public: resolve('public'),
         src: resolve('src'),
         store$: resolve('src/store/index.ts')

doc/package.json

@@ -35,14 +35,12 @@
     "tslib": "^1.9.3",
     "typescript": "^3.4.5",
     "vue": "^2.6.10",
-    "vue-class-component": "^6.3.2",
+    "vue-function-api": "^2.1.2",
     "vue-loader": "^15.4.2",
-    "vue-property-decorator": "^7.2.0",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.6.10",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1",
-    "vuex-class": "^0.3.1",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {

doc/src/App.vue

@@ -1,24 +1,22 @@
 <template>
-<div id="app">
-  <transition name="fade"
-    mode="out-in">
-    <router-view class="view"></router-view>
-  </transition>
-</div>
+  <div id="app">
+    <transition name="fade"
+      mode="out-in">
+      <router-view class="view"></router-view>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
-import { State } from 'vuex-class'
-import { Watch, Prop } from 'vue-property-decorator'
+import { value, computed, watch, onMounted } from 'vue-function-api'
 
-@Component({
-  components: {},
-})
-export default class App extends Vue {
-  mounted() {
-    console.log('init APP')
-  }
+export default {
+  name: 'App',
+  setup() {
+    onMounted(() => {
+      console.log(`mounted`)
+    })
+    return {}
+  },
 }
 </script>

doc/src/app.ts

@@ -4,6 +4,9 @@ import App from 'src/App.vue'
 import { createRouter } from './router'
 import { createStore } from 'store'
 
+import { plugin } from 'vue-function-api'
+Vue.use(plugin)
+
 // Expose a factory function that creates a fresh set of store, router,
 // app instances on each call (which is called for each SSR request)
 /**

doc/src/entry-server.ts

@@ -1,6 +1,6 @@
 import { createApp } from './app'
 import { callComponentsHookWith } from 'src/router/router-util'
-import { isProduction } from 'src/envs'
+import { isProduction, hostGlobal } from 'src/envs'
 
 function isMobileUA(ua) {
   // 自己实现吧
@@ -29,6 +29,8 @@ export default context => {
 
     const { app, router, store } = createApp()
 
+    hostGlobal.store = store
+
     store.commit('SET_IS_MOBILE', isMobile)
 
     const route = router.resolve(url).route

doc/src/router/index.js

@@ -1,16 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-import Component from 'vue-class-component'
-import { isServer } from 'src/envs'
-
-// TODO: 问题: 用 vue-class-component 写的 modal (PreviewModal 等) 需要在引入组件前 register router hooks，但是结果还是没调到
-// vue-class-component vue-router hooks
-if (!isServer) {
-  // console.log('register router hook');
-  Component.registerHooks(['beforeRouteEnter', 'beforeRouteUpdate', 'beforeRouteLeave'])
-}
-
 Vue.use(Router)
 
 // Home Page

doc/src/views/index.vue

@@ -6,47 +6,42 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
-import { State } from 'vuex-class'
-import { Watch, Prop } from 'vue-property-decorator'
+import { value, computed, watch, onMounted } from 'vue-function-api'
 
 import { Trouter } from '@types'
 
 import { commit, getState } from 'src/store'
-import { isServer } from 'src/envs'
+import { isServer, hostGlobal } from 'src/envs'
 
-@Component({
-  components: {},
-})
-export default class APP extends Vue {
+type AsyncData = Trouter.asyncData.app
 
-  get hello() {
-    // return ''
-    return getState(this.$store, 'hello')
-  }
-
-  get testHotLoadingVuex() {
-    // return ''
-    return getState(this.$store, 'testHotLoadingVuex')
-  }
-
-  static asyncData({ store, serverStore }: Trouter.asyncData.index) {
+export default {
+  name: 'index',
+  props: {},
+  asyncData({ store, serverStore }: AsyncData) {
     console.log('asyncData', serverStore)
     if (!isServer) {
       console.log('static asyncData 在本地也会被执行一般 但是没有中间件提供数据支撑!')
     }
     if (serverStore && serverStore.hello) {
       commit(store, 'SET_HELLO', serverStore)
     }
-  }
-
-  mounted() {
-    console.log('init Views')
-  }
-
-  addTestHotLoadingVuex() {
-    commit(this.$store, 'SET_testHotLoadingVuex', { number: 1 })
-  }
+  },
+  setup(props, context) {
+    const hello = computed(() => getState(hostGlobal.store, 'hello'))
+    const testHotLoadingVuex = computed(() => getState(hostGlobal.store, 'testHotLoadingVuex'))
+
+    onMounted(() => {
+      console.log('init Views')
+    })
+
+    return {
+      hello,
+      testHotLoadingVuex,
+      addTestHotLoadingVuex() {
+        commit(hostGlobal.store, 'SET_testHotLoadingVuex', { number: 1 })
+      }
+    }
+  },
 }
 </script>

doc/yarn.lock

@@ -8662,10 +8662,6 @@ vm-browserify@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
 
-vue-class-component@^6.2.0, vue-class-component@^6.3.2:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"
-
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -8677,6 +8673,12 @@ vue-eslint-parser@^2.0.3:
     esquery "^1.0.0"
     lodash "^4.17.4"
 
+vue-function-api@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/vue-function-api/-/vue-function-api-2.1.2.tgz#ba43d1b379b0a862daeb0dac3a63069eecefa5e6"
+  dependencies:
+    tslib "^1.9.3"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -8706,12 +8708,6 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-property-decorator@^7.2.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-7.3.0.tgz#d50d67f0b0f1c814f9f2fba36d6eeccbcc62dbb6"
-  dependencies:
-    vue-class-component "^6.2.0"
-
 vue-router@^3.0.1:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
@@ -8751,10 +8747,6 @@ vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
 
-vuex-class@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.2.tgz#c7e96a076c1682137d4d23a8dcfdc63f220e17a8"
-
 vuex-router-sync@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz#1a225c17a1dd9e2f74af0a1b2c62072e9492b305"