diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 574ad5b622..077c0a146a 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -12,8 +12,8 @@ jobs:
       - uses: technote-space/get-diff-action@v4
         with:
           PATTERNS: |
-            +(docs|docs-vuepress)/**/*
-            +(docs|docs-vuepress)/.*/**/*
+            +(docs|docs-vitepress)/**/*
+            +(docs|docs-vitepress)/.*/**/*
       # vuepress生成最终文档
       - name: generate docs file
         if: env.GIT_DIFF
@@ -30,6 +30,6 @@ jobs:
           username: ${{ secrets.DOCS_SERVER_USER }}
           key: ${{ secrets.DOCS_SERVER_KEY }}
           command_timeout: "20m"
-          source: "./docs-vuepress/.vuepress/dist/"
+          source: "./docs-vitepress/.vitepress/dist/"
           strip_components: 4
           target: "${{ secrets.DOCS_SERVER_DIR }}"
diff --git a/.gitignore b/.gitignore
index 684ff00936..4680643a94 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,8 @@ package-lock.json
 pnpm-lock.yaml
 yarn.lock
 .DS_Store
-docs-vuepress/.vuepress/dist
 elevate/
-packages/webpack-plugin/lib/runtime/components/react/dist/
\ No newline at end of file
+docs-vitepress/.vitepress/dist
+docs-vitepress/.vitepress/cache
+dev-dist
+packages/webpack-plugin/lib/runtime/components/react/dist/
diff --git a/docs-vitepress/.vitepress/config.ts b/docs-vitepress/.vitepress/config.ts
new file mode 100644
index 0000000000..a33b3513f7
--- /dev/null
+++ b/docs-vitepress/.vitepress/config.ts
@@ -0,0 +1,385 @@
+import { defineConfig } from "vitepress"
+import { withPwa } from "@vite-pwa/vitepress"
+
+const sidebar = {
+    "/guide/": [
+        {
+            text: "基础",
+            collapsable: false,
+            items: [
+                { text: "快速开始", link: "/guide/basic/start" },
+                { text: "介绍", link: "/guide/basic/intro" },
+                { text: "单文件开发", link: "/guide/basic/single-file" },
+                { text: "IDE 高亮配置", link: "/guide/basic/ide" },
+                { text: "模板语法", link: "/guide/basic/template" },
+                { text: "CSS 处理", link: "/guide/basic/css" },
+                { text: "数据响应", link: "/guide/basic/reactive" },
+                {
+                    text: "类名样式绑定",
+                    link: "/guide/basic/class-style-binding",
+                },
+                { text: "条件渲染", link: "/guide/basic/conditional-render" },
+                { text: "列表渲染", link: "/guide/basic/list-render" },
+                { text: "事件处理", link: "/guide/basic/event" },
+                { text: "双向绑定", link: "/guide/basic/two-way-binding" },
+                { text: "自定义组件", link: "/guide/basic/component" },
+                { text: "获取组件实例/节点信息", link: "/guide/basic/refs" },
+                {
+                    text: "模版内可选链表达式",
+                    link: "/guide/basic/option-chain",
+                },
+            ],
+        },
+        {
+            text: "进阶",
+            collapsable: false,
+            items: [
+                { text: "状态管理（store）", link: "/guide/advance/store" },
+                { text: "状态管理（pinia）", link: "/guide/advance/pinia" },
+                { text: "使用 mixin", link: "/guide/advance/mixin" },
+                { text: "使用 npm", link: "/guide/advance/npm" },
+                { text: "使用分包", link: "/guide/advance/subpackage" },
+                { text: "分包异步化", link: "/guide/advance/async-subpackage" },
+                { text: "跨平台", link: "/guide/advance/platform" },
+                { text: "国际化 i18n", link: "/guide/advance/i18n" },
+                { text: "包体积分析", link: "/guide/advance/size-report" },
+                { text: "图像资源处理", link: "/guide/advance/image-process" },
+                { text: "原生渐进迁移", link: "/guide/advance/progressive" },
+                {
+                    text: "原生能力兼容",
+                    link: "/guide/advance/ability-compatible",
+                },
+                { text: "小程序插件", link: "/guide/advance/plugin" },
+                {
+                    text: "自定义路径",
+                    link: "/guide/advance/custom-output-path",
+                },
+                {
+                    text: "使用原子类",
+                    link: "/guide/advance/utility-first-css",
+                },
+                { text: "SSR", link: "/guide/advance/ssr" },
+                {
+                    text: "依赖注入（Provide/Inject）",
+                    link: "/guide/advance/provide-inject",
+                },
+                { text: "编译配置", link: "/guide/advance/build-config" },
+            ],
+        },
+        {
+            text: "跨端",
+            collapsable: false,
+            items: [
+                { text: "跨端输出基础", link: "/guide/platform/basic" },
+                { text: "跨端输出 RN", link: "/guide/platform/rn" },
+            ],
+        },
+        {
+            text: "组合式 API",
+            collapsable: false,
+            items: [
+                {
+                    text: "组合式 API",
+                    link: "/guide/composition-api/composition-api",
+                },
+                {
+                    text: "响应式 API",
+                    link: "/guide/composition-api/reactive-api",
+                },
+            ],
+        },
+        {
+            text: "工具",
+            collapsable: false,
+            items: [
+                { text: "使用TypeScript开发小程序", link: "/guide/tool/ts" },
+                { text: "单元测试", link: "/guide/tool/unit-test" },
+                { text: "E2E自动化测试", link: "/guide/tool/e2e-test" },
+            ],
+        },
+        {
+            text: "拓展",
+            collapsable: false,
+            items: [
+                { text: "网络请求", link: "/guide/extend/fetch" },
+                { text: "API 转换", link: "/guide/extend/api-proxy" },
+                { text: "数据 Mock", link: "/guide/extend/mock" },
+            ],
+        },
+        {
+            text: "理解",
+            collapsable: false,
+            items: [
+                {
+                    text: "Mpx运行时增强原理",
+                    link: "/guide/understand/runtime",
+                },
+                { text: "Mpx编译构建原理", link: "/guide/understand/compile" },
+            ],
+        },
+        {
+            text: "迁移",
+            collapsable: false,
+            items: [
+                { text: "从 2.8 升级至 2.9", link: "/guide/migrate/2.9" },
+                { text: "从 2.7 升级至 2.8", link: "/guide/migrate/2.8" },
+                { text: "从旧版本迁移至 2.7", link: "/guide/migrate/2.7" },
+                {
+                    text: "mpx-cli v2 迁移到 v3",
+                    link: "/guide/migrate/mpx-cli-3",
+                },
+            ],
+        },
+    ],
+    "/api/": [
+        {
+            text: "API",
+            collapsable: false,
+            items: [
+                { text: "API 参考", link: "/api/" },
+                { text: "全局配置", link: "/api/app-config" },
+                { text: "全局 API", link: "/api/global-api" },
+                { text: "实例 API", link: "/api/instance-api" },
+                { text: "Store API", link: "/api/store-api" },
+                { text: "模板指令", link: "/api/directives" },
+                { text: "编译构建", link: "/api/compile" },
+                { text: "内建组件", link: "/api/builtIn" },
+                { text: "响应式 API", link: "/api/reactivity-api" },
+                { text: "组合式 API", link: "/api/composition-api" },
+                { text: "选项式 API", link: "/api/optional-api" },
+                { text: "周边拓展", link: "/api/extend" },
+            ],
+        },
+    ],
+    "/articles/": [
+        {
+            text: "文章",
+            collapsable: false,
+            items: [
+                { text: "滴滴开源小程序框架Mpx", link: "/articles/1.0" },
+                {
+                    text: "Mpx 发布2.0，完美支持跨平台开发",
+                    link: "/articles/2.0",
+                },
+                {
+                    text: "小程序框架运行时性能大测评",
+                    link: "/articles/performance",
+                },
+                {
+                    text: "小程序开发者，为什么你应该尝试下MPX",
+                    link: "/articles/mpx1",
+                },
+                { text: "Mpx 小程序框架技术揭秘", link: "/articles/mpx2" },
+                {
+                    text: "滴滴出行小程序体积优化实践",
+                    link: "/articles/size-control",
+                },
+                {
+                    text: "使用Typescript新特性Template Literal Types完善链式key的类型推导",
+                    link: "/articles/ts-derivation",
+                },
+                {
+                    text: "Mpx2.7 版本正式发布，大幅提升编译构建速度",
+                    link: "/articles/2.7-release",
+                },
+                {
+                    text: "Mpx2.8 版本正式发布，使用组合式 API 开发小程序",
+                    link: "/articles/2.8-release",
+                },
+                {
+                    text: "Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",
+                    link: "/articles/2.9-release",
+                },
+                {
+                    text: "小程序跨端组件库 Mpx-cube-ui 开源啦",
+                    link: "/articles/mpx-cube-ui",
+                },
+                {
+                    text: "@mpxjs/cli 插件化改造",
+                    link: "/articles/mpx-cli-next",
+                },
+                {
+                    text: "Mpx 小程序单元测试能力建设与实践",
+                    link: "/articles/unit-test",
+                },
+            ],
+        },
+    ],
+}
+
+const algoliaTranslations = {
+    button: {
+        buttonText: "搜索",
+    },
+    modal: {
+        searchBox: {
+            resetButtonTitle: "清除查询条件",
+            resetButtonAriaLabel: "清除查询条件",
+            cancelButtonText: "取消",
+            cancelButtonAriaLabel: "取消",
+        },
+        startScreen: {
+            recentSearchesTitle: "搜索历史",
+            noRecentSearchesText: "没有搜索历史",
+            saveRecentSearchButtonTitle: "保存到搜索历史",
+            removeRecentSearchButtonTitle: "从搜索历史中移除",
+            favoriteSearchesTitle: "收藏",
+            removeFavoriteSearchButtonTitle: "从收藏中移除",
+        },
+        errorScreen: {
+            titleText: "无法获取结果",
+            helpText: "你可能需要检查你的网络连接",
+        },
+        footer: {
+            selectText: "选择",
+            navigateText: "切换",
+            closeText: "关闭",
+            searchByText: "搜索供应商",
+        },
+        noResultsScreen: {
+            noResultsText: "无法找到相关结果",
+            suggestedQueryText: "你可以尝试查询",
+            reportMissingResultsText: "你认为这个查询应该有结果？",
+            reportMissingResultsLinkText: "向我们反馈",
+        },
+    },
+}
+
+const i18n = {
+    search: '搜索',
+    menu: '菜单',
+    toc: '本页目录',
+    returnToTop: '返回顶部',
+    appearance: '外观',
+    previous: '前一篇',
+    next: '下一篇',
+    pageNotFound: '页面未找到',
+}
+
+const ogUrl = "https://mpxjs.cn/"
+const ogImage = `${ogUrl}logo.png`
+const title = "Mpx 框架"
+const description = "深度性能优化的增强型小程序开发框架"
+
+export default withPwa(
+    defineConfig({
+        base: "/",
+        head: [
+            ["link", { rel: "icon", href: "/favicon.ico" }],
+            [
+                "script",
+                { type: "text/javascript" },
+                `(function(c,l,a,r,i,t,y){
+                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+            })(window, document, "clarity", "script", "jtvvy52wxy");`,
+            ],
+            ["meta", { name: "author", content: title }],
+            ["meta", { property: "og:type", content: "website" }],
+            ["meta", { name: "og:title", content: title }],
+            ["meta", { name: "og:description", content: description }],
+            ["meta", { property: "og:image", content: ogImage }],
+            ["meta", { property: "og:url", content: ogUrl }],
+        ],
+        title,
+        locales: {
+            // 如果有其他语言，也可以在这里添加
+            // '/zh/': {
+            //   prev: '上一页',
+            // },
+            "/": {
+                label: "中文",
+                lang: "zh-CN", // 将会被设置为 <html> 的 lang 属性
+                title,
+                description,
+            },
+        },
+        ignoreDeadLinks: true,
+        pwa: {
+            base: "/",
+            scope: "/",
+            includeAssets: ["favicon.ico", "logo.png"],
+            manifest: {
+                name: title,
+                short_name: "Mpx",
+                description,
+                theme_color: "#ffffff",
+            },
+            workbox: {
+                globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
+            },
+            devOptions: {
+                enabled: false,
+                suppressWarnings: true,
+                navigateFallback: "/",
+            },
+        },
+        themeConfig: {
+            // navbar: false,
+            algolia: {
+                // apiKey: '7849f511f78afc4383a81f0137a91c0f',
+                appId: "DZ8S6HN0MP",
+                apiKey: "a34809e24ae1eb13ca3afc255d0a0cef",
+                indexName: "mpxjs",
+                placeholder: "搜索文档",
+                translations: algoliaTranslations,
+            },
+            logo: "/favicon.ico",
+            socialLinks: [
+                { icon: "github", link: "https://github.com/didi/mpx" },
+            ],
+            nav: [
+                {
+                    text: "指南",
+                    activeMatch: "^/guide/",
+                    link: "/guide/basic/start",
+                },
+                // 未来热门的链接可以用下面的折叠标题
+                // {
+                //     text: "文档",
+                //     activeMatch: "^/guide/(basic/start|platform/basic)/",
+                //     items: [
+                //         { text: "快速开始", link: "/guide/basic/start" },
+                //         { text: "跨端输出", link: "/guide/platform/basic" },
+                //     ],
+                // },
+                { text: "API", activeMatch: "^/api/", link: "/api/" },
+                {
+                    text: "文章",
+                    activeMatch: "^/articles/",
+                    link: "/articles/",
+                },
+                {
+                    text: "更新记录",
+                    activeMatch: "^/releases/",
+                    link: "https://github.com/didi/mpx/releases",
+                    target: "_blank",
+                },
+            ],
+            outline: {
+                level: [2, 3],
+                label: "本页目录",
+            },
+            sidebar,
+            darkModeSwitchLabel: "外观",
+            sidebarMenuLabel: "菜单",
+            returnToTopLabel: "返回顶部",
+            langMenuLabel: "语言",
+            notFound: {
+                title: "页面未找到",
+                linkText: "返回首页",
+                quote: "😩 抱歉，迷路了～"
+            },
+            docFooter: {
+                prev: "上一页",
+                next: "下一页",
+            },
+        },
+        // @ts-ignore
+        chainWebpack: (config) => {
+            // 添加node_modules避免resolve错误
+            config.resolve.modules.add("node_modules")
+        },
+    })
+)
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2
new file mode 100644
index 0000000000..b6b603d596
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2
new file mode 100644
index 0000000000..def40a4f65
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2
new file mode 100644
index 0000000000..e070c3d309
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2
new file mode 100644
index 0000000000..a3c16ca40b
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2
new file mode 100644
index 0000000000..2210a899ed
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2
new file mode 100644
index 0000000000..790d62dc7b
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2
new file mode 100644
index 0000000000..1eec0775a6
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2
new file mode 100644
index 0000000000..2cfe61536e
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2
new file mode 100644
index 0000000000..e3886dd141
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2
new file mode 100644
index 0000000000..36d67487dc
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2
new file mode 100644
index 0000000000..2bed1e85e8
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2
new file mode 100644
index 0000000000..9a8d1e2b5e
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2
new file mode 100644
index 0000000000..07d3c53aef
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 differ
diff --git a/docs-vitepress/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 b/docs-vitepress/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2
new file mode 100644
index 0000000000..57bdc22ae8
Binary files /dev/null and b/docs-vitepress/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 differ
diff --git a/docs-vuepress/assets/images/start-tips1.png b/docs-vitepress/.vitepress/dist/assets/start-tips1.B10pt_bp.png
similarity index 100%
rename from docs-vuepress/assets/images/start-tips1.png
rename to docs-vitepress/.vitepress/dist/assets/start-tips1.B10pt_bp.png
diff --git a/docs-vuepress/assets/images/start-tips2.png b/docs-vitepress/.vitepress/dist/assets/start-tips2.DL_IWEZM.png
similarity index 100%
rename from docs-vuepress/assets/images/start-tips2.png
rename to docs-vitepress/.vitepress/dist/assets/start-tips2.DL_IWEZM.png
diff --git a/docs-vuepress/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs-vitepress/.vitepress/theme/components/AlgoliaSearchBox.vue
similarity index 100%
rename from docs-vuepress/.vuepress/theme/components/AlgoliaSearchBox.vue
rename to docs-vitepress/.vitepress/theme/components/AlgoliaSearchBox.vue
diff --git a/docs-vuepress/.vuepress/theme/components/CodeList.vue b/docs-vitepress/.vitepress/theme/components/CodeList.vue
similarity index 93%
rename from docs-vuepress/.vuepress/theme/components/CodeList.vue
rename to docs-vitepress/.vitepress/theme/components/CodeList.vue
index ac50a20d70..9d13f6c604 100644
--- a/docs-vuepress/.vuepress/theme/components/CodeList.vue
+++ b/docs-vitepress/.vitepress/theme/components/CodeList.vue
@@ -9,7 +9,7 @@
           </transition>
         </div>
       </popover> -->
-      <img width="150" height="170" :src="item.code" alt="code" loading="lazy" />
+      <img width="150" style="height: 170px;" :src="item.code" alt="code" loading="lazy" />
     </div>
   </div>
 </template>
diff --git a/docs-vuepress/.vuepress/theme/components/MobileSwiper.vue b/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
similarity index 95%
rename from docs-vuepress/.vuepress/theme/components/MobileSwiper.vue
rename to docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
index 3d7c7ac4b0..7ec8c9eb3b 100644
--- a/docs-vuepress/.vuepress/theme/components/MobileSwiper.vue
+++ b/docs-vitepress/.vitepress/theme/components/MobileSwiper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="swiper-container" ref="container" :style="getStyle">
-    <div class="swiper" :style="getMode" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
+    <div class="swiper" ref="wrapper" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
       <div
         ref="list"
         class="swiper-list"
@@ -59,9 +59,6 @@ export default {
     getStyle () {
       return `height: ${this.height}px;`
     },
-    getMode () {
-      return this.isMove ? 'transition: transform 0s;' : 'transition: transform 0.3s;'
-    },
     getWidth () {
       return `width: ${this.offsetWidth}px;`
     }
@@ -149,6 +146,7 @@ export default {
       const moveX = touch.clientX - this.touchInfo.clientX
       const distance = this.current * this.offsetWidth  - moveX
       wrapper.style.transform = `translateX(${-distance}px)`
+      wrapper.style.transition = 'transform 0s'
       this.touchInfo.moveX = moveX
     },
     handleEnd () {
@@ -174,6 +172,7 @@ export default {
         }
       }
       const wrapper = this.$refs.wrapper
+      wrapper.style.transition = 'transform 0.3s'
       switch (nextPage) {
         case 0:
           wrapper.style.transform = `translateX(${-this.current * this.offsetWidth}px)`
@@ -209,7 +208,7 @@ export default {
   white-space nowrap
   transform translateX(0)
   display inline-block
-  // transition transform 0.3s
+  transition transform 0.3s
 .swiper-list
   width 100%
   // height 132px
diff --git a/docs-vuepress/.vuepress/theme/components/MobileView.vue b/docs-vitepress/.vitepress/theme/components/MobileView.vue
similarity index 86%
rename from docs-vuepress/.vuepress/theme/components/MobileView.vue
rename to docs-vitepress/.vitepress/theme/components/MobileView.vue
index 9b2b1ea667..a691f844e0 100644
--- a/docs-vuepress/.vuepress/theme/components/MobileView.vue
+++ b/docs-vitepress/.vitepress/theme/components/MobileView.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="m-banner-wrapper">
     <div class="m-banner">
-      <div class="m-title">{{ $page.frontmatter.heroText }}</div>
+      <div class="m-title">{{ $frontmatter.heroText }}</div>
       <div class="m-subtitle">
-        {{ $page.frontmatter.tagline }}
+        {{ $frontmatter.tagline }}
       </div>
 
       <div class="m-banner-btn-wrapper">
         <button class="m-banner-btn m-banner-btn-enter">
-          <a style="font-size: 15px;" :href="$page.frontmatter.actionLink">
-            {{ $page.frontmatter.actionText }}
+          <a style="font-size: 15px;" :href="$frontmatter.actionLink">
+            {{ $frontmatter.actionText }}
           </a>
         </button>
         <div class="m-banner-btn m-banner-btn-jump">
-          <a class="white-link" :href="$page.frontmatter.githubLink">
-            {{ $page.frontmatter.githubText }}
+          <a class="white-link" :href="$frontmatter.githubLink">
+            {{ $frontmatter.githubText }}
           </a>
         </div>
       </div>
@@ -24,7 +24,7 @@
     <div class="m-advantages">
       <li
         class="m-advan-section"
-        v-for="(item, index) in $page.frontmatter.features"
+        v-for="(item, index) in $frontmatter.features"
         :key="index"
       >
         <img
@@ -32,14 +32,14 @@
           :src="item.micon"
           loading="lazy"
           width="34"
-          height="34"
+          style="height: 34px;"
         />
         <p class="m-advan-section-title">{{ item.title }}</p>
       </li>
     </div>
 
     <div class="mdemo-wrapper">
-      <div class="mdemo-title">{{ $page.frontmatter.threeSection.title }}</div>
+      <div class="mdemo-title">{{ $frontmatter.threeSection.title }}</div>
       <p class="mdemo-subtitle">
         扫码体验Mpx版本的
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
@@ -48,58 +48,58 @@
         进入查看。
       </p>
       <!-- <a class="mdemo-btn" href="/">
-        {{ $page.frontmatter.threeSection.actionText }}
+        {{ $frontmatter.threeSection.actionText }}
       </a> -->
       <div class="mdemo-icon-wrapper">
         <div style="margin: 0 6px;" v-for="(item, index) in mvcList" :key="index">
-          <img width="130" height="150" :src="item.code" alt="code" loading="lazy" />
+          <img width="130" style="height: 150px;" :src="item.code" alt="code" loading="lazy" />
         </div>
       </div>
     </div>
 
     <div class="m-feature-wrapper">
       <div class="m-feature-title">
-        {{ $page.frontmatter.fourSection.title }}
+        {{ $frontmatter.fourSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fourSection.details }}
+        {{ $frontmatter.fourSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fourSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fourSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fourSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fourSection.mimg"
         alt="platform"
         loading="lazy"
       />
 
       <div class="m-feature-title">
-        {{ $page.frontmatter.fiveSection.title }}
+        {{ $frontmatter.fiveSection.title }}
       </div>
       <div class="m-feature-subtitle">
-        {{ $page.frontmatter.fiveSection.details }}
+        {{ $frontmatter.fiveSection.details }}
       </div>
-      <a class="m-feature-btn" :href="$page.frontmatter.fourSection.actionLink">
-        {{ $page.frontmatter.fiveSection.actionText }}
+      <a class="m-feature-btn" :href="$frontmatter.fourSection.actionLink">
+        {{ $frontmatter.fiveSection.actionText }}
       </a>
       <img
         class="m-feature-pic"
         width="100%"
-        height="309px"
-        :src="$page.frontmatter.fiveSection.mimg"
+        style="height: 309px;"
+        :src="$frontmatter.fiveSection.mimg"
         alt="platform"
         loading="lazy"
       />
     </div>
 
     <div class="m-util-wrapper">
-      <div class="m-util-title">{{$page.frontmatter.sixSection.title}}</div>
+      <div class="m-util-title">{{$frontmatter.sixSection.title}}</div>
       <ul class="row six-section__row" v-for="(item, index) in list" :key="index">
         <a :href="item.actionLink" class="six-section__item six-section__step">
-          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" height="50" />
+          <img class="six-section__icon" :src="item.icon" alt="svg" loading="lazy" width="50" style="height: 50px;" />
           <div class="six-section__list">
             <div class="six-section__bold">{{item.title}}</div>
             <div class="six-section__subtitle">{{item.details}}</div>
@@ -109,11 +109,11 @@
     </div>
 
     <div class="m-example-wrapper">
-      <div class="m-example-title">{{$page.frontmatter.sevenSection.title}}</div>
+      <div class="m-example-title">{{$frontmatter.sevenSection.title}}</div>
         <div class="m-example-phone">
           <img
               width="318"
-              height="318"
+              style="height: 318px;"
               src="https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png"
               alt="phone"/>
           <div class="m-example-img-contain">
@@ -155,10 +155,10 @@ export default {
   },
   computed: {
     list () {
-      return this.$page.frontmatter.sixSection.details
+      return this.$frontmatter.sixSection.details
     },
     multiList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       const result = []
       let temp = []
       for (let i = 0; i < list.length; i++) {
@@ -172,11 +172,11 @@ export default {
       return result
     },
     mvcList() {
-      const list = this.$page.frontmatter.threeSection.list
+      const list = this.$frontmatter.threeSection.list
       return list
     },
     dataList () {
-      const list = this.$page.frontmatter.sevenSection.details
+      const list = this.$frontmatter.sevenSection.details
       return list
     }
   },
diff --git a/docs-vuepress/.vuepress/theme/components/Navbar.vue b/docs-vitepress/.vitepress/theme/components/Navbar.vue
similarity index 58%
rename from docs-vuepress/.vuepress/theme/components/Navbar.vue
rename to docs-vitepress/.vitepress/theme/components/Navbar.vue
index 517d62686b..637dbe241e 100644
--- a/docs-vuepress/.vuepress/theme/components/Navbar.vue
+++ b/docs-vitepress/.vitepress/theme/components/Navbar.vue
@@ -2,12 +2,12 @@
   <header class="header">
     <div class="header-menu" v-if="smallMode">
       <a href="/">
-        <img style="vertical-align: middle;" height="20" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
+        <img style="vertical-align: middle;height: 20px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png" alt="logo">
       </a>
       <div style="display: flex; align-items: center;">
         <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
         <span class="header-menu-icon">
-          <img @click="toggleSidebar" height="14" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
+          <img @click="toggleSidebar" style="height: 14px;" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png" alt="menu">
         </span>
       </div>
     </div>
@@ -36,71 +36,91 @@
 </template>
 
 <script>
-import SearchBox from "@SearchBox";
+// import SearchBox from "@SearchBox";
 import AlgoliaSearchBox from "../components/AlgoliaSearchBox.vue";
+import { useRoute, useRouter, useData } from "vitepress";
+import { computed, ref, onMounted, watch } from "vue";
+
 export default {
   components: {
-    SearchBox,
+    // SearchBox,
     AlgoliaSearchBox
   },
-  data () {
-    return {
-      smallMode: false,
-      isSidebarOpen: false,
-      selectedNavIndex: null,
-      list: [
-        { title: '指南', link: '/guide/basic/start.html' },
-        { title: 'API', link: '/api/' },
-        { title: '文章', link: '/articles/' },
-        { title: '更新记录', link: 'https://github.com/didi/mpx/releases', target: '_blank'},
-        { title: 'GitHub', link: 'https://github.com/didi/mpx', target: '_blank'}
-      ]
-    }
-  },
-  computed: {
-    algolia() {
-      return (
-        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-      );
-    },
-    isAlgoliaSearch() {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
-    },
-    calculateStyle() {
-      if (this.$page.path !== '/') {
+  setup() {
+    const route = useRoute()
+    const { theme } = useData()
+    const router = useRouter()
+    const isSidebarOpen = ref(false)
+    const smallMode = ref(false)
+    const selectedNavIndex = ref(null)
+    const algolia = ref({})
+    const { path } = route
+    const list = [
+      { title: '指南', link: '/guide/basic/start.html' },
+      { title: 'API', link: '/api/' },
+      { title: '文章', link: '/articles/' },
+      { title: '更新记录', link: 'https://github.com/didi/mpx/releases', target: '_blank'},
+      { title: 'GitHub', link: 'https://github.com/didi/mpx', target: '_blank'}
+    ]
+    const calculateStyle = computed(() => {
+      if (path !== '/') {
         return ''
       }
-      return this.isSidebarOpen ? 'transform: translateY(0);' : ''
-    }
-  },
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.smallMode = true
-      } else {
-        this.smallMode = false
-      }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
-    this.$router.afterEach(() => {
-      this.isSidebarOpen = false
+      return isSidebarOpen.value ? 'transform: translateY(0);' : ''
     })
-    const currentPath = this.$route.path
-    this.list.forEach((item, index) => {
-      if (item.link === currentPath && !item.link.includes('https://')) {
-        this.selectedNavIndex = index
+
+    const isAlgoliaSearch = computed(() => {
+      return theme.value.algolia && theme.value.algolia.apiKey && theme.value.algolia.indexName;
+    })
+    algolia.value = theme.value.algolia
+
+    onMounted(() => {
+      const MOBILE_DESKTOP_BREAKPOINT = 719
+      const handleLinksWrapWidth = () => {
+        if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+          smallMode.value = true
+        } else {
+          smallMode.value = false
+        }
       }
+      handleLinksWrapWidth()
+      window.addEventListener('resize', handleLinksWrapWidth, false)
+      // useRouter().onAfterRouteChanged(() => {
+      //   isSidebarOpen.value = false
+      // })
+      const currentPath = path
+      list.forEach((item, index) => {
+        if (item.link === currentPath && !item.link.includes('https://')) {
+          selectedNavIndex.value = index
+        }
+      })
+      watch(() => route.path, (newVal) => {
+        list.forEach((item, index) => {
+          if (item.link === newVal && !item.link.includes('https://')) {
+            selectedNavIndex.value = index
+          }
+        })
+      })
     })
-  },
-  methods: {
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-      if (this.$page.path !== '/') {
+
+    const toggleSidebar = (to) => {
+      console.log('in this toggle sidebar ____')
+      isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
+      if (path !== '/') {
         this.$emit('toggle-sidebar')
       }
     }
+
+    return {
+      isSidebarOpen,
+      calculateStyle,
+      selectedNavIndex,
+      list,
+      toggleSidebar,
+      smallMode,
+      isAlgoliaSearch,
+      algolia
+    }
   }
 };
 </script>
@@ -127,6 +147,7 @@ export default {
 
 .header-menu {
   width: 100%;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -235,7 +256,7 @@ a.router-link-active {
     height: 60px;
     line-height: 60px;
     padding: 0 16px;
-    display: flex
+    display: flex;
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
diff --git a/docs-vuepress/.vuepress/theme/components/Popover.vue b/docs-vitepress/.vitepress/theme/components/Popover.vue
similarity index 100%
rename from docs-vuepress/.vuepress/theme/components/Popover.vue
rename to docs-vitepress/.vitepress/theme/components/Popover.vue
diff --git a/docs-vitepress/.vitepress/theme/components/RegisterSW.vue b/docs-vitepress/.vitepress/theme/components/RegisterSW.vue
new file mode 100644
index 0000000000..705ced5dd9
--- /dev/null
+++ b/docs-vitepress/.vitepress/theme/components/RegisterSW.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
+
+const offlineReady = ref(false)
+const needRefresh = ref(false)
+
+let updateServiceWorker: (() => Promise<void>) | undefined
+
+function onOfflineReady() {
+  offlineReady.value = true
+}
+function onNeedRefresh() {
+  needRefresh.value = true
+}
+async function close() {
+  offlineReady.value = false
+  needRefresh.value = false
+}
+
+onBeforeMount(async () => {
+  const { registerSW } = await import('virtual:pwa-register')
+  console.log('[SW] onBeforeMount')
+  updateServiceWorker = registerSW({
+    immediate: true,
+    onOfflineReady,
+    onNeedRefresh,
+    onRegistered() {
+      console.info('Service Worker registered')
+    },
+    onRegisterError(e) {
+      console.error('Service Worker registration error!', e)
+    },
+  })
+})
+</script>
+
+<template>
+  <template v-if="offlineReady || needRefresh">
+    <div
+      class="pwa-toast"
+      role="alertdialog"
+      aria-labelledby="pwa-message"
+    >
+      <div id="pwa-message" class="mb-3">
+        {{ offlineReady ? '应用已准备好离线工作' : '📣 有新内容可用，请点击重新加载按钮以更新。' }}
+      </div>
+      <button
+        v-if="needRefresh"
+        type="button"
+        class="pwa-refresh"
+        @click="updateServiceWorker?.()"
+      >
+        重新加载
+      </button>
+      <button
+        type="button"
+        class="pwa-cancel"
+        @click="close"
+      >
+        关闭
+      </button>
+    </div>
+  </template>
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+  border-radius: 4px;
+  width: 80px;
+}
+.pwa-toast .pwa-refresh {
+  color: white;
+  background-image: linear-gradient(-45deg, #50be97 30%, #31bc7f 70%);
+  margin-right: 10px;
+}
+.pwa-toast .pwa-refresh:hover {
+  background-image: none; /* 新增hover颜色 */
+  background-color: #45a76d;
+}
+.pwa-toast .pwa-cancel:hover {
+  background-color: #8885;
+}
+</style>
diff --git a/docs-vuepress/.vuepress/theme/components/SlideItem.vue b/docs-vitepress/.vitepress/theme/components/SlideItem.vue
similarity index 100%
rename from docs-vuepress/.vuepress/theme/components/SlideItem.vue
rename to docs-vitepress/.vitepress/theme/components/SlideItem.vue
diff --git a/docs-vuepress/.vuepress/theme/components/Swiper.vue b/docs-vitepress/.vitepress/theme/components/Swiper.vue
similarity index 94%
rename from docs-vuepress/.vuepress/theme/components/Swiper.vue
rename to docs-vitepress/.vitepress/theme/components/Swiper.vue
index a48e1347ce..5c0f381148 100644
--- a/docs-vuepress/.vuepress/theme/components/Swiper.vue
+++ b/docs-vitepress/.vitepress/theme/components/Swiper.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-button">
-      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" height="50" alt="left" loading="lazy" />
+      <img :class="leftButtonDisabled" class="swiper-img" @click="handlePrev" src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" style="height: 50px;" alt="left" loading="lazy" />
     </div>
     <div class="swiper" ref="wrapper">
       <div
@@ -13,14 +13,14 @@
         @transitionend="handleEnd">
         <div class="swiper-item">
           <div>
-            <div><img width="80" height="80" :src="item.img" alt="二维码" loading="lazy" /></div>
+            <div><img width="80" style="height: 80px;" :src="item.img" alt="二维码" loading="lazy" /></div>
             <div>{{item.title}}</div>
           </div>
         </div>
       </div>
     </div>
     <div class="swiper-button">
-      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" height="50" alt="right" loading="lazy" />
+      <img :class="rightButtonDisabled" class="swiper-img" @click="handleNext" src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" style="height: 50px;" alt="right" loading="lazy" />
     </div>
   </div>
 </template>
diff --git a/docs-vuepress/.vuepress/theme/components/SwiperImg.vue b/docs-vitepress/.vitepress/theme/components/SwiperImg.vue
similarity index 90%
rename from docs-vuepress/.vuepress/theme/components/SwiperImg.vue
rename to docs-vitepress/.vitepress/theme/components/SwiperImg.vue
index c2409843d3..319a44930d 100644
--- a/docs-vuepress/.vuepress/theme/components/SwiperImg.vue
+++ b/docs-vitepress/.vitepress/theme/components/SwiperImg.vue
@@ -2,7 +2,7 @@
   <div class="swiper-img">
     <div class="swiper-img__list" :style="getStyle">
       <div class="swiper-img__wrap" v-for="(item, index) in dataList" :key="index">
-        <img width="188" height="410" :src="item.demo" alt="img" loading="lazy" />
+        <img width="188" style="height: 410px;" :src="item.demo" alt="img" loading="lazy" />
       </div>
     </div>
   </div>
diff --git a/docs-vuepress/.vuepress/theme/global-components/Content.vue b/docs-vitepress/.vitepress/theme/global-components/Content.vue
similarity index 83%
rename from docs-vuepress/.vuepress/theme/global-components/Content.vue
rename to docs-vitepress/.vitepress/theme/global-components/Content.vue
index f204c5a218..67644b55df 100644
--- a/docs-vuepress/.vuepress/theme/global-components/Content.vue
+++ b/docs-vitepress/.vitepress/theme/global-components/Content.vue
@@ -7,18 +7,18 @@
     <section class="one-section">
       <div class="one-section__inner one-section__content">
         <div style="display: inline-block;">
-          <h2 class="one-section__title">{{$page.frontmatter.heroText}}</h2>
+          <h2 class="one-section__title">{{$frontmatter.heroText}}</h2>
           <p class="one-section__desc">
-            {{$page.frontmatter.tagline}}
+            {{$frontmatter.tagline}}
           </p>
           <button class="one-section__btn one-section__enter">
-            <a class="white-link" :href="$page.frontmatter.actionLink">
-              {{$page.frontmatter.actionText}}
+            <a class="white-link" :href="$frontmatter.actionLink">
+              {{$frontmatter.actionText}}
             </a>
           </button>
           <button class="one-section__btn one-section__github">
-            <a class="blue-link" :href="$page.frontmatter.githubLink" target="_blank">
-              {{$page.frontmatter.githubText}}
+            <a class="blue-link" :href="$frontmatter.githubLink" target="_blank">
+              {{$frontmatter.githubText}}
             </a>
           </button>
         </div>
@@ -29,8 +29,8 @@
     <!-- 第二部分 -->
     <section class="two-section">
       <ul class="row">
-        <li class="two-section__item" v-for="(item, index) in $page.frontmatter.features" :key="index">
-          <img :src="item.icon" alt="svg" loading="lazy" width="80" height="80" />
+        <li class="two-section__item" v-for="(item, index) in $frontmatter.features" :key="index">
+          <img :src="item.icon" alt="svg" loading="lazy" width="80" style="height: 80px;" />
           <p class="two-section__title">{{item.title}}</p>
           <p class="two-section__desc">{{item.details}}</p>
           <div class="two-section__line"></div>
@@ -39,26 +39,26 @@
     </section>
 
     <!-- 第三部分 -->
-    <section class="three-section" :style="{ backgroundImage: `url(${$page.frontmatter.threeSection.bg})` }">
+    <section class="three-section" :style="{ backgroundImage: `url(${$frontmatter.threeSection.bg})` }">
       <div class="three-section__inner">
         <div>
           <div class="three-section__todo">
             <div class="three-section__phone">
               <img
-                width="410"
-                height="712"
-                src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
-                alt="phone"
-                loading="lazy" />
+                  width="410"
+                  style="height: 712px;"
+                  src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
+                  alt="phone"
+                  loading="lazy" />
             </div>
             <div class="three-section__iframe">
               <iframe
-                title="todo示例"
-                scrolling="no"
-                width="325"
-                height="617"
-                src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html"
-                frameborder="0">
+                  title="todo示例"
+                  scrolling="no"
+                  width="325"
+                  height="617"
+                  src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html"
+                  frameborder="0">
               </iframe>
             </div>
           </div>
@@ -66,9 +66,9 @@
         <div class="three-section__mvc">
           <div>
             <span class="dot-inner" style="background: #fff; margin: 0 auto;"></span>
-            <p class="white-text title">{{$page.frontmatter.threeSection.title}}</p>
+            <p class="white-text title">{{$frontmatter.threeSection.title}}</p>
             <p class="white-text desc">
-              <!-- {{$page.frontmatter.threeSection.details}} -->
+              <!-- {{$frontmatter.threeSection.details}} -->
               扫码体验Mpx版本的
               <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
               在各个小程序平台和web中的一致表现 ，更多示例项目可点击
@@ -77,8 +77,8 @@
             </p>
           </div>
           <!-- <button class="three-section__btn btn">
-            <a :href="$page.frontmatter.threeSection.actionLink" class="blue-link">
-              {{$page.frontmatter.threeSection.actionText}}
+            <a :href="$frontmatter.threeSection.actionLink" class="blue-link">
+              {{$frontmatter.threeSection.actionText}}
             </a>
           </button> -->
           <code-list :dataList="mvcList"></code-list>
@@ -88,13 +88,13 @@
 
     <!-- 第四部分 -->
     <section class="section four-section">
-      <div class="grow four-section__bg" :style="{ backgroundImage: `url(${$page.frontmatter.fourSection.bg})` }">
+      <div class="grow four-section__bg" :style="{ backgroundImage: `url(${$frontmatter.fourSection && $frontmatter.fourSection.bg})` }">
       </div>
       <div class="four-section__inner">
         <div class="grow" style="position: relative;">
           <img
           width="412"
-          :src="$page.frontmatter.fourSection.img"
+          :src="$frontmatter.fourSection && $frontmatter.fourSection.img"
           alt="svg"
           loading="lazy" />
         </div>
@@ -102,14 +102,14 @@
           <div style="margin-left: 86px;">
             <div>
               <span class="dot-inner"></span>
-              <p class="title">{{$page.frontmatter.fourSection.title}}</p>
+              <p class="title">{{$frontmatter.fourSection && $frontmatter.fourSection.title}}</p>
               <p class="desc">
-                {{$page.frontmatter.fourSection.details}}
+                {{$frontmatter.fourSection.details}}
               </p>
             </div>
             <button class="btn">
-              <a :href="$page.frontmatter.fourSection.actionLink" class="white-link">
-                {{$page.frontmatter.fourSection.actionText}}
+              <a :href="$frontmatter.fourSection.actionLink" class="white-link">
+                {{$frontmatter.fourSection.actionText}}
               </a>
             </button>
           </div>
@@ -119,21 +119,21 @@
 
     <!-- 第五部分 -->
     <section class="section five-section">
-      <div class="grow five-section__bg" :style="{ backgroundImage: `url(${$page.frontmatter.fiveSection.bg})` }">
+      <div class="grow five-section__bg" :style="{ backgroundImage: `url(${$frontmatter.fiveSection.bg})` }">
       </div>
       <div class="five-section__inner">
         <div class="five-section__text grow">
           <div style="margin-right: 86px;">
             <div>
               <span class="dot-inner"></span>
-              <p class="title">{{$page.frontmatter.fiveSection.title}}</p>
+              <p class="title">{{$frontmatter.fiveSection.title}}</p>
               <p class="desc">
-                {{$page.frontmatter.fiveSection.details}}
+                {{$frontmatter.fiveSection.details}}
               </p>
             </div>
             <button class="btn">
-              <a :href="$page.frontmatter.fiveSection.actionLink"  class="white-link">
-                {{$page.frontmatter.fiveSection.actionText}}
+              <a :href="$frontmatter.fiveSection.actionLink"  class="white-link">
+                {{$frontmatter.fiveSection.actionText}}
               </a>
             </button>
           </div>
@@ -141,7 +141,7 @@
         <div class="grow" style="position: relative; display: flex; justify-content: flex-end;">
           <img
             width="412"
-            :src="$page.frontmatter.fiveSection.img"
+            :src="$frontmatter.fiveSection.img"
             alt="svg"
             loading="lazy" />
         </div>
@@ -150,17 +150,17 @@
     </section>
 
     <!-- 第六部分 -->
-    <section class="six-section" :style="{ backgroundImage: `url(${$page.frontmatter.sixSection.bg})` }">
+    <section class="six-section" :style="{ backgroundImage: `url(${$frontmatter.sixSection.bg})` }">
       <div class="six-section__inner">
         <div style="text-align: center;">
           <span class="dot-inner" style="background: #fff; margin: 0 auto;"></span>
         </div>
-        <p class="title six-section__title">{{$page.frontmatter.sixSection.title}}</p>
+        <p class="title six-section__title">{{$frontmatter.sixSection.title}}</p>
         <ul class="row six-section__row" v-for="(current, index) in list" :key="index">
           <li v-for="(item, index) in current" :key="index">
             <a :href="item.actionLink" class="six-section__item six-section__step">
               <div class="six-section__icon">
-                <img :src="item.icon" alt="svg" loading="lazy" width="50" height="50" />
+                <img :src="item.icon" alt="svg" loading="lazy" width="50" style="height: 50px;" />
               </div>
               <div class="six-section__list">
                 <div class="six-section__bold">{{item.title}}</div>
@@ -175,7 +175,7 @@
     <!-- 第七部分 -->
     <section class="seven-section">
       <span class="dot-inner"></span>
-      <p class="title">{{$page.frontmatter.sevenSection.title}}</p>
+      <p class="title">{{$frontmatter.sevenSection.title}}</p>
       <div class="row seven-section__wrap">
         <div class="grow">
           <p class="seven-section__title">
@@ -184,11 +184,11 @@
           <p class="seven-section__desc">
           </p>
         </div>
-        <div class="grow seven-section__center" :style="{ backgroundImage: `url(${$page.frontmatter.sevenSection.bg})` }">
+        <div class="grow seven-section__center" :style="{ backgroundImage: `url(${$frontmatter.sevenSection.bg})` }">
           <div class="seven-section_phone">
             <img
               width="213"
-              height="433"
+              style="height: 433px;"
               src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
               alt="phone"
               loading="lazy" />
@@ -208,6 +208,8 @@
 import Swiper from '../components/Swiper.vue';
 import SwiperImg from '../components/SwiperImg.vue';
 import CodeList from '../components/CodeList.vue';
+import { useData } from 'vitepress'
+import { toRefs } from 'vue'
 
 export default {
   data () {
@@ -218,7 +220,7 @@ export default {
   computed: {
     list () {
       let result = []
-      let details = this.$page.frontmatter.sixSection.details
+      let details = this.$frontmatter.sixSection.details
       let current = []
       let i = 0
       while (i < details.length) {
@@ -231,13 +233,11 @@ export default {
       }
       return result
     },
-    dataList () {
-      const list = this.$page.frontmatter.sevenSection.details
-      return list
-    },
     mvcList () {
-      const list = this.$page.frontmatter.threeSection.list
-      return list
+      return this.$frontmatter.threeSection.list
+    },
+    dataList () {
+      return this.$frontmatter.sevenSection.details
     },
     currentTitle () {
       return this.dataList[this.currentIndex].title
diff --git a/docs-vuepress/.vuepress/theme/global-components/Footer.vue b/docs-vitepress/.vitepress/theme/global-components/Footer.vue
similarity index 79%
rename from docs-vuepress/.vuepress/theme/global-components/Footer.vue
rename to docs-vitepress/.vitepress/theme/global-components/Footer.vue
index e96e4cca1a..96535a8ef6 100644
--- a/docs-vuepress/.vuepress/theme/global-components/Footer.vue
+++ b/docs-vitepress/.vitepress/theme/global-components/Footer.vue
@@ -12,9 +12,9 @@
         <li class="grow">
           <ul class="footer-inner">
             <li class="footer__wrap">
-              <span class="footer__text footer__title">{{$page.frontmatter.resourcesList.title}}</span>
+              <span class="footer__text footer__title">{{$frontmatter.resourcesList.title}}</span>
             </li>
-            <li class="footer__wrap" v-for="(item, index) in $page.frontmatter.resourcesList.details" :key="index">
+            <li class="footer__wrap" v-for="(item, index) in $frontmatter.resourcesList.details" :key="index">
               <a :href="item.actionLink" class="footer__text" target="_blank">{{item.title}}</a>
             </li>
           </ul>
@@ -22,9 +22,9 @@
         <li class="grow">
           <ul class="footer-inner">
             <li class="footer__wrap">
-              <span class="footer__text footer__title">{{$page.frontmatter.communityList.title}}</span>
+              <span class="footer__text footer__title">{{$frontmatter.communityList.title}}</span>
             </li>
-            <li class="footer__wrap" v-for="(item, index) in $page.frontmatter.communityList.details" :key="index">
+            <li class="footer__wrap" v-for="(item, index) in $frontmatter.communityList.details" :key="index">
               <popover :code="item.img" v-if="item.img">
                 <span class="footer__text" target="_blank">{{item.title}}</span>
               </popover>
@@ -35,9 +35,9 @@
         <li class="grow">
           <ul class="footer-inner">
             <li class="footer__wrap">
-              <span class="footer__text footer__title">{{$page.frontmatter.helpList.title}}</span>
+              <span class="footer__text footer__title">{{$frontmatter.helpList.title}}</span>
             </li>
-            <li class="footer__wrap" v-for="(item, index) in $page.frontmatter.helpList.details" :key="index">
+            <li class="footer__wrap" v-for="(item, index) in $frontmatter.helpList.details" :key="index">
               <a :href="item.actionLink" class="footer__text" target="_blank">{{item.title}}</a>
             </li>
           </ul>
@@ -45,9 +45,9 @@
         <li class="grow">
           <ul class="footer-inner">
             <li class="footer__wrap">
-              <span class="footer__text footer__title">{{$page.frontmatter.moreList.title}}</span>
+              <span class="footer__text footer__title">{{$frontmatter.moreList.title}}</span>
             </li>
-            <li class="footer__wrap" v-for="(item, index) in $page.frontmatter.moreList.details" :key="index">
+            <li class="footer__wrap" v-for="(item, index) in $frontmatter.moreList.details" :key="index">
               <a :href="item.actionLink" class="footer__text" target="_blank">{{item.title}}</a>
             </li>
           </ul>
@@ -150,7 +150,7 @@ ul li
 
 @media (max-width: 750px) {
   .footer__list {
-    margin-bottom 16px  
+    margin-bottom 16px
   }
 
   .footer__text {
@@ -167,7 +167,7 @@ ul li
   }
 
   .footer-container {
-    background #606D7C 
+    background #606D7C
     height auto
     margin-top 0
   }
diff --git a/docs-vuepress/.vuepress/theme/global-components/Header.vue b/docs-vitepress/.vitepress/theme/global-components/Header.vue
similarity index 100%
rename from docs-vuepress/.vuepress/theme/global-components/Header.vue
rename to docs-vitepress/.vitepress/theme/global-components/Header.vue
diff --git a/docs-vitepress/.vitepress/theme/index.js b/docs-vitepress/.vitepress/theme/index.js
new file mode 100644
index 0000000000..8c1acdd39b
--- /dev/null
+++ b/docs-vitepress/.vitepress/theme/index.js
@@ -0,0 +1,24 @@
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './layouts/HomepageLayout.vue'
+import RegisterSW from "./components/RegisterSW.vue"
+import './styles/index.css'
+
+export default {
+    ...DefaultTheme,
+    Layout() {
+        return h(Layout, null, {
+            'layout-bottom': () => h(RegisterSW)
+        })
+    }
+}
+// export default {
+//   extend: '@vuepress/theme-default',
+//   plugins: [
+//     ['@vuepress/search', {
+//       searchMaxSuggestions: 10
+//     }],
+//     ['@vuepress/back-to-top'],
+//     formatHeaderSlugPlugin
+//   ]
+// }
diff --git a/docs-vuepress/.vuepress/theme/layouts/GlobalLayout.vue b/docs-vitepress/.vitepress/theme/layouts/GlobalLayout.vue
similarity index 100%
rename from docs-vuepress/.vuepress/theme/layouts/GlobalLayout.vue
rename to docs-vitepress/.vitepress/theme/layouts/GlobalLayout.vue
diff --git a/docs-vitepress/.vitepress/theme/layouts/HomepageLayout.vue b/docs-vitepress/.vitepress/theme/layouts/HomepageLayout.vue
new file mode 100644
index 0000000000..0da28df5da
--- /dev/null
+++ b/docs-vitepress/.vitepress/theme/layouts/HomepageLayout.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="container">
+    <div v-if="$frontmatter.layout === 'homepageLayout'">
+      <Navbar />
+      <mobile-view v-if="smallMode"></mobile-view>
+      <Content v-else />
+      <LayoutBottom/>
+      <Footer />
+    </div>
+    <div v-else>
+      <!-- <Navbar /> -->
+      <Layout></Layout>
+    </div>
+  </div>
+</template>
+
+<script>
+import { watch } from 'vue'
+import Navbar from "../components/Navbar.vue";
+import MobileView from "../components/MobileView.vue";
+import Content from "../global-components/Content.vue";
+import Footer from "../global-components/Footer.vue";
+import LayoutBottom from '../components/RegisterSW.vue'
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+
+const { Layout } = DefaultTheme
+// import ParentLayout from '@parent-theme/layouts/Layout.vue'
+export default {
+  components: {
+    Navbar,
+    Content,
+    Footer,
+    Layout,
+    // ParentLayout,
+    MobileView,
+    LayoutBottom
+  },
+  data () {
+    return {
+      smallMode: false,
+      isDarkNotHomepage: false
+    }
+  },
+  mounted () {
+    const { frontmatter, isDark } = useData()
+    // 非首页回到首页，关闭暗色模式
+    // 非首页，切换到首页，再切换回来，保持之前非首页的亮暗模式
+    watch(() => isDark.value, (value) => {
+      if (frontmatter.value.layout === 'homepageLayout') {
+        if (value) {
+          isDark.value = false
+        }
+      } else {
+        this.isDarkNotHomepage = value
+      }
+    }, { immediate: true })
+    watch(() => frontmatter.value.layout, (val) => {
+      if (val === 'homepageLayout') {
+        if (isDark.value) {
+          isDark.value = false
+        }
+      } else {
+        isDark.value = this.isDarkNotHomepage
+      }
+    }, { immediate: true })
+    
+    const MOBILE_DESKTOP_BREAKPOINT = 719
+    const handleLinksWrapWidth = () => {
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.smallMode = true
+      } else {
+        this.smallMode = false
+      }
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
+  },
+  methods: {
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+      this.$emit('toggle-sidebar', this.isSidebarOpen)
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+</style>
diff --git a/docs-vuepress/.vuepress/theme/layouts/Layout.vue b/docs-vitepress/.vitepress/theme/layouts/Layout.vue
similarity index 88%
rename from docs-vuepress/.vuepress/theme/layouts/Layout.vue
rename to docs-vitepress/.vitepress/theme/layouts/Layout.vue
index a8fa6ef843..b6f7cc3e9f 100644
--- a/docs-vuepress/.vuepress/theme/layouts/Layout.vue
+++ b/docs-vitepress/.vitepress/theme/layouts/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <ParentLayout/>
+<!--    <ParentLayout/>-->
   </div>
 </template>
 
@@ -21,4 +21,4 @@ export default {
   height: 200px;
   background: red;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs-vitepress/.vitepress/theme/styles/index.css b/docs-vitepress/.vitepress/theme/styles/index.css
new file mode 100644
index 0000000000..009d77f95f
--- /dev/null
+++ b/docs-vitepress/.vitepress/theme/styles/index.css
@@ -0,0 +1,153 @@
+:root {
+    --vt-c-green: #42b883;
+    --vt-c-text-code: #476582;
+    --vt-c-green-light: #42d392;
+    --vt-c-green-lighter: #35eb9a;
+    --vt-c-green-dark: #33a06f;
+    --vt-c-green-darker: #155f3e;
+    --vt-c-text-2: rgba(60, 60, 60, 0.7);
+    --vt-c-text-3: rgba(60, 60, 60, 0.33);
+    --vt-c-divider: rgba(60, 60, 60, 0.29);
+    --vt-c-divider-light: rgba(60, 60, 60, 0.12);
+    --vt-c-brand-highlight: var(--vt-c-brand-dark);
+    --vt-c-brand: var(--vt-c-green);
+    --vt-c-brand-dark: var(--vt-c-green-dark);
+    --vt-c-brand-light: var(--vt-c-green-light);
+    --vt-c-brand-dark: var(--vt-c-green-dark);
+}
+
+.dark {
+    --vt-c-text-code: #aac8e4;
+    --vt-c-text-2: rgba(235, 235, 235, 0.6);
+    --vt-c-text-3: rgba(235, 235, 235, 0.38);
+    --vt-c-divider: rgba(84, 84, 84, 0.65);
+    --vt-c-divider-light: rgba(84, 84, 84, 0.48);
+    --vt-c-brand-highlight: var(--vt-c-brand-light);
+}
+
+.vp-doc {
+    a {
+        text-decoration: none;
+        color: var(--vt-c-brand);
+    }
+    a:hover {
+        color: var(--vt-c-brand-highlight);
+    }
+}
+
+.VPNavBarAppearance {
+    .VPSwitch:hover {
+        border: 1px solid var(--vt-c-brand) !important;
+    }
+}
+
+.VPNavBarMenuLink:hover {
+    color: var(--vt-c-brand-highlight) !important;
+}
+
+.VPNavBarMenuLink.active {
+    color: var(--vt-c-brand) !important;
+    border-bottom: 1px solid var(--vt-c-brand);
+}
+
+.VPLocalNavOutlineDropdown {
+    .top-link {
+        color: var(--vt-c-brand) !important;
+    }
+}
+
+.VPSidebarItem.is-link {
+    .item .link {
+        .text {
+            color: var(--vt-c-text-2);
+            font-weight: 500;
+        }
+    }
+    .item .link:hover {
+        .text {
+            color: var(--vt-c-text-1) !important;
+        }
+    }
+}
+
+.VPSidebarItem.is-link.is-active {
+    .item .link .text {
+        color: var(--vt-c-brand) !important;
+        font-weight: 600;
+    }
+}
+
+.VPDocAside {
+    .outline-marker {
+        height: 20px;
+        background-color: var(--vt-c-brand);
+    }
+}
+
+.VPContent {
+    .link {
+        border: 1px solid var(--vt-c-brand);
+        color: var(--vt-c-brand);
+    }
+    .link:hover {
+        border: 1px solid var(--vt-c-brand);
+        color: var(--vt-c-brand-highlight);
+    }
+}
+
+.DocSearch-Button {
+    background-color: transparent;
+}
+
+.DocSearch-Button:hover {
+    background-color: transparent;
+    border-color: var(--vt-c-brand-highlight);
+}
+
+.DocSearch-Modal {
+    .DocSearch-Form {
+        border: 1px solid var(--vt-c-brand);
+
+        .DocSearch-MagnifierLabel {
+            color: var(--vt-c-brand);
+        }
+    }
+
+    .DocSearch-Hit-source {
+        color: var(--vt-c-brand);
+    }
+
+    .DocSearch-Hit[aria-selected="true"] {
+        a {
+            background-color: var(--vt-c-brand);
+        }
+
+        .DocSearch-Hit-title {
+            color: #fff;
+        }
+    }
+
+    .DocSearch-Hits mark {
+        color: var(--vt-c-brand);
+    }
+
+    .DocSearch-Prefill {
+        color: var(--vt-c-brand);
+    }
+
+    .DocSearch-Cancel {
+        color: var(--vt-c-brand);
+    }
+}
+
+.pager-link .title {
+    color: var(--vt-c-brand) !important;
+}
+
+.pager-link:hover {
+    border: 1px solid var(--vt-c-brand) !important;
+
+    .title {
+        color: var(--vt-c-brand-highlight) !important;
+    }
+}
diff --git a/docs-vuepress/.vuepress/theme/vuepress-format-header-slug-plugin.js b/docs-vitepress/.vitepress/theme/vuepress-format-header-slug-plugin.js
similarity index 79%
rename from docs-vuepress/.vuepress/theme/vuepress-format-header-slug-plugin.js
rename to docs-vitepress/.vitepress/theme/vuepress-format-header-slug-plugin.js
index 00794ef428..ed34cc1540 100644
--- a/docs-vuepress/.vuepress/theme/vuepress-format-header-slug-plugin.js
+++ b/docs-vitepress/.vitepress/theme/vuepress-format-header-slug-plugin.js
@@ -1,5 +1,6 @@
-const {deeplyParseHeader, slugify$1} = require('../headerMdPlugin')
-module.exports = (options, ctx) => ({
+import  { deeplyParseHeader, slugify$1 }  from '../headerMdPlugin'
+
+export default (options, ctx) => ({
     async ready () {
         const { pages } = ctx
         pages.forEach(page => {
diff --git a/docs-vuepress/api/ApiIndex.vue b/docs-vitepress/api/ApiIndex.vue
similarity index 96%
rename from docs-vuepress/api/ApiIndex.vue
rename to docs-vitepress/api/ApiIndex.vue
index 5293ff8487..dd1607b42e 100644
--- a/docs-vuepress/api/ApiIndex.vue
+++ b/docs-vitepress/api/ApiIndex.vue
@@ -422,6 +422,14 @@ const data = [
           {
             text: 'useFetch',
             anchor: '#useFetch'
+          },
+          {
+            text: 'provide',
+            anchor: '#provide'
+          },
+          {
+            text: 'inject',
+            anchor: '#inject'
           }
         ]
       }
@@ -936,7 +944,7 @@ export default {
         <label for="api-filter">过滤</label>
         <input
             type="search"
-            placeholder="Enter keyword"
+            placeholder="输入关键字"
             id="api-filter"
             v-model="query"
         />
@@ -975,49 +983,18 @@ export default {
   max-width: 1024px;
   margin: 0px auto;
   padding: 64px 32px;
-}
-a{
-  text-decoration: none;
-}
-
-h1,
-h2,
-h3 {
-  font-weight: 600;
-  line-height: 1;
-}
-
-h1,
-h2 {
-  letter-spacing: -0.02em;
-}
-
-h1 {
-  font-size: 38px;
-}
 
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-h2 {
-  font-size: 24px;
-  color: var(--vt-c-text-1);
-  margin: 36px 0;
-  transition: color 0.5s;
-  padding-top: 36px;
-  border-top: 1px solid var(--vt-c-divider-light);
-  border-bottom: none;
-}
+  ul {
+    list-style: none !important;
+    padding: 0 !important;
+  }
 
-h3 {
-  letter-spacing: -0.01em;
-  color: var(--vt-c-green);
-  font-size: 18px;
-  margin-bottom: 1em;
-  transition: color 0.5s;
+  h3 {
+    color: var(--vt-c-brand) !important;
+    font-size: 18px !important;
+    margin-top: 0 !important;
+    transition: color 0.5s !important;
+  }
 }
 
 .api-section {
@@ -1028,16 +1005,13 @@ h3 {
   font-size: 15px;
   font-weight: 500;
   line-height: 2;
-  color: var(--vt-c-text-code);
+  color: var(--vt-c-text-code) !important;
   transition: color 0.5s;
-}
-
-.dark api-groups a {
-  font-weight: 400;
+  text-decoration: none;
 }
 
 .api-groups a:hover {
-  color: var(--vt-c-green);
+  color: var(--vt-c-brand) !important;
   transition: none;
 }
 
@@ -1045,9 +1019,9 @@ h3 {
   break-inside: avoid;
   overflow: auto;
   margin-bottom: 20px;
-  background-color: var(--vt-c-bg-soft);
+  background-color: var(--vp-c-bg-soft);
   border-radius: 8px;
-  padding: 28px 26px;
+  padding: 24px 18px;
   transition: background-color 0.5s;
 }
 
@@ -1065,13 +1039,13 @@ h3 {
 }
 
 .api-filter input {
-  border: 1px solid var(--vt-c-divider);
-  border-radius: 8px;
-  padding: 6px 12px;
+  border: 1px solid var(--vt-c-divider) !important;
+  border-radius: 8px !important;
+  padding: 6px 12px !important;
 }
 
-.api-filter:focus {
-  border-color: var(--vt-c-green-light);
+#api-filter:focus {
+  box-shadow: 0 0 4pt #00d47499 !important;
 }
 
 .no-match {
diff --git a/docs-vuepress/api/app-config.md b/docs-vitepress/api/app-config.md
similarity index 100%
rename from docs-vuepress/api/app-config.md
rename to docs-vitepress/api/app-config.md
diff --git a/docs-vuepress/api/builtIn.md b/docs-vitepress/api/builtIn.md
similarity index 100%
rename from docs-vuepress/api/builtIn.md
rename to docs-vitepress/api/builtIn.md
diff --git a/docs-vuepress/api/compile.md b/docs-vitepress/api/compile.md
similarity index 100%
rename from docs-vuepress/api/compile.md
rename to docs-vitepress/api/compile.md
diff --git a/docs-vuepress/api/composition-api.md b/docs-vitepress/api/composition-api.md
similarity index 97%
rename from docs-vuepress/api/composition-api.md
rename to docs-vitepress/api/composition-api.md
index d35d912e4e..0e70e301dd 100644
--- a/docs-vuepress/api/composition-api.md
+++ b/docs-vitepress/api/composition-api.md
@@ -214,3 +214,9 @@ getCurrentInstance 只能在 setup 或生命周期钩子中调用。
 
 ## useFetch
 点击[查看详情](./extend.md#usefetch)
+
+## provide
+点击[查看详情](../guide/advance/provide-inject.md#组合式语法)
+
+## inject
+点击[查看详情](../guide/advance/provide-inject.md#组合式语法-1)
diff --git a/docs-vuepress/api/directives.md b/docs-vitepress/api/directives.md
similarity index 100%
rename from docs-vuepress/api/directives.md
rename to docs-vitepress/api/directives.md
diff --git a/docs-vuepress/api/extend.md b/docs-vitepress/api/extend.md
similarity index 100%
rename from docs-vuepress/api/extend.md
rename to docs-vitepress/api/extend.md
diff --git a/docs-vuepress/api/global-api.md b/docs-vitepress/api/global-api.md
similarity index 100%
rename from docs-vuepress/api/global-api.md
rename to docs-vitepress/api/global-api.md
diff --git a/docs-vuepress/api/index.md b/docs-vitepress/api/index.md
similarity index 100%
rename from docs-vuepress/api/index.md
rename to docs-vitepress/api/index.md
diff --git a/docs-vuepress/api/instance-api.md b/docs-vitepress/api/instance-api.md
similarity index 100%
rename from docs-vuepress/api/instance-api.md
rename to docs-vitepress/api/instance-api.md
diff --git a/docs-vitepress/api/optional-api.md b/docs-vitepress/api/optional-api.md
new file mode 100644
index 0000000000..e69c6b145f
--- /dev/null
+++ b/docs-vitepress/api/optional-api.md
@@ -0,0 +1,68 @@
+# 选项式 API
+
+### options.shallowReactivePattern
+- **类型：** `RegExp`
+- **详细：**
+
+取消data/properties内数据的深度响应。
+
+适用于每次更新均为整体的更新而非局部少量数据更新的大型数据，可减少掉对应属性“数据响应初始化”以及“diff比较”两个阶段的耗时
+
+```html
+<!-- child -->
+<script>
+createComponent({
+  properties: {
+    bigPropData: Object
+  },
+  data: {
+    // 这个是视图上需要用到的大数据
+    bigData: { a: 0 }
+  },
+  options: {
+    // 配置具体哪些data或者properties需要忽略响应
+    shallowReactivePattern: /bigData|bigPropData/
+  }，
+  methods: {
+    foo() {
+      this.bigData = { a: 1 } // 可触发视图更新
+    },
+    bar() {
+      this.bigData.a = 2 // 不可触发视图更新
+    }
+  }
+})
+</script>
+
+<!-- perant -->
+<template>
+  <child bigPropData="{{parentBigData}}"/>
+</template>
+<script>
+createComponent({
+  data: {
+    parentBigData: []
+  },
+  options: {
+    shallowReactivePattern: /parentBigData/ // 父组件中传入的data也需要开启shallowReactive
+  }
+})
+</script>
+```
+
+> 注意
+
+### onAppInit
+- **类型：** `Function`
+- **详细：**
+
+通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。
+
+
+### onSSRAppCreated
+- **类型：** `Function`
+- **详细：**
+
+SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。
+
+**注意：** 仅 web 环境支持
diff --git a/docs-vuepress/api/reactivity-api.md b/docs-vitepress/api/reactivity-api.md
similarity index 100%
rename from docs-vuepress/api/reactivity-api.md
rename to docs-vitepress/api/reactivity-api.md
diff --git a/docs-vuepress/api/store-api.md b/docs-vitepress/api/store-api.md
similarity index 100%
rename from docs-vuepress/api/store-api.md
rename to docs-vitepress/api/store-api.md
diff --git a/docs-vuepress/articles/1.0.md b/docs-vitepress/articles/1.0.md
similarity index 99%
rename from docs-vuepress/articles/1.0.md
rename to docs-vitepress/articles/1.0.md
index 60698afc74..4d42244dcf 100644
--- a/docs-vuepress/articles/1.0.md
+++ b/docs-vitepress/articles/1.0.md
@@ -11,7 +11,7 @@ Mpx是一款致力于提高小程序开发体验的增强型小程序框架，
 * 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)
 * 深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)
 * Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)
-* 单文件组件开发
+* 单文件组件开发 testtest123
 * 状态管理(Vuex规范/多实例/可合并)
 * 跨团队合作(packages)
 * 逻辑复用能力(mixins)
diff --git a/docs-vuepress/articles/2.0.md b/docs-vitepress/articles/2.0.md
similarity index 100%
rename from docs-vuepress/articles/2.0.md
rename to docs-vitepress/articles/2.0.md
diff --git a/docs-vuepress/articles/2.7-release.md b/docs-vitepress/articles/2.7-release.md
similarity index 100%
rename from docs-vuepress/articles/2.7-release.md
rename to docs-vitepress/articles/2.7-release.md
diff --git a/docs-vuepress/articles/2.8-release-alter.md b/docs-vitepress/articles/2.8-release-alter.md
similarity index 100%
rename from docs-vuepress/articles/2.8-release-alter.md
rename to docs-vitepress/articles/2.8-release-alter.md
diff --git a/docs-vuepress/articles/2.8-release.md b/docs-vitepress/articles/2.8-release.md
similarity index 100%
rename from docs-vuepress/articles/2.8-release.md
rename to docs-vitepress/articles/2.8-release.md
diff --git a/docs-vuepress/articles/2.9-release-alter.md b/docs-vitepress/articles/2.9-release-alter.md
similarity index 100%
rename from docs-vuepress/articles/2.9-release-alter.md
rename to docs-vitepress/articles/2.9-release-alter.md
diff --git a/docs-vuepress/articles/2.9-release.md b/docs-vitepress/articles/2.9-release.md
similarity index 100%
rename from docs-vuepress/articles/2.9-release.md
rename to docs-vitepress/articles/2.9-release.md
diff --git a/docs-vuepress/articles/index.md b/docs-vitepress/articles/index.md
similarity index 100%
rename from docs-vuepress/articles/index.md
rename to docs-vitepress/articles/index.md
diff --git a/docs-vuepress/articles/mpx-cli-next.md b/docs-vitepress/articles/mpx-cli-next.md
similarity index 100%
rename from docs-vuepress/articles/mpx-cli-next.md
rename to docs-vitepress/articles/mpx-cli-next.md
diff --git a/docs-vuepress/articles/mpx-cube-ui.md b/docs-vitepress/articles/mpx-cube-ui.md
similarity index 100%
rename from docs-vuepress/articles/mpx-cube-ui.md
rename to docs-vitepress/articles/mpx-cube-ui.md
diff --git a/docs-vuepress/articles/mpx1.md b/docs-vitepress/articles/mpx1.md
similarity index 100%
rename from docs-vuepress/articles/mpx1.md
rename to docs-vitepress/articles/mpx1.md
diff --git a/docs-vuepress/articles/mpx2.md b/docs-vitepress/articles/mpx2.md
similarity index 100%
rename from docs-vuepress/articles/mpx2.md
rename to docs-vitepress/articles/mpx2.md
diff --git a/docs-vuepress/articles/performance.md b/docs-vitepress/articles/performance.md
similarity index 100%
rename from docs-vuepress/articles/performance.md
rename to docs-vitepress/articles/performance.md
diff --git a/docs-vuepress/articles/size-control.md b/docs-vitepress/articles/size-control.md
similarity index 100%
rename from docs-vuepress/articles/size-control.md
rename to docs-vitepress/articles/size-control.md
diff --git a/docs-vuepress/articles/ts-derivation.md b/docs-vitepress/articles/ts-derivation.md
similarity index 100%
rename from docs-vuepress/articles/ts-derivation.md
rename to docs-vitepress/articles/ts-derivation.md
diff --git a/docs-vuepress/articles/unit-test.md b/docs-vitepress/articles/unit-test.md
similarity index 100%
rename from docs-vuepress/articles/unit-test.md
rename to docs-vitepress/articles/unit-test.md
diff --git a/docs-vuepress/assets/images/1666074957603.jpg b/docs-vitepress/assets/images/1666074957603.jpg
similarity index 100%
rename from docs-vuepress/assets/images/1666074957603.jpg
rename to docs-vitepress/assets/images/1666074957603.jpg
diff --git a/docs-vuepress/assets/images/cloud.png b/docs-vitepress/assets/images/cloud.png
similarity index 100%
rename from docs-vuepress/assets/images/cloud.png
rename to docs-vitepress/assets/images/cloud.png
diff --git a/docs-vuepress/assets/images/select-ts-version.png b/docs-vitepress/assets/images/select-ts-version.png
similarity index 100%
rename from docs-vuepress/assets/images/select-ts-version.png
rename to docs-vitepress/assets/images/select-ts-version.png
diff --git a/docs/images/start-tips1.png b/docs-vitepress/assets/images/start-tips1.png
similarity index 100%
rename from docs/images/start-tips1.png
rename to docs-vitepress/assets/images/start-tips1.png
diff --git a/docs/images/start-tips2.png b/docs-vitepress/assets/images/start-tips2.png
similarity index 100%
rename from docs/images/start-tips2.png
rename to docs-vitepress/assets/images/start-tips2.png
diff --git a/docs-vuepress/desc.md b/docs-vitepress/desc.md
similarity index 100%
rename from docs-vuepress/desc.md
rename to docs-vitepress/desc.md
diff --git a/docs-vuepress/guide/advance/ability-compatible.md b/docs-vitepress/guide/advance/ability-compatible.md
similarity index 100%
rename from docs-vuepress/guide/advance/ability-compatible.md
rename to docs-vitepress/guide/advance/ability-compatible.md
diff --git a/docs-vuepress/guide/advance/async-subpackage.md b/docs-vitepress/guide/advance/async-subpackage.md
similarity index 100%
rename from docs-vuepress/guide/advance/async-subpackage.md
rename to docs-vitepress/guide/advance/async-subpackage.md
diff --git a/docs-vuepress/guide/advance/build-config.md b/docs-vitepress/guide/advance/build-config.md
similarity index 100%
rename from docs-vuepress/guide/advance/build-config.md
rename to docs-vitepress/guide/advance/build-config.md
diff --git a/docs-vuepress/guide/advance/custom-output-path.md b/docs-vitepress/guide/advance/custom-output-path.md
similarity index 100%
rename from docs-vuepress/guide/advance/custom-output-path.md
rename to docs-vitepress/guide/advance/custom-output-path.md
diff --git a/docs-vuepress/guide/advance/dll-plugin.md b/docs-vitepress/guide/advance/dll-plugin.md
similarity index 100%
rename from docs-vuepress/guide/advance/dll-plugin.md
rename to docs-vitepress/guide/advance/dll-plugin.md
diff --git a/docs-vuepress/guide/advance/i18n.md b/docs-vitepress/guide/advance/i18n.md
similarity index 100%
rename from docs-vuepress/guide/advance/i18n.md
rename to docs-vitepress/guide/advance/i18n.md
diff --git a/docs-vuepress/guide/advance/image-process.md b/docs-vitepress/guide/advance/image-process.md
similarity index 100%
rename from docs-vuepress/guide/advance/image-process.md
rename to docs-vitepress/guide/advance/image-process.md
diff --git a/docs-vuepress/guide/advance/mixin.md b/docs-vitepress/guide/advance/mixin.md
similarity index 100%
rename from docs-vuepress/guide/advance/mixin.md
rename to docs-vitepress/guide/advance/mixin.md
diff --git a/docs-vuepress/guide/advance/npm.md b/docs-vitepress/guide/advance/npm.md
similarity index 100%
rename from docs-vuepress/guide/advance/npm.md
rename to docs-vitepress/guide/advance/npm.md
diff --git a/docs-vuepress/guide/advance/pinia.md b/docs-vitepress/guide/advance/pinia.md
similarity index 100%
rename from docs-vuepress/guide/advance/pinia.md
rename to docs-vitepress/guide/advance/pinia.md
diff --git a/docs-vuepress/guide/advance/platform.md b/docs-vitepress/guide/advance/platform.md
similarity index 100%
rename from docs-vuepress/guide/advance/platform.md
rename to docs-vitepress/guide/advance/platform.md
diff --git a/docs-vuepress/guide/advance/plugin.md b/docs-vitepress/guide/advance/plugin.md
similarity index 100%
rename from docs-vuepress/guide/advance/plugin.md
rename to docs-vitepress/guide/advance/plugin.md
diff --git a/docs-vuepress/guide/advance/progressive.md b/docs-vitepress/guide/advance/progressive.md
similarity index 100%
rename from docs-vuepress/guide/advance/progressive.md
rename to docs-vitepress/guide/advance/progressive.md
diff --git a/docs-vuepress/guide/advance/provide-inject.md b/docs-vitepress/guide/advance/provide-inject.md
similarity index 100%
rename from docs-vuepress/guide/advance/provide-inject.md
rename to docs-vitepress/guide/advance/provide-inject.md
diff --git a/docs-vuepress/guide/advance/resource-resolve.md b/docs-vitepress/guide/advance/resource-resolve.md
similarity index 100%
rename from docs-vuepress/guide/advance/resource-resolve.md
rename to docs-vitepress/guide/advance/resource-resolve.md
diff --git a/docs-vuepress/guide/advance/size-report.md b/docs-vitepress/guide/advance/size-report.md
similarity index 100%
rename from docs-vuepress/guide/advance/size-report.md
rename to docs-vitepress/guide/advance/size-report.md
diff --git a/docs-vuepress/guide/advance/ssr.md b/docs-vitepress/guide/advance/ssr.md
similarity index 100%
rename from docs-vuepress/guide/advance/ssr.md
rename to docs-vitepress/guide/advance/ssr.md
diff --git a/docs-vuepress/guide/advance/store.md b/docs-vitepress/guide/advance/store.md
similarity index 100%
rename from docs-vuepress/guide/advance/store.md
rename to docs-vitepress/guide/advance/store.md
diff --git a/docs-vuepress/guide/advance/subpackage.md b/docs-vitepress/guide/advance/subpackage.md
similarity index 100%
rename from docs-vuepress/guide/advance/subpackage.md
rename to docs-vitepress/guide/advance/subpackage.md
diff --git a/docs-vuepress/guide/advance/utility-first-css.md b/docs-vitepress/guide/advance/utility-first-css.md
similarity index 100%
rename from docs-vuepress/guide/advance/utility-first-css.md
rename to docs-vitepress/guide/advance/utility-first-css.md
diff --git a/docs-vuepress/guide/basic/class-style-binding.md b/docs-vitepress/guide/basic/class-style-binding.md
similarity index 100%
rename from docs-vuepress/guide/basic/class-style-binding.md
rename to docs-vitepress/guide/basic/class-style-binding.md
diff --git a/docs-vuepress/guide/basic/component.md b/docs-vitepress/guide/basic/component.md
similarity index 100%
rename from docs-vuepress/guide/basic/component.md
rename to docs-vitepress/guide/basic/component.md
diff --git a/docs-vuepress/guide/basic/conditional-render.md b/docs-vitepress/guide/basic/conditional-render.md
similarity index 100%
rename from docs-vuepress/guide/basic/conditional-render.md
rename to docs-vitepress/guide/basic/conditional-render.md
diff --git a/docs-vuepress/guide/basic/css.md b/docs-vitepress/guide/basic/css.md
similarity index 100%
rename from docs-vuepress/guide/basic/css.md
rename to docs-vitepress/guide/basic/css.md
diff --git a/docs-vuepress/guide/basic/event.md b/docs-vitepress/guide/basic/event.md
similarity index 100%
rename from docs-vuepress/guide/basic/event.md
rename to docs-vitepress/guide/basic/event.md
diff --git a/docs-vuepress/guide/basic/ide.md b/docs-vitepress/guide/basic/ide.md
similarity index 100%
rename from docs-vuepress/guide/basic/ide.md
rename to docs-vitepress/guide/basic/ide.md
diff --git a/docs-vuepress/guide/basic/intro.md b/docs-vitepress/guide/basic/intro.md
similarity index 100%
rename from docs-vuepress/guide/basic/intro.md
rename to docs-vitepress/guide/basic/intro.md
diff --git a/docs-vuepress/guide/basic/list-render.md b/docs-vitepress/guide/basic/list-render.md
similarity index 100%
rename from docs-vuepress/guide/basic/list-render.md
rename to docs-vitepress/guide/basic/list-render.md
diff --git a/docs-vuepress/guide/basic/option-chain.md b/docs-vitepress/guide/basic/option-chain.md
similarity index 100%
rename from docs-vuepress/guide/basic/option-chain.md
rename to docs-vitepress/guide/basic/option-chain.md
diff --git a/docs-vuepress/guide/basic/reactive.md b/docs-vitepress/guide/basic/reactive.md
similarity index 100%
rename from docs-vuepress/guide/basic/reactive.md
rename to docs-vitepress/guide/basic/reactive.md
diff --git a/docs-vuepress/guide/basic/refs.md b/docs-vitepress/guide/basic/refs.md
similarity index 100%
rename from docs-vuepress/guide/basic/refs.md
rename to docs-vitepress/guide/basic/refs.md
diff --git a/docs-vuepress/guide/basic/single-file.md b/docs-vitepress/guide/basic/single-file.md
similarity index 100%
rename from docs-vuepress/guide/basic/single-file.md
rename to docs-vitepress/guide/basic/single-file.md
diff --git a/docs-vuepress/guide/basic/start.md b/docs-vitepress/guide/basic/start.md
similarity index 100%
rename from docs-vuepress/guide/basic/start.md
rename to docs-vitepress/guide/basic/start.md
diff --git a/docs-vuepress/guide/basic/template.md b/docs-vitepress/guide/basic/template.md
similarity index 100%
rename from docs-vuepress/guide/basic/template.md
rename to docs-vitepress/guide/basic/template.md
diff --git a/docs-vuepress/guide/basic/two-way-binding.md b/docs-vitepress/guide/basic/two-way-binding.md
similarity index 100%
rename from docs-vuepress/guide/basic/two-way-binding.md
rename to docs-vitepress/guide/basic/two-way-binding.md
diff --git a/docs-vuepress/guide/composition-api/composition-api.md b/docs-vitepress/guide/composition-api/composition-api.md
similarity index 100%
rename from docs-vuepress/guide/composition-api/composition-api.md
rename to docs-vitepress/guide/composition-api/composition-api.md
diff --git a/docs-vuepress/guide/composition-api/reactive-api.md b/docs-vitepress/guide/composition-api/reactive-api.md
similarity index 100%
rename from docs-vuepress/guide/composition-api/reactive-api.md
rename to docs-vitepress/guide/composition-api/reactive-api.md
diff --git a/docs-vuepress/guide/extend/api-proxy.md b/docs-vitepress/guide/extend/api-proxy.md
similarity index 84%
rename from docs-vuepress/guide/extend/api-proxy.md
rename to docs-vitepress/guide/extend/api-proxy.md
index b7d13b7304..c964112de2 100644
--- a/docs-vuepress/guide/extend/api-proxy.md
+++ b/docs-vitepress/guide/extend/api-proxy.md
@@ -29,14 +29,14 @@ proxy.navigateTo({
 
 ## Options
 
-|参数名称|类型|含义|是否必填|默认值|备注|
-|---|---|---|---|---|---|
-|platform|Object|各平台之间的转换|否|{ from:'', to:'' }|使用 mpx 脚手架配置会自动进行转换，无需配置|
+|参数名称|类型|含义|是否必填| 默认值   |备注|
+|---|---|---|---|-------|---|
+|platform|Object|各平台之间的转换|否|       |使用 mpx 脚手架配置会自动进行转换，无需配置|
 |exclude|Array(String)|跨平台时不需要转换的 api|-|
-|usePromise|Boolean|是否将 api 转化为 promise 格式使用|否|false|-|
-|whiteList|Array(String)|强行转化为 promise 格式的 api|否|[]|需要 usePromise 设为 true|
-|blackList|Array(String)|强制不变成 promise 格式的 api|否|[]|-|
-|fallbackMap|Object|对于不支持的API，允许配置一个映射表，接管不存在的API|否|{}|-|
+|usePromise|Boolean|是否将 api 转化为 promise 格式使用|否| false |-|
+|whiteList|Array(String)|强行转化为 promise 格式的 api|否| []    |需要 usePromise 设为 true|
+|blackList|Array(String)|强制不变成 promise 格式的 api|否| []    |-|
+|fallbackMap|Object|对于不支持的API，允许配置一个映射表，接管不存在的API|否| {}    |-|
 
 ## example
 
diff --git a/docs-vuepress/guide/extend/fetch.md b/docs-vitepress/guide/extend/fetch.md
similarity index 100%
rename from docs-vuepress/guide/extend/fetch.md
rename to docs-vitepress/guide/extend/fetch.md
diff --git a/docs-vuepress/guide/extend/index.md b/docs-vitepress/guide/extend/index.md
similarity index 100%
rename from docs-vuepress/guide/extend/index.md
rename to docs-vitepress/guide/extend/index.md
diff --git a/docs-vuepress/guide/extend/mock.md b/docs-vitepress/guide/extend/mock.md
similarity index 100%
rename from docs-vuepress/guide/extend/mock.md
rename to docs-vitepress/guide/extend/mock.md
diff --git a/docs-vuepress/guide/migrate/2.7.md b/docs-vitepress/guide/migrate/2.7.md
similarity index 100%
rename from docs-vuepress/guide/migrate/2.7.md
rename to docs-vitepress/guide/migrate/2.7.md
diff --git a/docs-vuepress/guide/migrate/2.8.md b/docs-vitepress/guide/migrate/2.8.md
similarity index 100%
rename from docs-vuepress/guide/migrate/2.8.md
rename to docs-vitepress/guide/migrate/2.8.md
diff --git a/docs-vuepress/guide/migrate/2.9.md b/docs-vitepress/guide/migrate/2.9.md
similarity index 100%
rename from docs-vuepress/guide/migrate/2.9.md
rename to docs-vitepress/guide/migrate/2.9.md
diff --git a/docs-vuepress/guide/migrate/mpx-cli-3.md b/docs-vitepress/guide/migrate/mpx-cli-3.md
similarity index 100%
rename from docs-vuepress/guide/migrate/mpx-cli-3.md
rename to docs-vitepress/guide/migrate/mpx-cli-3.md
diff --git a/docs-vuepress/guide/platform/basic.md b/docs-vitepress/guide/platform/basic.md
similarity index 100%
rename from docs-vuepress/guide/platform/basic.md
rename to docs-vitepress/guide/platform/basic.md
diff --git a/docs-vuepress/guide/platform/miniprogram.md b/docs-vitepress/guide/platform/miniprogram.md
similarity index 100%
rename from docs-vuepress/guide/platform/miniprogram.md
rename to docs-vitepress/guide/platform/miniprogram.md
diff --git a/docs-vuepress/guide/platform/rn.md b/docs-vitepress/guide/platform/rn.md
similarity index 97%
rename from docs-vuepress/guide/platform/rn.md
rename to docs-vitepress/guide/platform/rn.md
index 78d4430a9e..78b4ac2810 100644
--- a/docs-vuepress/guide/platform/rn.md
+++ b/docs-vitepress/guide/platform/rn.md
@@ -688,7 +688,7 @@ Mpx 输出 React Native 支持以下模版指令。
 | next-margin             | String  | `0`                 | 后边距，可用于露出后一项的一小部分，接受px |
 | scale                   | Boolean  | `false`            | 滑动时是否开启前后元素缩小,默认是缩放0.7倍, 暂不支持自定义 |
 | easing-function         | String  | `linear`      | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic|
-| bindchange              | eventhandle|   无          | current 改变时会触发 change 事件，event.detail = {current, source}| 
+| bindchange              | eventhandle|   无          | current 改变时会触发 change 事件，`event.detail = {current, source}`| 
 
 
 
@@ -697,7 +697,7 @@ Mpx 输出 React Native 支持以下模版指令。
 
 | 事件名           | 说明                |
 | ----------------| ------------------ |
-| bindchange| current 改变时会触发 change 事件，event.detail = {current, source}|
+| bindchange| current 改变时会触发 change 事件，`event.detail = {current, source}`|
 
 #### swiper-item
 仅可放置在swiper组件中，宽高自动设置为100%。
@@ -738,8 +738,8 @@ movable-view的可移动区域。
 
 | 事件名               | 说明                                       |
 | -------------------- | ------------------------------------------ |
-| bindchange        | 拖动过程中触发的事件，event.detail = {x, y, source} |
-| bindscale         | 缩放过程中触发的事件，event.detail = {x, y, scale}    |
+| bindchange        | 拖动过程中触发的事件，`event.detail = {x, y, source}` |
+| bindscale         | 缩放过程中触发的事件，`event.detail = {x, y, scale}`    |
 | htouchmove          | 初次手指触摸后移动为横向的移动时触发 |
 | vtouchmove    | 初次手指触摸后移动为纵向的移动时触发                      |
 
@@ -847,7 +847,7 @@ movable-view的可移动区域。
 
 | 事件名           | 说明                |
 | ----------------| ------------------ |
-| bindchange      | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } |
+| bindchange      | checkbox-group 中选中项发生改变时触发 change 事件，`detail = { value: [ 选中的 checkbox 的 value 的数组 ] } `|
 
 
 #### radio
@@ -872,7 +872,7 @@ movable-view的可移动区域。
 
 | 事件名           | 说明                |
 | ----------------| ------------------ |
-| bindchange      | radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] } |
+| bindchange      | radio-group 中选中项发生改变时触发 change 事件，`detail = { value: [ 选中的 radio 的 value 的数组 ] }` |
 
 
 #### form
@@ -884,7 +884,7 @@ movable-view的可移动区域。
 
 | 事件名     | 说明                                                |
 | ---------- | --------------------------------------------------- |
-| bindsubmit | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} } |
+| bindsubmit | 携带 form 中的数据触发 submit 事件，`event.detail = {value : {'name': 'value'} }` |
 | bindreset  | 表单重置时会触发 reset 事件 |
 
 
@@ -916,11 +916,11 @@ movable-view的可移动区域。
 
 | 事件名                | 说明                                                                               |
 | ---------------------| ---------------------------------------------------------------------------------- |
-| bindinput            | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode`                     |
-| bindfocus            | 输入框聚焦时触发，event.detail = { value }，不支持 `height`                            |
-| bindblur             | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` |
-| bindconfirm          | 点击完成按钮时触发，event.detail = { value }                                          |
-| bind:selectionchange | 选区改变事件, event.detail = { selectionStart, selectionEnd }                        |
+| bindinput            | 键盘输入时触发，`event.detail = { value, cursor }`，不支持 `keyCode`                     |
+| bindfocus            | 输入框聚焦时触发，`event.detail = { value }`，不支持 `height`                            |
+| bindblur             | 输入框失去焦点时触发，`event.detail = { value }`，不支持 `encryptedValue`、`encryptError` |
+| bindconfirm          | 点击完成按钮时触发，`event.detail = { value }`                                         |
+| bind:selectionchange | 选区改变事件, `event.detail = { selectionStart, selectionEnd }`                      |
 
 方法
 
@@ -962,12 +962,12 @@ movable-view的可移动区域。
 
 | 事件名                | 说明                                                                               |
 | ---------------------| ---------------------------------------------------------------------------------- |
-| bindinput            | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode`                     |
-| bindfocus            | 输入框聚焦时触发，event.detail = { value }，不支持 `height`                            |
-| bindblur             | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` |
-| bindconfirm          | 点击完成按钮时触发，event.detail = { value }                                          |
-| bindlinechange       | 输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 `heightRpx`    |
-| bind:selectionchange | 选区改变事件, {selectionStart, selectionEnd}                                         |
+| bindinput            | 键盘输入时触发，`event.detail = { value, cursor }`，不支持 `keyCode`                     |
+| bindfocus            | 输入框聚焦时触发，`event.detail = { value }`，不支持 `height`                            |
+| bindblur             | 输入框失去焦点时触发，`event.detail = { value }`，不支持 `encryptedValue`、`encryptError` |
+| bindconfirm          | 点击完成按钮时触发，`event.detail = { value }`                                          |
+| bindlinechange       | 输入框行数变化时调用，`event.detail = { height: 0, lineCount: 0 }`，不支持 `heightRpx`    |
+| bind:selectionchange | 选区改变事件, `event.detail = {selectionStart, selectionEnd}`                                         |
 
 方法
 
@@ -1117,8 +1117,8 @@ movable-view的可移动区域。
 
 | 事件名           | 说明                                                 |
 | ----------------| --------------------------------------------------- |
-| binderror       | 当错误发生时触发，event.detail = { errMsg }            |
-| bindload        | 当图片载入完毕时触发，event.detail = { height, width }  |
+| binderror       | 当错误发生时触发，`event.detail = { errMsg }`            |
+| bindload        | 当图片载入完毕时触发，`event.detail = { height, width }`  |
 
 注意事项
 
@@ -1192,7 +1192,7 @@ movable-view的可移动区域。
 | bindtouchend	    | eventhandle  | 手指触摸动作结束	|
 | bindtouchcancel	    | eventhandle  | 手指触摸动作被打断	|
 | bindlongpress    | eventhandle  | 手指长按 350ms 之后触发	|
-| binderror	    | eventhandle  | 当发生错误时触发 error 事件， detail = {errMsg}	|
+| binderror	    | eventhandle  | 当发生错误时触发 error 事件， `detail = {errMsg}`	|
 
 API
 
@@ -1921,7 +1921,7 @@ background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pi
 background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
 ```
 #### box-shadow
-设置阴影颜色、阴影偏移量、阴影模糊半径，因 RN 不支持 box-shadow 属性，实际是由 mpx 按 RN 支持的 shadowOffset: { width?: number, height?: number }; shadowRadius: number; shadowColor: number; 属性和顺序转换成对应的属性。
+设置阴影颜色、阴影偏移量、阴影模糊半径，因 RN 不支持 box-shadow 属性，实际是由 mpx 按 RN 支持的 shadowOffset: \{ width?: number, height?: number \}; shadowRadius: number; shadowColor: number; 属性和顺序转换成对应的属性。
 ##### 值类型
 offset-x|offset-y|blur-radius 值为 number，单位参考[数值类型单位说明](#数值类型单位说明)，shadow-color 为 color 类型，参考[Color](#色值-color-类型支持的值格式说明)
 ##### 简写规则
@@ -1962,7 +1962,7 @@ object-fit: contain;
 #### transform
 设置旋转、缩放、倾斜或平移
 ##### 值类型
-array of objects (only rn): [{matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]
+array of objects (only rn): `[{matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]`
 
 string
 ##### 代码示例
@@ -2278,7 +2278,7 @@ user-select: contain;
 user-select: all;
 ```
 #### text-shadow
-设置文本阴影，因 RN 不支持 text-shadow 属性，实际是由 mpx 按 RN 支持的 textShadowOffset: { width?: number, height?: number }; textShadowRadius: number; textShadowColor: number; 属性和顺序转换成对应的属性。
+设置文本阴影，因 RN 不支持 text-shadow 属性，实际是由 mpx 按 RN 支持的 textShadowOffset: \{ width?: number, height?: number \}; textShadowRadius: number; textShadowColor: number; 属性和顺序转换成对应的属性。
 ##### 值类型
 offset-x|offset-y|blur-radius 值为 number，单位参考[数值类型单位说明](#数值类型单位说明)，textShadowColor 为 color 类型，参考[Color](#色值-color-类型支持的值格式说明)
 ##### 简写规则
diff --git a/docs-vuepress/guide/platform/web.md b/docs-vitepress/guide/platform/web.md
similarity index 100%
rename from docs-vuepress/guide/platform/web.md
rename to docs-vitepress/guide/platform/web.md
diff --git a/docs-vuepress/guide/tool/e2e-test.md b/docs-vitepress/guide/tool/e2e-test.md
similarity index 100%
rename from docs-vuepress/guide/tool/e2e-test.md
rename to docs-vitepress/guide/tool/e2e-test.md
diff --git a/docs-vuepress/guide/tool/ts.md b/docs-vitepress/guide/tool/ts.md
similarity index 100%
rename from docs-vuepress/guide/tool/ts.md
rename to docs-vitepress/guide/tool/ts.md
diff --git a/docs-vuepress/guide/tool/unit-test.md b/docs-vitepress/guide/tool/unit-test.md
similarity index 100%
rename from docs-vuepress/guide/tool/unit-test.md
rename to docs-vitepress/guide/tool/unit-test.md
diff --git a/docs-vuepress/guide/understand/compile.md b/docs-vitepress/guide/understand/compile.md
similarity index 100%
rename from docs-vuepress/guide/understand/compile.md
rename to docs-vitepress/guide/understand/compile.md
diff --git a/docs-vuepress/guide/understand/runtime.md b/docs-vitepress/guide/understand/runtime.md
similarity index 100%
rename from docs-vuepress/guide/understand/runtime.md
rename to docs-vitepress/guide/understand/runtime.md
diff --git a/docs-vuepress/README.md b/docs-vitepress/index.md
similarity index 100%
rename from docs-vuepress/README.md
rename to docs-vitepress/index.md
diff --git a/docs-vitepress/package.json b/docs-vitepress/package.json
new file mode 100644
index 0000000000..2504083cc2
--- /dev/null
+++ b/docs-vitepress/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "docs-vuepress",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "type": "module",
+  "dependencies": {
+    "vue": "^3.4.37"
+  },
+  "devDependencies": {
+    "workbox-window": "^7.1.0"
+  }
+}
diff --git a/docs-vuepress/.vuepress/public/favicon.ico b/docs-vitepress/public/favicon.ico
similarity index 100%
rename from docs-vuepress/.vuepress/public/favicon.ico
rename to docs-vitepress/public/favicon.ico
diff --git a/docs-vuepress/.vuepress/public/logo.png b/docs-vitepress/public/logo.png
similarity index 100%
rename from docs-vuepress/.vuepress/public/logo.png
rename to docs-vitepress/public/logo.png
diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js
deleted file mode 100644
index 1882a89e40..0000000000
--- a/docs-vuepress/.vuepress/config.js
+++ /dev/null
@@ -1,200 +0,0 @@
-const { headerPlugin } = require('./headerMdPlugin')
-
-const sidebar = {
-  '/guide/': [
-    {
-      title: '基础',
-      collapsable: false,
-      children: [
-        'basic/start',
-        'basic/intro',
-        'basic/single-file',
-        'basic/ide',
-        'basic/template',
-        'basic/css',
-        'basic/reactive',
-        'basic/class-style-binding',
-        'basic/conditional-render',
-        'basic/list-render',
-        'basic/event',
-        'basic/two-way-binding',
-        'basic/component',
-        'basic/refs',
-        'basic/option-chain'
-      ]
-    },
-    {
-      title: '进阶',
-      collapsable: false,
-      children: [
-        'advance/store',
-        'advance/pinia',
-        'advance/mixin',
-        'advance/npm',
-        'advance/subpackage',
-        'advance/async-subpackage',
-        'advance/platform',
-        'advance/i18n',
-        'advance/size-report',
-        'advance/image-process',
-        'advance/progressive',
-        'advance/ability-compatible',
-        'advance/plugin',
-        'advance/custom-output-path',
-        'advance/utility-first-css',
-        'advance/ssr',
-        'advance/provide-inject',
-        'advance/build-config'
-      ]
-    },
-    {
-      title: '跨端',
-      collapsable: false,
-      children: [
-        'platform/basic',
-        // 'platform/miniprogram',
-        // 'platform/web',
-        'platform/rn'
-      ]
-    },
-    {
-      title: '组合式 API',
-      collapsable: false,
-      children: [
-        'composition-api/composition-api',
-        'composition-api/reactive-api'
-      ]
-    },
-    {
-      title: '工具',
-      collapsable: false,
-      children: [
-        'tool/ts',
-        'tool/unit-test',
-        'tool/e2e-test'
-      ]
-    },
-    {
-      title: '拓展',
-      collapsable: false,
-      path: '/guide/extend',
-      children: [
-        'extend/fetch',
-        'extend/api-proxy',
-        'extend/mock'
-      ]
-    },
-    {
-      title: '理解',
-      collapsable: false,
-      children: [
-        'understand/runtime',
-        'understand/compile'
-      ]
-    },
-    {
-      title: '迁移',
-      collapsable: false,
-      children: [
-        'migrate/2.9',
-        'migrate/2.8',
-        'migrate/2.7',
-        'migrate/mpx-cli-3'
-      ]
-    }
-  ],
-  '/api/': [
-    'app-config',
-    'global-api',
-    'instance-api',
-    'store-api',
-    'directives',
-    'compile',
-    'builtIn',
-    'reactivity-api',
-    'composition-api',
-    'optional-api',
-    'extend'
-  ],
-  '/articles/': [
-    { title: '滴滴开源小程序框架Mpx', path: '1.0' },
-    { title: 'Mpx发布2.0，完美支持跨平台开发', path: '2.0' },
-    { title: '小程序框架运行时性能大测评', path: 'performance' },
-    { title: 'Mpx框架初体验', path: 'mpx1' },
-    { title: 'Mpx框架技术揭秘', path: 'mpx2' },
-    { title: '基于Mpx的小程序体积优化', path: 'size-control' },
-    { title: 'Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导', path: 'ts-derivation' },
-    { title: 'Mpx2.7 版本正式发布，大幅提升编译构建速度', path: '2.7-release' },
-    { title: 'Mpx2.8 版本正式发布，使用组合式 API 开发小程序', path: '2.8-release' },
-    { title: 'Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化', path: '2.9-release' },
-    { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' },
-    { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' },
-    { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'}
-  ]
-}
-
-const nav = [
-  { text: '指南', link: '/guide/basic/start' },
-  { text: 'API', link: '/api/index' },
-  { text: '文章', link: '/articles/index' },
-  { text: '更新记录', link: 'https://github.com/didi/mpx/releases', target:'_blank'},
-  { text: 'Github', link: 'https://github.com/didi/mpx', target:'_blank'}
-]
-
-module.exports = {
-  base: '/',
-  head: [
-    ['link', { rel: 'icon', href: '/favicon.ico' }],
-    // 插入一段 clarity 的数据分析的代码
-    ['script', { type: 'text/javascript' }, `(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");`]
-  ],
-  title: 'Mpx框架',
-  locales: {
-    '/': {
-      lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
-      title: 'Mpx框架',
-      description: 'Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。'
-    },
-  },
-  shouldPrefetch: () => false,
-  plugins: {
-    '@vuepress/pwa': {
-      serviceWorker: true,
-      updatePopup: {
-        message: '文档有更新啦！',
-        buttonText: '刷新'
-      }
-    },
-    '@vuepress/active-header-links': {
-      sidebarLinkSelector: '.header-anchor',
-      headerAnchorSelector: '.header-anchor'
-    }
-  },
-  themeConfig: {
-    // navbar: false,
-    algolia: {
-      apiKey: '7849f511f78afc4383a81f0137a91c0f',
-      indexName: 'mpxjs',
-    },
-    sidebarDepth: 1,
-    logo: '/logo.png',
-    displayAllHeaders: false,
-    sidebar,
-    nav
-  },
-  chainWebpack: (config, isServer) => {
-    // 添加node_modules避免resolve错误
-    config.resolve.modules.add('node_modules')
-  },
-  markdown: {
-    // markdown-it-toc 的选项
-    extendMarkdown: md => {
-      // 使用更多的 markdown-it 插件!
-      md.use(headerPlugin)
-    }
-  }
-}
diff --git a/docs-vuepress/.vuepress/enhanceApp.js b/docs-vuepress/.vuepress/enhanceApp.js
deleted file mode 100644
index 878e2134de..0000000000
--- a/docs-vuepress/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default ({ router }) => {
-  if (typeof process === 'undefined' || process.env.VUE_ENV !== 'server') {
-    router.onReady(() => {
-      const { app } = router
-
-      app.$once('hook:mounted', () => {
-        setTimeout(() => {
-          const { hash } = document.location
-          if (hash.length > 1) {
-            const id = decodeURIComponent(hash.substring(1))
-            const element = document.getElementById(id)
-            if (element) element.scrollIntoView()
-          }
-        }, 500)
-      })
-    })
-  }
-}
diff --git a/docs-vuepress/.vuepress/headerMdPlugin.js b/docs-vuepress/.vuepress/headerMdPlugin.js
deleted file mode 100644
index d78b29b20a..0000000000
--- a/docs-vuepress/.vuepress/headerMdPlugin.js
+++ /dev/null
@@ -1,84 +0,0 @@
-
-const rControl = /[\u0000-\u001f]/g;
-const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g;
-const anchorReg = /\{#([a-z0-9\-_]+?)\}\s*$/
-const slugify$1 = (content) => {
-    let str = content
-    if (anchorReg.test(content)) {
-        str = anchorReg.exec(content)[1]
-    }
-    return str.replace(rControl, "").replace(rSpecial, "-").replace(/\-{2,}/g, "-").replace(/^\-+|\-+$/g, "").replace(/^(\d)/, "_$1").toLowerCase();
-};
-
-const removeSlug$1 = (content) => {
-    let str = content
-    if (anchorReg.test(content)) {
-        str = str.split('{#')[0]
-    }
-    return str
-}
-const parseEmojis = (str) => {
-    return str.replace(/:(.+?):/g, (placeholder, key) => require$$0$3[key] || placeholder);
-};
-const unescapeHtml = (html) => html.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x3A;/g, ":").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
-const removeMarkdownTokens = (str) => str.replace(/(\[(.[^\]]+)\]\((.[^)]+)\))/g, "$2").replace(/(`|\*{1,3}|_)(.*?[^\\])\1/g, "$2").replace(/(\\)(\*|_|`|\!|<|\$)/g, "$2");
-const remvoeCustomAnchor = (str) => str.replace(/\{#([a-z0-9\-_]+?)\}\s*$/, "");
-const trim = (str) => str.trim();
-const removeNonCodeWrappedHTML = (str) => {
-    return String(str)
-};
-const compose = (...processors) => {
-    if (processors.length === 0)
-        return (input) => input;
-    if (processors.length === 1)
-        return processors[0];
-    return processors.reduce((prev, next) => {
-        return (str) => next(prev(str));
-    });
-};
-const parseHeader = compose(unescapeHtml, parseEmojis, remvoeCustomAnchor, removeMarkdownTokens, trim);
-const deeplyParseHeader = compose(removeNonCodeWrappedHTML, parseHeader);
-
-const headerPlugin = (md, include = ["h2", "h3"]) => {
-    md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
-        const token = tokens[i];
-        if (include.includes(token.tag)) {
-            const title = tokens[i + 1].content;
-            const slug = slugify$1(title)
-            const parseTitle = deeplyParseHeader(title)
-            tokens[i + 1].content = parseTitle
-            token.attrs.forEach((item) => {
-                if (item[0] === 'id') {
-                    item[1] = slug
-                }
-            })
-            const nextToken = tokens[i + 1]
-            if (nextToken.type === 'inline') {
-                const inlineTokenChild = nextToken.children
-                inlineTokenChild.forEach((child, index) => {
-                    if (child.type === 'link_open') {
-                        child.attrs = child.attrs.map((item) => {
-                            if (item[0] === 'href') {
-                                item[1] = '#' + slug
-                            }
-                            return item
-                        })
-                    }
-                    if (child.type === 'text' && child.content && child.content.trim()) {
-                        if (child.content.includes('{#')) {
-                            child.content = removeSlug$1(child.content)
-                        }
-                    }
-                })
-            }
-        }
-        return self.renderToken(tokens, i, options);
-    };
-};
-
-
-module.exports = {
-    headerPlugin,
-    deeplyParseHeader,
-    slugify$1
-}
diff --git a/docs-vuepress/.vuepress/public/baidu_verify_codeva-GYcT5ujCTB.html b/docs-vuepress/.vuepress/public/baidu_verify_codeva-GYcT5ujCTB.html
deleted file mode 100644
index d4526e039c..0000000000
--- a/docs-vuepress/.vuepress/public/baidu_verify_codeva-GYcT5ujCTB.html
+++ /dev/null
@@ -1 +0,0 @@
-e197dca3487ecef730bbb3a05e79d985
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/public/manifest.webmanifest b/docs-vuepress/.vuepress/public/manifest.webmanifest
deleted file mode 100644
index dcc89dfc8b..0000000000
--- a/docs-vuepress/.vuepress/public/manifest.webmanifest
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "name": "Mpx",
-    "short_name": "Mpx",
-    "icons": [
-        {
-            "src": "https://dpubstatic.udache.com/static/dpubimg/1ESVodfAED/logo.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        }
-    ],
-    "start_url": "/index.html",
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/styles/index.styl b/docs-vuepress/.vuepress/styles/index.styl
deleted file mode 100644
index f0516b9218..0000000000
--- a/docs-vuepress/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,151 +0,0 @@
-.navbar .site-name
-  display none!important
-
-// .sidebar .page
-//   top 3.5rem !important
-
-aside.sidebar
-  // top 4rem !important
-
-main.page
-  // margin-top 3.5rem !important
-
-a
-  word-break: break-all
-
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f9f9f9;
-  --vt-c-white-mute: #f1f1f1;
-
-  --vt-c-black: #1a1a1a;
-  --vt-c-black-pure: #000000;
-  --vt-c-black-soft: #242424;
-  --vt-c-black-mute: #2f2f2f;
-
-  --vt-c-indigo: #213547;
-  --vt-c-indigo-soft: #476582;
-  --vt-c-indigo-light: #aac8e4;
-
-  --vt-c-gray: #8e8e8e;
-  --vt-c-gray-light-1: #aeaeae;
-  --vt-c-gray-light-2: #c7c7c7;
-  --vt-c-gray-light-3: #d1d1d1;
-  --vt-c-gray-light-4: #e5e5e5;
-  --vt-c-gray-light-5: #f2f2f2;
-  --vt-c-gray-dark-1: #636363;
-  --vt-c-gray-dark-2: #484848;
-  --vt-c-gray-dark-3: #3a3a3a;
-  --vt-c-gray-dark-4: #282828;
-  --vt-c-gray-dark-5: #202020;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
-  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
-  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
-  --vt-c-text-light-code: var(--vt-c-indigo-soft);
-
-  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
-  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
-  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
-  --vt-c-text-dark-code: var(--vt-c-indigo-light);
-
-  --vt-c-green: #42b883;
-  --vt-c-green-light: #42d392;
-  --vt-c-green-lighter: #35eb9a;
-  --vt-c-green-dark: #33a06f;
-  --vt-c-green-darker: #155f3e;
-
-  --vt-c-blue: #3b8eed;
-  --vt-c-blue-light: #549ced;
-  --vt-c-blue-lighter: #50a2ff;
-  --vt-c-blue-dark: #3468a3;
-  --vt-c-blue-darker: #255489;
-
-  --vt-c-yellow: #ffc517;
-  --vt-c-yellow-light: #ffe417;
-  --vt-c-yellow-lighter: #ffff17;
-  --vt-c-yellow-dark: #e0ad15;
-  --vt-c-yellow-darker: #bc9112;
-
-  --vt-c-red: #ed3c50;
-  --vt-c-red-light: #f43771;
-  --vt-c-red-lighter: #fd1d7c;
-  --vt-c-red-dark: #cd2d3f;
-  --vt-c-red-darker: #ab2131;
-
-  --vt-c-purple: #de41e0;
-  --vt-c-purple-light: #e936eb;
-  --vt-c-purple-lighter: #f616f8;
-  --vt-c-purple-dark: #823c83;
-  --vt-c-purple-darker: #602960;
-}
-
-:root {
-  --c-brand: #3eaf7c;
-
-  --c-bg: #ffffff;
-  --c-bg-light: #f3f4f5;
-  --c-bg-lighter: #eeeeee;
-
-  --c-text: #2c3e50;
-  --c-text-light: #3a5169;
-  --c-text-quote: #999999;
-
-  --c-border-dark: #dfe2e5;
-
-  --vt-c-bg: var(--vt-c-white);
-  --vt-c-bg-soft: var(--vt-c-white-soft);
-  --vt-c-bg-mute: var(--vt-c-white-mute);
-
-  --vt-c-divider: var(--vt-c-divider-light-1);
-  --vt-c-divider-light: var(--vt-c-divider-light-2);
-
-  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
-  --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
-
-  --vt-c-text-1: var(--vt-c-text-light-1);
-  --vt-c-text-2: var(--vt-c-text-light-2);
-  --vt-c-text-3: var(--vt-c-text-light-3);
-  --vt-c-text-4: var(--vt-c-text-light-4);
-  --vt-c-text-code: var(--vt-c-text-light-code);
-
-  --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
-  --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
-  --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
-  --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
-
-  --vt-c-brand: var(--vt-c-green);
-  --vt-c-brand-light: var(--vt-c-green-light);
-  --vt-c-brand-dark: var(--vt-c-green-dark);
-  --vt-c-brand-highlight: var(--vt-c-brand-dark);
-
-  .DocSearch {
-  --docsearch-primary-color: var(--c-brand);
-  --docsearch-text-color: var(--c-text);
-  --docsearch-highlight-color: var(--c-brand);
-  --docsearch-muted-color: var(--c-text-quote);
-  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-  --docsearch-modal-background: var(--c-bg-light);
-  --docsearch-searchbox-background: var(--c-bg-lighter);
-  --docsearch-searchbox-focus-background: var(--c-bg);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
-  --docsearch-hit-color: var(--c-text-light);
-  --docsearch-hit-active-color: var(--c-bg);
-  --docsearch-hit-background: var(--c-bg);
-  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
-  --docsearch-footer-background: var(--c-bg);
-}
-}
-
-@media (max-width: 719px) {
-  :root {
-    --c-bg-lighter: none;
-  }
-}
diff --git a/docs-vuepress/.vuepress/styles/pallete.styl b/docs-vuepress/.vuepress/styles/pallete.styl
deleted file mode 100644
index bccbde797e..0000000000
--- a/docs-vuepress/.vuepress/styles/pallete.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-// responsive breakpoints
-$MQNarrow = 959px
-$MQMobile = 719px
-$MQMobileNarrow = 419px
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/theme/enhanceApp.js b/docs-vuepress/.vuepress/theme/enhanceApp.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs-vuepress/.vuepress/theme/index.js b/docs-vuepress/.vuepress/theme/index.js
deleted file mode 100644
index 93bb9bd1c1..0000000000
--- a/docs-vuepress/.vuepress/theme/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const formatHeaderSlugPlugin = require('./vuepress-format-header-slug-plugin')
-
-module.exports = {
-  extend: '@vuepress/theme-default',
-  plugins: [
-    ['@vuepress/search', {
-      searchMaxSuggestions: 10
-    }],
-    ['@vuepress/back-to-top'],
-    formatHeaderSlugPlugin
-  ]
-}
diff --git a/docs-vuepress/.vuepress/theme/layouts/HomepageLayout.vue b/docs-vuepress/.vuepress/theme/layouts/HomepageLayout.vue
deleted file mode 100644
index 7d48fac332..0000000000
--- a/docs-vuepress/.vuepress/theme/layouts/HomepageLayout.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="container">
-    <Navbar />
-    <mobile-view v-if="smallMode"></mobile-view>
-    <Content v-else />
-    <Footer />
-  </div>
-</template>
-
-<script>
-import Navbar from "../components/Navbar.vue";
-import MobileView from "../components/MobileView.vue";
-import Content from "../global-components/Content.vue";
-import Footer from "../global-components/Footer.vue";
-import ParentLayout from '@parent-theme/layouts/Layout.vue'
-export default {
-  components: {
-    Navbar,
-    Content,
-    Footer,
-    ParentLayout,
-    MobileView
-  },
-  data () {
-    return {
-      smallMode: false
-    }
-  },
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.smallMode = true
-      } else {
-        this.smallMode = false
-      }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
-  },
-  methods: {
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-      this.$emit('toggle-sidebar', this.isSidebarOpen)
-    }
-  }
-};
-</script>
-
-<style lang="stylus" scoped>
-</style>
\ No newline at end of file
diff --git a/docs-vuepress/api/optional-api.md b/docs-vuepress/api/optional-api.md
deleted file mode 100644
index 6a67628eab..0000000000
--- a/docs-vuepress/api/optional-api.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# 选项式 API
-
-### onAppInit
-- **类型：** `Function`
-- **详细：**
-
-通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。
-
-
-### onSSRAppCreated
-- **类型：** `Function`
-- **详细：**
-
-SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。
-
-**注意：** 仅 web 环境支持
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 5936879785..0000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# mpx文档
-
-该仓库为mpx文档仓库，使用gitbook搭建文档网站。
-
-修改文档可直接修改md文件，提交后会自动部署到[github pages](https://didi.github.io/mpx)
-
-若有较复杂的改动，需本地预览效果需先安装gitbook： `npm i -g gitbook-cli`  
-安装gitbook插件 `gitbook install`
-然后在本目录下 `gitbook serve`
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
deleted file mode 100644
index 0eb76a928e..0000000000
--- a/docs/SUMMARY.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Summary
-
-* [Introduction](intro.md)
-* [开始](start.md)
-* [单文件](single/what-is-single-file.md#单文件)
-    * [什么是单文件](single/what-is-single-file.md#介绍)
-    * [编辑器/IDE配置](single/what-is-single-file.md#编辑器ide高亮、提示)
-* [template增强特性](single/template-enhance.md#template增强特性)
-    * [class与style绑定](single/template-enhance.md#class与style绑定)
-    * [内联事件绑定](single/template-enhance.md#内联事件绑定)
-    * [动态组件](single/template-enhance.md#动态组件)
-    * [双向绑定](single/template-enhance.md#双向绑定)
-    * [获取节点](single/template-enhance.md#refs)
-* [script增强特性](single/script-enhance.md#script增强特性)
-    * [computed](single/script-enhance.md#computed)
-    * [watch](single/script-enhance.md#watch)
-    * [mixins](single/script-enhance.md#mixins)
-    * [lifeCycle](single/script-enhance.md#页面生命周期)
-* [style增强特性](single/style-enhance.md#style增强特性)
-    * [预处理支持](single/style-enhance.md#css预处理器)
-    * [样式引用](single/style-enhance.md#样式引用)
-    * [rpx转换](single/style-enhance.md#rpx转换)
-* [JSON增强特性](single/json-enhance.md#JSON增强特性)
-    * [packages](single/json-enhance.md#packages)
-    * [分包](single/json-enhance.md#分包)
-    * [自定义tabbar](single/json-enhance.md#自定义tabbar)
-* [数据管理](store/index.md#数据管理)
-    * [开始](store/index.md#开始)
-    * [state](store/index.md#state)
-    * [getter](store/index.md#getter)
-    * [mutation](store/index.md#mutation)
-    * [action](store/index.md#action)
-    * [子模块](store/index.md#module)
-    * [多实例store](store/index.md#多实例)
-* [构建配置](compilationEnhance/index.md)
-    * [自动配置](compilationEnhance/index.md#自动配置)
-    * [手动配置](compilationEnhance/index.md#手动配置)
-        * [@mpxjs/webpack-plugin](compilationEnhance/index.md#mpxjswebpack-plugin)
-        * [MpxWebpackPlugin.loader](compilationEnhance/index.md#mpxwebpackpluginloader)
-        * [@mpxjs/url-loader](compilationEnhance/index.md#mpxjsurl-loader)
-        * [output.filename](compilationEnhance/index.md#outputfilename)
-        * [optimization](compilationEnhance/index.md#optimization)
-* [多平台支持](platform.md)
-    * [多平台支持](platform.md#多平台支持)
-    * [跨平台编译](platform.md#跨平台编译)
-    * [跨平台输出web](platform.md#跨平台输出web)
-* [TS支持](ts.md)
-* [国际化i18n](i18n.md)
-* [渐进接入](progressive.md)
-    - [原生组件支持](progressive.md#原生自定义组件支持)
-    - [原生page支持](progressive.md#原生page支持)
-    - [导出原生](progressive.md#导出原生)
-* [API参考](api.md)
-    - [createApp](api.md#createapp)
-    - [createPage](api.md#createpage)
-    - [createComponent](api.md#createcomponent)
-    - [createStore](api.md#createstore)
-    - [toPureObject](api.md#topureobject)
-    - [observable](api.md#observable)
-    - [extendObservable](api.md#extendobservable)
-    - [watch](api.md#watchcontext-expr-handler)
-    - [use](api.md#mpxuse)
-    - [mixin](api.md#mpxmixin)
-    - [实例API](instance-api.md)
-* [拓展能力](extend/index.md)
-    * [fetch](extend/index.md#fetch)
-    * [api-proxy](extend/index.md#api-proxy)
-    * [mock](extend/index.md#mock)
-* [mpx运行机制](understanding/understanding.md)
-    * [数据响应与性能优化](understanding/understanding.md#数据响应与性能优化)
-    * [编译构建](understanding/understanding.md#编译构建)
-    * [图像资源处理](understanding/resource.md#图像资源处理)
-* [更新记录](https://github.com/didi/mpx/releases)
-* [2.0迁移指南](migrate.md)
-* [相关文章](articles/index.md)
-    * [1.0](articles/1.0.md)
-    * [2.0](articles/2.0.md)
-    * [mpx使用](articles/mpx1.md)
diff --git a/docs/Version2.0.md b/docs/Version2.0.md
deleted file mode 100644
index b93c87f79c..0000000000
--- a/docs/Version2.0.md
+++ /dev/null
@@ -1,16 +0,0 @@
-历时4个多月迭代开发，mpx正式成长为2.0版本，在专注提高小程序开发体验的道路上又前进了一大步，感谢相关同学的努力与付出，@pkingwa，@sky-admin，@httpsxiao，@xuehebinglan
-
-## Features
-
-* 完整支持了目前业内已发布的所有小程序平台（微信，支付宝，百度，qq，头条）
-* mpx小程序跨平台编译，目前已支持将微信mpx源码编译输出为其余已支持小程序平台目标代码，[点击查看详情](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91)
-* 小程序原生组件跨平台编译，目前已支持将微信原生组件编译输出为其余已支持小程序平台组件
-* api调用跨平台差异抹平`@mpxjs/api-proxy`
-* webview bridge跨平台差异抹平`@mpxjs/webview-bridge`
-* 深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(页面，组件，js module，wxs，template，媒体资源等)都会精确输出到分包目录中
-* render函数中完整支持wxs模块，[关于render函数点击查看详情](https://didi.github.io/mpx/understanding/understanding.html#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)
-* 支持模板引入，内联wxs，自定义tabbar，workers，云开发等原生能力，进一步完善原生兼容性
-* 新增this.$nextTick替换this.updated
-* 增强watch能力，支持`a,b`表达式同时监听a和b的变化，回调函数支持方法名字符串
-* 优化多实例store中mapStore使用体验
-* 新增增强指令`wx:show`，用于处理hidden样式优先级过低及跨平台兼容性问题
diff --git a/docs/api.md b/docs/api.md
deleted file mode 100644
index 4b024ded1c..0000000000
--- a/docs/api.md
+++ /dev/null
@@ -1,321 +0,0 @@
-# API参考
-
-mpx和mpx-webpack-plugin中暴露出的api文档
-
-### createApp
-
-``` js
-import mpx, {createApp} from '@mpxjs/core'
-mpx.createApp(object)
-createApp(object)
-```
-
-### createPage
-
-> 类微信小程序（微信、百度、头条等）内部使用[Component的方式创建页面](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html)，所以除了支持页面的生命周期之外还同时`支持组件的一切特性`。当使用Component创建页面时，`页面生命周期`需要写在`methods内部`（微信小程序原生规则），mpx进行了统一封装转换，`页面生命周期都写在最外层`即可
-
-> options的具体形式，除了computed、watch这类mpx扩展特性之外，其他的属性都参照原生小程序的官方文档即可。
-
-用法：`createPage(options, config?)`
-
-config是一个可选参数，应为一个对象。  
-如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过config.isNative传true声明。  
-如果有需要复写/改写最终调用的创建页面的构造器，可以通过config对象的customCtor提供。`注意：mpx本身是用component来创建页面的，如果传page可能在初始化时候生命周期不正常导致取props有一点问题`
-
-``` js
-import mpx, {createPage} from '@mpxjs/core'
-mpx.createPage({
-  data: {test: 1},
-  computed: {
-    test2 () {
-      return this.test + 1
-    }
-  },
-  watch: {
-    test (val, old) {
-      console.log(val, old)
-    }
-  },
-  onShow () {
-    this.test++
-  }
-})
-createPage(object)
-```
-
-### createComponent
-
-> options的具体形式，除了computed、watch这类mpx扩展特性之外，其他的属性都参照原生小程序的官方文档即可。
-
-用法：`createComponent(options, config?)`
-
-config是一个可选参数，应为一个对象。  
-如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过config.isNative传true声明。  
-如果有需要复写/改写最终调用的创建组件的构造器，可以通过config对象的customCtor提供。
-
-``` js
-import mpx, {createComponent} from '@mpxjs/core'
-mpx.createComponent({
-  properties: {
-    prop: {
-      type: Number,
-      value: 10
-    }
-  },
-  data: {test: 1},
-  computed: {
-    test2 () {
-      return this.test + this.prop
-    }
-  },
-  watch: {
-    test (val, old) {
-      console.log(val, old)
-    },
-    prop: {
-      handler (val, old) {
-        console.log(val, old)
-      },
-      immediate: true // 是否首次执行一次
-    }
-  }
-})
-createComponent(object)
-```
-
-### createStore
-
-``` js
-import mpx, {createStore} from '@mpxjs/core'
-const store1 = mpx.createStore({ ...options })
-const store2 = createStore({ ...options })
-```
-
-##### options选项
-
-- **state**
-
-  - 类型: `Object`
-
-    store的根 state 对象。[详细介绍](store/index.md#state)
-
-- **mutations**
-
-  - 类型: `{ [type: string]: Function }`
-
-    在 store 上注册 mutation，处理函数总是接受 `state` 作为第一个参数（如果定义在模块中，则为模块的局部状态），`payload` 作为第二个参数（可选）。
-
-    [详细介绍](store/index.md#mutation)
-
-- **actions**
-
-  - 类型: `{ [type: string]: Function }`
-
-    在 store 上注册 action。处理函数总是接受 `context` 作为第一个参数，`payload` 作为第二个参数（可选）。
-
-    `context` 对象包含以下属性：
-
-    ``` js
-    {
-      state,      // 等同于 `store.state`
-      commit,     // 等同于 `store.commit`
-      dispatch,   // 等同于 `store.dispatch`
-      getters     // 等同于 `store.getters`
-    }
-    ```
-
-    同时如果有第二个参数 `payload` 的话也能够接收。
-
-    [详细介绍](store/index.md#action)
-
-- **getters**
-
-  - 类型: `{ [key: string]: Function }`
-
-  在 store 上注册 getter，getter 方法接受以下参数：
-
-    ```
-    state,     // 如果在模块中定义则为模块的局部状态
-    getters,   // 等同于 store.getters
-    ```
-
-    注册的 getter 暴露为 `store.getters`。
-
-    [详细介绍](store/index.md#getters)
-
-- **modules**
-
-  - 类型: `Object`
-
-    包含了子模块的对象，会被合并到 store，大概长这样：
-
-    ``` js
-    {
-      key: {
-        state,
-        mutations,
-        actions?,
-        getters?,
-        modules?
-      },
-      ...
-    }
-    ```
-
-    与根模块的选项一样，每个模块也包含 `state` 和 `mutations` 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 `context.state` 同样指向局部状态。
-
-    [详细介绍](store/index.md#module)
-
-- **deps**
-
-  - 类型: `Object`
-
-    包含了当前store依赖的第三方store：
-
-    ``` js
-    {
-      store1: storeA,
-      store2: storeB
-    }
-    ```
-
-    [详细介绍](store/index.md#多实例)
-
-
-### Store 实例属性
-
-- **state**
-
-  - 类型: `Object`
-
-    根状态。
-
-- **getters**
-
-  - 类型: `Object`
-
-    暴露出注册的 getter。
-
-### Store 实例方法
-
-- **`commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)`**
-
-  提交 mutation。[详细介绍](store/index.md#mutation)
-
-- **`dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)`**
-
-  分发 action。返回一个Promise。[详细介绍](store/index.md#action)
-
-- **`mapState(map: Array<string> | Object): Object`**
-
-  为组件创建计算属性以返回 store 中的状态。[详细介绍](store/index.md#mapstate-辅助函数)
-
-- **`mapGetters(map: Array<string> | Object): Object`**
-
-  为组件创建计算属性以返回 getter 的返回值。[详细介绍](store/index.md#mapgetters-辅助函数)
-
-- **`mapActions(map: Array<string> | Object): Object`**
-
-  创建组件方法分发 action。[详细介绍](store/index.md#在组件中分发-action)
-
-- **`mapMutations(map: Array<string> | Object): Object`**
-
-  创建组件方法提交 mutation。[详细介绍](store/index.md#在组件中提交-mutation)
-
-
-### toPureObject
-
-由于使用的mobx的响应式数据，所以业务拿到的数据可能是mobx响应式数据实例（包含了些其他属性），使用toPureObject可以将响应式的数据转化成纯js对象
-
-```js
-import {toPureObject} from '@mpxjs/core'
-const pureObject = toPureObject(object)
-```
-
-### observable
-
-用于创建响应式数据，属于mobx提供的能力
-
-```js
-import {observable} from '@mpxjs/core'
-// mpx.observable(...)
-const a = observable(object)
-```
-
-~~### extendObservable~~
-
-~~（已废弃）用于扩展响应式数据，属于mobx提供的能力, 主要用于添加新的可观察数据, `并不会触发订阅者更新`~~
-
-```js~~
-import {observable, extendObservable} from '@mpxjs/core'
-const a = observable(object)
-// mpx.extendObservable(...)
-const b = extendObservable(a, {newProp: 10})
-```
-
-### watch(context, expr, handler)
-
-用于观察数据从而触发相应操作
-
-- context 回调执行的上下文
-- expr 观察的表达式[String | Function]。可以是path字符串（取值将在context上进行查找），也可以是函数
-- handler 响应函数[Function | Object]。如果是对象，则handler.handler为回调函数，其他参数作为options，与组件的watch一致
-
-```js
-import mpx, {watch} from '@mpxjs/core'
-// mpx.watch(...)
-const a = observable({name: 1})
-watch(null, () => {
-  console.log(a.name)
-  return a.name
-}, (val) => {
-  console.log('update a.name', val)
-})
-a.name = 10
-```
-
-### mpx.set & mpx.remove
-
-用于对一个响应式对象新增或删除属性，会`触发订阅者更新操作`
-
-```js
-import mpx, {observable} from '@mpxjs/core'
-const a = observable({name: 1})
-mpx.set(a, 'age', 'test')
-mpx.remove(a, 'age')
-```
-
-### mpx.use
-
-mpx.use用于安装外部扩展, 支持多参数，如果第二个参数是一个包含（prefix or postfix）的option，
-那么将会对插件扩展的属性添加前缀或后缀（主要考虑插件开发者直接导出的属性可能存在同名问题，use时指定
-前缀或后缀能在业务角度去处理这种情况）
-
-```js
-import mpx from '@mpxjs/core'
-import test from './test'
-mpx.use(test)
-mpx.use(test, {prefix: 'mpx'}, 'otherparams')
-```
-
-[具体例子](extend/index.md)
-
-### mpx.mixin
-
-用于注入mixin
-
-```js
-import mpx from '@mpxjs/core'
-mpx.mixin({
-  methods: {
-    $fetch: function(){}
-  }
-}, types)
-```
-##### types选项
-types决定了mixin会注入到哪种实例上，app | page | component
-
-- String, 'app' | 'page' | 'component'
-- Array, ['app', 'page', 'component']
-- 如果不传，默认为['app', 'page', 'component']
-
diff --git a/docs/articles/1.0.md b/docs/articles/1.0.md
deleted file mode 100644
index 2ef323f449..0000000000
--- a/docs/articles/1.0.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# 滴滴开源小程序框架Mpx
-
-> 作者：董宏平 (hiyuki)
-
-Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：
-* 数据响应特性(watch/computed)
-* 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)
-* 深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)
-* Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)
-* 单文件组件开发
-* 状态管理(Vuex规范/多实例/可合并)
-* 跨团队合作(packages)
-* 逻辑复用能力(mixins)
-* 脚手架支持
-* 小程序自身规范的完全支持
-* 支付宝小程序的支持
-
-## 设计思路
-
-目前业界主流的小程序框架主要有WePY，mpvue和Taro，这三者都是将其他的语法规范转译为小程序语法规范，我们称其为转译型框架。不同于上述三者，Mpx是一款基于小程序语法规范的增强型框架，我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：
-* 转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性
-* 小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持
-
-## 技术实现
-小程序刚推出时不支持自定义组件，无法进行组件化开发，当时最早的小程序框架WePY做的核心工作就是支持了小程序的组件化开发，后来的mpvue也基于Vue做了类似的工作。由于当时的小程序本身不支持自定义组件，WePY和mpvue的组件化支持都是基于编译做的组件化封装，用户编写的组件模板会被编译为Page中模板的一部分，在组件中定义的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。这个方案在当时的技术条件下确实是一个唯一解，但该方案在复杂的小程序应用中会存在明显性能问题，原因在于该方案中页面的数据量会很大，而且每个组件的局部更新实际上都会成为页面级别的全局更新，在组件较多的页面中容易引发性能问题。在小程序自定义组件推出后，我们通过性能测试确认了该方案解决了上述组件封装方案中的性能问题。由于自定义组件在当时是一个最新的技术标准，业内的小程序框架都未支持，而我们本身的业务又有复杂小程序的开发需求，于是我们就基于小程序自定义组件规范启动了Mpx框架的设计与开发
-
-*Page与Component setData性能对照*
-
-| |Component|Page|
-|---|----------|----- |
-|局部更新|1975ms|7186ms|
-|全局更新|6210ms|24612ms|
-> 性能衡量标准说明：  
-局部更新：文档中存在1000个节点，其中一个节点更新1000次的耗时；  
-全局更新：文档中存在5个节点，5个节点独立更新1000次的耗时
-以上数据在iphone7微信小程序环境下测试得出
-
-### 数据响应与性能优化
-数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式
-
-作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：
-1. 尽可能减少setData调用的频次
-2. 尽可能减少单次setData传输的数据
-
-为了实现以上两个优化方向，我们做了以下几项工作：
-* 将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；
-* 将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。
-基于以上优化，我们大大减少了小程序setData的调用频次和传递数据量，与初版Mpx中track全量数据的方案相比提示显著。
-
-*Mpx setData优化效果*
-
-|   |旧版mpx|新版mpx|
-|---|----|-----|
-|setData次数	|164   	|88	|
-|setData数据量	|370kB	|38kB|
-> 以上数据由较复杂小程序在固定交互流程后统计得出
-
-![Mpx数据响应机制流程示意图](https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg)
-*Mpx数据响应机制流程示意图*
-
-### 编译构建
-我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：
-1. src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；
-2. 对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。
-
-最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。
- 
-![Mpx编译构建机制流程示意图](https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg)
-*Mpx编译构建机制流程示意图*
-
-# 现状和未来
-目前Mpx框架已经在滴滴内部大量使用，支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现，线上运行稳定，收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准，同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验，Mpx并没有进行跨H5甚至是跨Native的支持，但现实业务当中确实存在这样的诉求，未来我们会在Mpx的基础上对跨端进行一定的尝试，与此同时我们依然会持续维护升级Mpx，原因在于跨端意味着灵活性受限及能力的缺失，我们希望能给用户提供第二种选择。
-
-*Mpx与业内主流小程序框架异同对比*
-
-|   |WePY|mpvue|Taro|Mpx|
-|---|----|-----|----|---|
-|代码规范	|自定义|	Vue	|React	|小程序+|
-|组件化实现	|Page封装	|Page封装|	Component|	Component|
-|数据响应|	脏值检查|	Vue|	无	|Mobx|
-|状态管理|	Redux|	Vuex|	Redux|类Vuex|
-
-## 结语
-如果你注重开发体验和产品性能，专注于小程序开发，那Mpx会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目，给我们提供了无限的启发和巨大的技术帮助。
-
-Github: [https://github.com/didi/mpx](https://github.com/didi/mpx)  
-使用文档: [https://didi.github.io/mpx/](https://didi.github.io/mpx/)  
-用户交流群:  
-![微信](https://dpubstatic.udache.com/static/dpubimg/at_XEnlFb0/WechatIMG1.jpeg)
diff --git a/docs/articles/2.0.md b/docs/articles/2.0.md
deleted file mode 100644
index f182cf9cd4..0000000000
--- a/docs/articles/2.0.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序
-
-> 作者：董宏平 (hiyuki)
-
-Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。
-
-长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台，且各家的技术标准都不统一的今天，单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求，`一套代码在多小程序平台运行`已经成为一个现实上的刚需。为了解决这个小程序开发的痛点，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。
-
-Mpx2.0版本新增的主要特性主要包含：
-* 完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；
-* Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，[点击查看详情](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91)；
-* 小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；
-* 深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；
-* render函数中完整支持wxs模块，[关于render函数点击查看详情](https://didi.github.io/mpx/understanding/understanding.html#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)；
-* 支持了模板引入，内联wxs，自定义tabbar，workers，云开发等原生能力，进一步完善原生兼容性。
-
-同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：
-* 基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；
-* 完全兼容原生小程序技术规范，0成本迁移原生小程序项目;
-* 跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；
-* 支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;
-* 非常重视小程序性能，提供了深度的setData和包体积优化。
-
-关于Mpx更详细的介绍可以查看[官方文档](https://didi.github.io/mpx/)和[这篇文章](https://didi.github.io/mpx/articles/1.0.html)。
-
-Github：[https://github.com/didi/mpx](https://github.com/didi/mpx)  
-
-## 跨平台开发
-
-作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。
-
-### 设计理念
-
-Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。
-
-我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。
-
-![Mpx跨平台开发流程示意图](https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png)
-
-*Mpx跨平台开发流程示意图*
-
-Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：
-* Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；
-* Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。
-
-之所以采用这种设计，主要基于以下原因：
-* Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；
-* 使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；
-* 结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。
-
-### 使用方法
-
-Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。
-
-```js
-// 微信转支付宝
-new MpxWebpackPlugin({
-  // mode指定目标平台，可选值有(wx|ali|swan|qq|tt)
-  mode: 'ali',
-  // srcMode指定源码平台，默认值同目标平台一致 
-  srcMode: 'wx' 
-})
-```
-
-### 差异抹平
-
-目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：
-* 模板语法/基础组件差异
-* json配置差异
-* wxs语法差异
-* 页面/组件对象差异
-* api调用差异
-* webview bridge差异
-
-其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。
-
-值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：
-* 组件自定义事件
-* 组件间关系
-* 获取子组件实例
-* observers/property observer
-* 内联wxs
-* 外部样式类
-
-对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。
-
-### 条件编译
-
-对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。
-
-上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。
-
-Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。
-
-## 性能优化
-
-Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：
-* 运行时的setData优化
-* 编译构建时的包体积优化
-
-### setData优化
-
-数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。
-
-通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：
-* 尽可能减少setData调用的频次
-* 尽可能减少单次setData传输的数据
-
-为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。
-
-在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。
-
-基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。
-
-在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。
-
-![setData优化示意图](https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png)
-
-*setData优化示意图*
-
-### 包体积优化
-
-类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：
-* 打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；
-* 对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；
-* 基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；
-* 完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。
-
-分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。
-
-对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。
-
-在跨平台开发中，我们建议用户使用Mpx提供的[packages](https://didi.github.io/mpx/single/json-enhance.html#packages)来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。
-
-![分包构建示意图](https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png)
-
-*分包构建示意图*
-
-## 渐进迁移
-
-Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。
-
-在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。
-
-对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。
-
-## 未来规划
-
-作为滴滴公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：
-* i18n
-* ts支持
-* 单元测试支持
-
-在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。
-
-最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。
diff --git a/docs/articles/2.0inner.md b/docs/articles/2.0inner.md
deleted file mode 100644
index eff8cb4022..0000000000
--- a/docs/articles/2.0inner.md
+++ /dev/null
@@ -1,161 +0,0 @@
-# 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序
-
-> 作者：董宏平 (hiyuki)
-
-Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。
-
-长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。基于Mpx实现的滴滴出行小程序、滴滴营销小程序等也给业务带来了很大收益。但是随着各大厂商陆续推出自己的小程序平台，各家的技术标准都不统一，而业务又需要在这些小程序平台上进行推广使用，为了快速响应需求，`将现有的小程序尽量小成本的迁移至多小程序平台运行`已经成为一个现实上的刚需。为了解决这个问题，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。
-
-Mpx2.0版本新增的主要特性主要包含：
-* 完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；
-* Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，[点击查看详情](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91)；
-* 小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；
-* 深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；
-* render函数中完整支持wxs模块，[关于render函数点击查看详情](https://didi.github.io/mpx/understanding/understanding.html#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)；
-* 支持了模板引入，内联wxs，自定义tabbar，workers，云开发等原生能力，进一步完善原生兼容性。
-
-同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：
-* 基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；
-* 完全兼容原生小程序技术规范，0成本迁移原生小程序项目;
-* 跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；
-* 支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;
-* 非常重视小程序性能，提供了深度的setData和包体积优化。
-
-关于Mpx更详细的介绍可以查看[官方文档](https://didi.github.io/mpx/)和[这篇文章](https://didi.github.io/mpx/articles/1.0.html)。
-
-Github：[https://github.com/didi/mpx](https://github.com/didi/mpx)
-
-## 跨平台开发
-
-作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。
-
-### 设计理念
-
-Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。
-
-我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。
-
-![Mpx跨平台开发流程示意图](https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png)
-
-*Mpx跨平台开发流程示意图*
-
-Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：
-* Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；
-* Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。
-
-之所以采用这种设计，主要基于以下原因：
-* Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；
-* 使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；
-* 结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。
-
-### 使用方法
-
-Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。
-
-```js
-// 微信转支付宝
-new MpxWebpackPlugin({
-  // mode指定目标平台，可选值有(wx|ali|swan|qq|tt)
-  mode: 'ali',
-  // srcMode指定源码平台，默认值同目标平台一致 
-  srcMode: 'wx' 
-})
-```
-
-### 差异抹平
-
-目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：
-* 模板语法/基础组件差异
-* json配置差异
-* wxs语法差异
-* 页面/组件对象差异
-* api调用差异
-* webview bridge差异
-* 外部样式类
-
-其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。
-
-值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：
-* 组件自定义事件
-* 组件间关系
-* 获取子组件实例
-* observers/property observer
-* 内联wxs
-
-对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。
-
-### 条件编译
-
-对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。
-
-上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。
-
-Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。
-
-## 性能优化
-
-Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：
-* 运行时的setData优化
-* 编译构建时的包体积优化
-
-### setData优化
-
-数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。
-
-通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：
-* 尽可能减少setData调用的频次
-* 尽可能减少单次setData传输的数据
-
-为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。
-
-在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。
-
-基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。
-
-在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。
-
-![setData优化示意图](https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png)
-
-*setData优化示意图*
-
-### 包体积优化
-
-类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：
-* 打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；
-* 对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；
-* 基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；
-* 完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。
-
-分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。
-
-对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。
-
-在跨平台开发中，我们建议用户使用Mpx提供的[packages](https://didi.github.io/mpx/single/json-enhance.html#packages)来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。
-
-![分包构建示意图](https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png)
-
-*分包构建示意图*
-
-## 渐进迁移
-
-Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。
-
-在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。
-
-对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。
-
-## 使用现状
-
-众所周知，Mpx自诞生以来在公司内部得到了广泛使用，建立起了完善的生态，开源后也支撑了数个外部小程序的迭代开发。目前WebApp团队正在对滴滴出行微信小程序进行功能升级，进行产品功能拉齐及界面与体验优化。升级后的版本预计会在6月中旬上线，届时微信钱包内的滴滴出行会逐步切换到小程序版本上。与此同时，我们也在使用Mpx2.0的跨平台能力同步产出支付宝小程序，目前进展顺利。登录sdk，收银sdk，地图sdk等公共组件目前也已经基于2.0的跨平台能力产出了支付宝版本，支付宝版本小程序也会随微信小程序一起发布生效。
-
-## 未来规划
-
-作为公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：
-* i18n
-* ts支持
-* 单元测试支持
-
-在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。
-
-最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。
-
diff --git a/docs/articles/details.md b/docs/articles/details.md
deleted file mode 100644
index 53a65ca7df..0000000000
--- a/docs/articles/details.md
+++ /dev/null
@@ -1,55 +0,0 @@
-#### 文件维度条件编译
-
-文件维度条件编译让用户能够以文件为维度进行跨平台差异代码的编写，例如在微信转支付宝的项目中存在框架无法转换的组件map.mpx，用户可以在相同的目录下创建map.ali.mpx文件作为patch，在该文件中使用支付宝的技术标准来源组件map.mpx中必要的功能，在项目mode为ali时Mpx会加载map.ali.mpx来代替原有map.mpx文件。
-
-文件维度条件编译能够与webpack alias结合使用，对于npm包中的无法转换的文件，我们不方便在包目录中创建patch文件(npm i等操作会重写整个包目录)，此时我们可以通过webpack alias在包目录中创建一个`虚拟的`patch文件，并将其指向项目的源码目录中。
-
-```js
-  // 对于npm包中的文件依赖
-  import map from 'npmPackage/lib/map'
-  
-  // 配置以下alias后，当mode为ali时，会加载项目目录中的projectRoot/src/patch/map文件以代替原有的npmPackage/lib/map文件
-  const webpackConf = {
-    resolve: {
-      alias: {
-        'npmPackage/lib/map.ali': 'projectRoot/src/patch/map'
-      }
-    }
-  }
-```
-
-#### 区块维度条件编译
-
-在.mpx单文件中一般存在template、js、style、json四个区块，Mpx支持以区块为维度进行条件编译，只需在区块标签中添加`mode`属性定义该区块的平台属性即可，其余规则与文件维度条件编译一致，可以将区块理解为.mpx单文件中的局部文件。
-
-```html
-<!--编译mode为ali时加载如下区块-->
-<template mode="ali">
-<!--该区块中的代码需采用支付宝的技术标准进行编写-->
-  <view>支付宝环境</view>
-</template>
-
-<!--其他编译mode时加载如下区块-->
-<template>
-  <view>其他环境</view>
-</template>
-```
-
-#### 代码维度条件编译
-
-对于局部平台差异，mpx支持在template插值和js代码中访问`__mpx_mode__`获取当前项目的目标平台，结合条件语句if/else进行局部条件编译，如果条件表达式结果可在编译中推断得出，例如`__mpx_mode__ === 'ali'`，框架会在优化阶段删除不可到达的无用代码。
-
-js代码中使用
-```js
-if(__mpx_mode__ === 'ali') {
-  // 执行支付宝环境相关逻辑
-} else {
-  // 执行其他环境相关逻辑
-}
-```
-template插值中使用
-```html
-<!--此处的__mpx_mode__不需要在组件中数据中声明-->
-<view wx:if="{{__mpx_mode__ === 'ali'}}">支付宝环境</view>
-<view wx:else>其他环境</view>
-```
diff --git a/docs/articles/index.md b/docs/articles/index.md
deleted file mode 100644
index 770b5b9d3a..0000000000
--- a/docs/articles/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Mpx框架相关介绍文章
-
-* [滴滴开源小程序框架Mpx](1.0.md)
-* [滴滴开源小程序框架Mpx发布2.0，完善支持小程序跨平台开发](2.0.md)
diff --git a/docs/articles/mpx1.md b/docs/articles/mpx1.md
deleted file mode 100644
index d10705c735..0000000000
--- a/docs/articles/mpx1.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: 小程序开发者，为什么你应该尝试下MPX
-date: 2019-05-26 17:45:56
-tags: MPX
-categories: 前端
----
-
-> MPX框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 [前一篇文章 - MPX2.0发布](https://didi.github.io/mpx/articles/2.0.html)。
-
-## 背景
-
-在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序框架中做出抉择。
-
-那么今天，我们要给大家安利一款小程序框架：MPX
-
-## 优势
-
-之所以建议开发者们考虑使用MPX框架来开发小程序，是因为MPX框架具有一些别的框架所没有的优点。
-
-MPX立足原生小程序，在保证坑少的同时做了很多能力增强，提供了数据响应、模板增强、性能优化、跨平台开发等能力，以提升用户的开发体验及效率。
-
-接下来会从 原生兼容 -> 第三方组件支持 -> 按需构建 -> 跨平台编译 -> 能力增强 -> 独特性能优势 六个点来逐一讲述。
-
-### 原生兼容
-
-> MPX完全兼容原生，坑少。渐进接入简单。
-
-从语法风格上，我们可以看到目前市面上流行的小程序框架基本是基于web框架（taro/nanachi - react，uniapp/megalo/mpvue - vue）或者是一套全新（chameleon）/ 半全新（wepy）的标准。
-
-使用了这些框架，你所写的代码，并不是小程序代码。而是react/vue或者另一套代码。而这些代码源码到小程序代码，需要经过一次全面的转换，这个转换可能会引入一些未知的问题，产生一些坑。
-
-同时随着时间，小程序自身会逐步迭代，做出更多的功能特性，提供更好的组件、方法。而一些框架可能会受限于精力或框架节奏，没有办法第一时间跟进，甚至框架慢慢疏于维护而无法使用。
-
-而MPX选择的是，**全面拥抱原生**。
-
-口说无凭，我们来看个典型的MPX组件长什么样。
-
-![mpx组件示例](https://dpubstatic.udache.com/static/dpubimg/3877c653-d180-4fe7-8661-457b9de1bd82.png)
-
-乍一看好像和vue没什么区别，也就多了个json块，template里写的是小程序的标签。
-
-由于这一块全是符合微信小程序原生语法，我们是不会做任何转换的，所以你写什么就是什么。（如果使用了MPX的增强特性，还是会进行一些必要的转换的，后续我们也会出文章详细解释MPX的增强是如何实现的，相对来说，我们的转换比较轻量、透明、易理解）
-
-当微信出了新的能力、新的标签、新的生命周期钩子，使用MPX框架来编写的小程序只需要直接用起来就行。
-
-所以，使用MPX框架，你可以轻易地使用 **[自定义组件的relations](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html)** 来搞定组件间关系，使用 **[wxs](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)** 来更好地构建页面。
-
-MPX几乎支持原生的每一个特性，在 .mpx 文件里，模板部分写的是原生小程序的模板语法，脚本部分写的是原生小程序的脚本语法，json部分写的是原生小程序的配置信息。用MPX，你才是真的在开发小程序。
-
-目前很多原生小程序开发者可能想尝试下框架，老项目接入框架，选MPX肯定是最简单的了。口说无凭，我们搞了个demo来给大家打个样：在我们GitHub项目中有examples文件夹，里面的 [原生项目渐进接入MPX示例](https://github.com/didi/mpx/tree/master/examples/mpx-progressive) 。
-
-### 第三方组件库
-
-> MPX提供了完备的第三方组件库支持
-
-上面说了MPX对原生的极致兼容，能让你想到什么？对，就是对第三方组件库的完美支持。
-
-支持第三方组件库的重要性大家都知道，所以这个能力大部分框架都支持了。但是支持和完美支持还是有区别的。据简单观察，taro/mpvue/uniapp对于第三方组件库的支持都是以复制的形式进行的，也就是和微信小程序本来的行为很像。
-
-那么MPX是怎么支持第三方组件库的呢，这里有个demo：也在我们的GitHub里的examples文件夹下，[MPX使用第三方组件库示例](https://github.com/didi/mpx/tree/master/examples/mpx-useuilib) ，核心代码见下图：
-
-![MPX使用第三方组件库代码示例](https://dpubstatic.udache.com/static/dpubimg/9ecdd898-f7e5-48cc-89c2-bfc7ce3a03f9.png)
-
-乍一眼看不太出来有什么特别的？没用过别的框架引第三方组件，简单找了找其他框架好像也没提供相应的demo，用过的朋友可以自行对比下。
-
-在MPX里使用第三方组件库，仅需要***像web项目一样npm安装即可，并不需要复制文件***。然后在json里直接写包名就会去node_modules下面查找了。再配合webpack alias可以做到更简单、更语义化。
-
-然而这还没有结束~
-
-细心的朋友会发现，这段示例代码中既有vant的组件，也有iview的组件，如果按照微信的规范，这些组件库会通过miniprogram字段指定自己的构建文件生成目录，开发者工具会把这个目录完全拷贝到最终发布的代码里去，我们就会有两个巨大的组件库占据宝贵的空间。
-
-我们当然是希望用多少引多少，而不是一股脑全引进去，对，于是MPX提供了按需引用的能力，在下一章[按需引用](#按需引用)细讲。
-
-以及，组件库目前很少有跨小程序平台的组件库啊，如果我用了vant，支付宝、QQ里没有vant怎么办？也许这是别的框架不怎么推荐使用第三方库的原因，而MPX里，我们帮你把别人的组件库也转了，细节看下下章[跨小程序平台](#跨小程序平台)
-
-### 按需引用
-
-> 通过webpack依赖分析收集，使用第三方组件库或者拆分开发大型项目时MPX能保证构建的代码全是要用到的代码
-
-原生小程序本身的编译是遍历项目文件夹里所有的JS，包装成一个AMD包，也就是说项目文件夹里所有的文件，不论是否被使用，都会占用包体积并上传。
-
-同时，原生微信小程序的npm支持是基于文件夹复制的，第三方包通过声明miniprogram字段指定要拷贝的文件夹，不论使用还是未使用的资源（模板/js/样式/图片），全会被复制到项目文件夹中。
-
-而我们提供了@mpxjs/webpack-plugin插件，借助webpack生态，解析.mpx文件的json部分或原生的json文件将依赖作为新的入口添加子编译。基于依赖收集，而不是文件遍历。
-
-带来的好处就是：如果你喜欢vant的按钮，iview的输入框，wux的布局，欢迎尝试MPX，让你能同时使用多个UI框架的同时不用担心应用的体积爆炸。
-
-同理，面对一个大型项目，我们可以拆成不同的部分，由不同的团队完成后发npm包，在一个主项目中引入即可，具体内容可以看文档[JSON增强 - packages](https://didi.github.io/mpx/single/json-enhance.html#packages)一节。
-
-收集依赖的细节可以查阅文档[编译构建](https://didi.github.io/mpx/understanding/understanding.html#%E7%BC%96%E8%AF%91%E6%9E%84%E5%BB%BA)一节。
-
-### 跨小程序平台
-
-> MPX的跨平台方法能带着第三方组件库一起跨小程序平台，同时提供了充足完善的条件编译能力。
-
-在 MPX 1.0 时代，MPX框架是专注提升微信小程序的开发体验，虽然也提供了支付宝版，但代码完全要另写。
-
-而随着越来越多的 super app 提供了小程序能力，目前至少有5种体系的小程序（微信、支付宝系列、百度系列、头条系列、QQ），如果每一个平台都需要维护一份代码，工程师人数明显不够用了，所以跨小程序平台的能力也是 MPX 2.0 的主打特性。
-
-我们的跨平台的方法就是转换。都是小程序，语法基本一样，配置、钩子的差异在MPX运行时里提供了抹平。
-
-而除此之外最大的区别也就是模板上的标签和指令。所以我们实现了一套转换的架子，再编写一份转换规则，即可完成微信小程序到支付宝、百度、头条小程序的转换。
-
-采用这种转换的模式，非常方便用户理解我们是如何把微信小程序转换成支付宝、百度等小程序平台的。而且只要用户有需求，可以补齐任一套小程序转换其他平台的规则，就可以完成以某个小程序为标准为基础来编写小程序代码以及进一步转换成别的平台的能力。
-
-
-再结合前面一直在说的我们对原生小程序的支持，就可以撞出一点不一样的东西，比如，前文提到的第三方组件库跨小程序平台。
-
-对，我们能帮你把针对微信编写的ui组件库在支付宝、百度上运行起来，带着组件库一起跨小程序平台。
-
-那么一定会有这样一个问题，就算MPX对原生的支持再怎么牛逼，有的基础能力只有微信平台有，别的平台没有，MPX的转换还能无中生有吗？
-
-当然不能，其实这个问题对于所有的跨端框架都是一个问题，所以跨端最核心的问题是，如何搞定差异化部分。
-
-MPX提供了丰富的条件编译能力，可以以文件为维度差别构建，可以以代码块为维度，也可以以代码维度进行差别构建。
-
-而且MPX的差异化构建能力也是完全基于webpack实现的，所以上面提到的第三方组件库如果确实存在转换不了的地方，比如vant的picker组件使用内联wxs写了一个小方法叫isSimple在模板里调用了，但是这个方法的写法在百度小程序的filter脚本（filter可以理解为百度小程序的wxs）里不支持，因为百度的filter要求必须导出一个对象包裹方法。
-
-最好的解决办法当然是给vant-weapp提pr帮他们解决一下这个问题，但时间可能会比较慢，所以在MPX里，可以利用webpack的alias能力：
-
-![通过alias解决第三方组件的跨平台问题](https://dpubstatic.udache.com/static/dpubimg/7f90593b-65b4-40d0-bd93-6396e8a18e64.png)
-
-当尝试构建百度小程序时，会优先去查找pick/index.swan.wxml，再被alias到一个src下的文件，自己修改一下第三方包里有一些小问题的部分即可。
-
-关于跨平台的条件编译，更多具体信息可以[查阅我们的官方文档 - 跨平台条件编译](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91)
-
-### 能力增强
-
-> 通过数据响应、编译时预处理提供了computed/watch，完备的样式类型绑定，双向数据绑定，动态组件等一系列方便开发者更好开发小程序的能力增强
-
-能力增强应该是一个框架提供的最核心最重要的能力了，而MPX也确实在这里下了很大的力气，提供了多且好用的能力增强，不过受限于此处的篇幅，就只简单介绍，细节大家还是[查阅我们的文档](https://didi.github.io/mpx/single/template-enhance.html#template%E5%A2%9E%E5%BC%BA%E7%89%B9%E6%80%A7)的好。
-
-别的框架由于往往基于react/vue的，会给个列表写明不支持哪些能力，用户写的时候习惯使然，往往用了后可能才反应过来哦这个不支持。MPX则是原生的小程序语法写着难受时候突然想起MPX有这个能力。
-
-列一下MPX增强的能力：
-
-- 模板上的增强
-  - 样式类名绑定
-  - 内联事件传参
-  - 动态组件
-  - 双向绑定
-  - 节点获取ref
-- JS里的增强
-  - 数据响应
-  - setData优化
-  - ES6+
-- 样式上的增强
-  - 预处理支持
-  - rpx转换
-- JSON里的增强
-  - packages
-  - 分包资源优化
-
-MPX最显著的能力是数据响应，它衍生出computed/watch，以及双向数据绑定等。这个能力和Vue比较像，不同的是在MPX里是由mobx提供的数据响应能力。
-
-而同样是数据响应，我们做了一些不一样的优化。
-
-### 性能优势
-
-> 通过对模板的解析抽象出访问的数据以保证在提供了数据响应能力的同时不至于劣化性能。
-
-mpvue/wepy/megalo等框架也提供了数据响应的能力，但是数据响应在小程序领域有个较大的问题，微信开发指南里明确提到要注意setData的调用频次和数据量的大小。
-
-而数据响应最基本的做法就是数据变了就去set数据，这会极大劣化小程序的性能表现。
-
-而MPX通过对模板进行解析，抽象出对应的render函数，在调用setData发送数据前执行render函数找到真正需要发送的数据。
-
-效果如图：
-
-![小程序性能分析](https://dpubstatic.udache.com/static/dpubimg/9399b75c-5c81-4584-89b6-5e7f2c2ba7ba.png)
-
-小程序开发者工具的audits面板能辅助用户分析出可能需要优化的点。正如前文所说，MPX在红框部分，尤其是红框里的第三条，不将模板上未使用的数据发送到渲染层上做了极大的优化。
-
-只要不出现渲染函数执行失败（会有warning在console里提示，同时兜底逻辑会进行全量setData以保证程序仍可正常运行），使用MPX开发的小程序就永远不用担心发送了模板未使用的数据。
-
-虽然只是一个小小的TODO MVC示例，但是这个优化和应用的规模没关系，而且同时大家可以尝试别家的小demo对比看看。
-
-这个优化的细节可以看[前一篇文章](https://didi.github.io/mpx/articles/2.0.html)，或者我们的文档[MPX运行机制 - 数据响应与性能优化](https://didi.github.io/mpx/understanding/understanding.html#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)
-
-## 总结
-
-与目前市面上的诸多框架相比，MPX希望以原生小程序为基础，全面拥抱原生小程序，在原生小程序的基础上做增强，通过尽可能少的转换实现尽可能多的能力增强，在提升小程序开发体验的同时，保证不因转换或框架的问题产生过多的坑。
-
-MPX框架的目标用户是对小程序质量有较高要求的开发者，如果你是原生小程序开发者，或者厌倦了解决某些以web框架DSL语法为基础的转换框架造成的坑，欢迎尝试MPX框架。
diff --git a/docs/assets/dingding.jpg b/docs/assets/dingding.jpg
deleted file mode 100644
index bef5e0299a..0000000000
Binary files a/docs/assets/dingding.jpg and /dev/null differ
diff --git a/docs/book.json b/docs/book.json
deleted file mode 100644
index 67876c5996..0000000000
--- a/docs/book.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "title": "mpx文档",
-  "author": "滴滴出行webapp团队",
-  "description": "mpx是一款增强型小程序框架，极致性能优化，提供双向数据绑定，样式绑定，方法内联传参等方便开发者使用的特性。",
-  "structure": {
-    "readme": "intro"
-  },
-  "plugins": ["github", "edit-link", "anchors", "copy-code-button", "github-buttons", "expandable-chapters-small", "insert-logo", "custom-favicon"],
-  "pluginsConfig": {
-    "favicon": "favicon.ico",
-    "github": {
-      "url": "https://github.com/didi/mpx"
-    },
-    "edit-link": {
-      "base": "https://github.com/didi/mpx/tree/master/docs",
-      "label": "完善文档"
-    },
-    "github-buttons": {
-      "buttons": [{
-        "user" : "didi",
-        "repo" : "mpx",
-        "type" : "star",
-        "size" : "small",
-        "count": true
-      }, {
-        "user" : "didi",
-        "repo" : "mpx",
-        "type" : "fork",
-        "size" : "small",
-        "count": true
-      }]
-    },
-    "insert-logo": {
-      "url": "https://dpubstatic.udache.com/static/dpubimg/cd8de8e4-e4f4-4f0a-9c53-f833bc30ba69.png",
-      "style": "background: none; width: 200px"
-    }
-  }
-}
diff --git a/docs/compilationEnhance/index.md b/docs/compilationEnhance/index.md
deleted file mode 100644
index a01c4ac1a3..0000000000
--- a/docs/compilationEnhance/index.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# 构建配置
-
-mpx深度定制开发了一个webpack插件`@mpxjs/webpack-plugin`，基于该插件使用webpack进行小程序的编译构建工作。
-
-## 自动配置
-如果你不熟悉webpack，可以通过脚手架进行[快速配置](../start.md)。
-
-----
-
-## 手动配置
-
-**webpack.config.js**
-```js
-var MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
-
-var webpackConfig = {
-  module: {
-    rules: [
-      // mpx文件必须设置正确的loader，参考下文详细的loader设置options
-      // 注意，在最新的脚手架生成的模板中，这个loader的配置在build/build.js中
-      {
-        test: /\.mpx$/,
-        use: MpxWebpackPlugin.loader({
-          transRpx: [
-            // 可以是对象也可以是数组，数组可以通过include/exclude对不同资源配置不同的转换
-            {
-              // `only`模式下，样式前加上注释/* use rpx */可将该段样式中所有的px转换为rpx
-              mode: 'only',
-              comment: 'use rpx',
-              include: resolve('src')
-            },
-            {
-              // 对某些第三方组件库另设转换规则
-              mode: 'all',
-              designWidth: 375,
-              include: resolve('node_modules/vant-weapp')
-            }
-          ]
-        })
-      },
-      // 对本地图片资源提供增强，编译成小程序支持的格式 
-      // 参考下文详细的设置
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: MpxWebpackPlugin.urlLoader({
-          name: 'img/[name][hash].[ext]'
-        })
-      }
-    ]
-  },
-  // mpx主插件，必须设置，参考下文详细的插件设置options
-  plugins: [
-    new MpxWebpackPlugin({
-    // 微信模式下设置为`wx`，支付宝模式下设置为`ali`
-      mode: 'wx'
-    })
-  ],
-  // sourceMap: 小程序不支持eval，因此不要设置为eval相关的sourceMap类型。
-  // 注意：webpack4新增的mode属性设置为development的时候，会将devtool默认设置为eval，
-  //      必须手动设置devtool为非eval相关类型来覆盖默认配置
-  devtool: false,
-  output: {
-    // filename设置不能更改
-    filename: '[name].js' 
-  },
-  // 通过webpack分包能力减少小程序体积，参考下文的详细介绍
-  optimization: {
-    runtimeChunk: {
-      name: 'bundle'
-    },
-    splitChunks: {
-      chunks: 'all',
-      name: 'bundle',
-      minChunks: 2
-    }
-  }
-}
-```
-----
-### @mpxjs/webpack-plugin
-
-**webpack.config.js**
-```js
-var MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
-
-webpackconfig = {
-  plugins: [
-    // 在脚手架生成的项目中，mpx-webpack-plugin是在在build/build.js里插入的，但是配置项可以在build/mpx.plugin.conf.js中填写，有简单的注释说明
-    new MpxWebpackPlugin(options)
-  ],
-}
-```
-#### options
-
-- **mode** `String` 目前支持的有微信小程序(wx)\支付宝小程序(ali)\百度小程序(swan)\头条小程序(tt)\QQ小程序(qq)\H5页面(web)
-- **srcMode** `String` 跨平台编译场景下使用，详情请看 [跨平台编译](../platform.md#跨平台编译) 一节
-- **resolveMode** `String` 默认值为webpack，可选值有webpack/native，这是解析依赖路径时为了解决小程序特色绝对路径所添加的，推荐使用webpack模式，更舒服一些，json中的pages/usingComponents等需要写相对路径，但是可以直接写npm包路径。如果希望使用类似小程序原始那种"绝对路径"，就可以声明为native，但是npm路径就需要在前面加一个~，类似webpack的样式引入规范，同时必须配合projectRoot参数提供项目根目录地址。
-- **projectRoot** `String` 如果指定resolveMode为native，则必须提供此项配置为项目根目录地址。
-- **writeMode** `String` 小程序开发者工具检测到文件'变化'就会重新编译，并不会关系文件内容是否真正变化，而webpack每次输出都是全量的，会导致项目大了后每次重编译都较慢，为了解决这个问题，在输出前在内存中对比一次剔除未变化的文件，仅输出变化的文件以提升小程序开发者工具的编译速度。建议开启。
-- **modeRules** `Object` mpx在应用条件编译时，可能会遇到这种场景，假设同时开发微信/支付宝两个平台，用户是以微信小程序为基准来编写代码的，但是又有一个平台差异较大的地方，在支付宝平台上期望用一份支付宝原生代码来实现，这份支付宝原生代码可能在一个npm包内或者在某个文件夹下，依照mpx默认的识别方式，需要对这些文件都加中缀.ali才可以正确识别，而通过modeRules我们可以直接声明某个路径下的文件全是某种mode。
-- **enableAutoScope** `Boolean` 支付宝小程序没有微信小程序类似的组件样式隔离机制，如果遇到样式问题，将本选项置为true将自动为支付宝添加scope，会带来略微的体积上涨
-- **defs** `Object` 给模板和json中定义一些全局环境变量，区别于webpack.DefinePlugin的是仅支持普通扁平对象，但支持小程序的4个文件。这样根据平台注入全局变量时能为4个文件都注入，而不仅仅是JS，以此来实现编译时去除多余的其他平台的代码。
-- **i18n** `Object` 多语言能力，提供多语言包，在编译时生成对应的wxs方法，以完善小程序的国际化能力。
-
-示例：
-
-```js
-new MpxWebpackPlugin({
-  mode: 'ali', // 可选值 wx/ali/swan/qq/tt/web
-  srcMode: 'wx', // 暂时只支持微信为源mode做跨平台，为其他时mode必须和srcMode一致
-  writeMode: 'changed', // 可选值changed / full，不建议修改
-  resolveMode: 'webpack', // 可选值 native / webpack
-  projectRoot: resolve('src'), // 若resolveMode为native才需要传这个以指定项目的“绝对路径”绝对于谁的
-  enableAutoScope: false, // 是否开启支付宝样式scope，会带来略微的体积上涨
-  defs: {
-    // 常量 仅支持扁平对象，内嵌的环境变量有__mpx_mode__和__mpx_src_mode__
-    apiHost: 'apitest.com' // 可以准备多个对象，在build.js里根据参数决定塞哪个以实现开发时用某一套，上线时用哪一套
-  },
-  i18n: {}, // 多语言 参考 https://didi.github.io/mpx/i18n.html
-  modeRules: {
-     // 批量指定文件mode，和webpack的rules相同
-    ali: {
-      include: [resolve('vant-aliapp')]
-    }
-   }
-})
-```
-
-----
-
-### MpxWebpackPlugin.loader
-
-`@mpxjs/webpack-plugin`暴露了一个静态方法`MpxWebpackPlugin.loader`作为`.mpx`文件的loader
-
-**webpack.config.js**
-```js
-var MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
-
-webpackconfig = {
-  module: {
-    rules: [
-      {
-        test: /\.mpx$/,
-        use: MpxWebpackPlugin.loader({
-          transRpx: {}
-        })
-      }
-    ]
-  }
-}
-```
-
-- **transRpx**  
-  `Object | Array | boolean | string`
-    - `false`关闭转换rpx
-    - `'all'`普通样式中的px全部转换为rpx，`rpx注释样式`不转换
-    - `'only'`普通样式中的px全部**不转换**为rpx，`rpx注释样式`转换
-    - Object包含属性：mode/comment/designWidth/include/exclude
-        > include/exclude属性的用法和webpack对module.rules里的规则是一样的，参考[webpack文档-exclude](https://webpack.js.org/configuration/module/#rule-exclude)
-
-该loader用于处理.mpx单文件，并可以通过options控制mpx框架提供的rpx转换能力。详情见 [rpx转换](/single/style-enhance.md#rpx转换)
-
-### @mpxjs/url-loader
-
-已废弃，功能全部收集到 @mpxjs/webpack-plugin 中。
-
-> 想深入的了解mpx框架对小程序对图片资源的支持，查看[mpx图像资源处理](/understanding/resource.md)了解更多细节
-
-### output.filename
-
-小程序限定[描述页面的文件具有相同的路径和文件名](https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html)，仅以后缀名进行区分。
-
-因此`output.filename`中必须写为 **`[name].js`**，基于chunk id或者hash name的filename都会导致编译后的文件无法被小程序识别
-
-**webpack.config.js**
-```js
-webpackconfig = {
-  output: {
-    filename: '[name].js', // 正确 
-    filename: '[id].js', // 错误。chunk id name
-    filename: '[name].[chunkhash].js' // 错误。hash name
-  }
-}
-```
diff --git a/docs/extend/index.md b/docs/extend/index.md
deleted file mode 100644
index d63098b001..0000000000
--- a/docs/extend/index.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# 扩展mpx
-
-## 目前已有插件
-
-- 网络请求库fetch: @mpxjs/fetch [详细介绍](#fetch) [源码地址](https://github.com/didi/mpx/tree/master/packages/fetch)
-
-- ~~小程序api promisify：@mpxjs/promisify~~ (已废弃，推荐使用新的[api-proxy](#使用promise形式))
-
-- 小程序API转换及promisify：@mpxjs/api-proxy [详细介绍](#api-proxy) [源码地址](https://github.com/didi/mpx/tree/master/packages/api-proxy)
-
-- mock数据：@mpxjs/mock [详细介绍](#mock) [源码地址](https://github.com/didi/mpx/tree/master/packages/mock)
-
-- 小程序中的webview的API抹平：webview-bridge [详细介绍](#webviewbridge) [源码地址](https://github.com/didi/mpx/tree/master/packages/webview-bridge)
-
-## 开发插件
-
-mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use
-
-### 基础例子
-
-扩展: test.js
-
-```js
-export default function install(proxyMPX) {
-  proxyMPX.newApi = () => console.log('is new api')
-  proxyMPX
-    .mixin({
-      onLaunch() {
-        console.log('app onLaunch')
-      }
-    }, 'app')
-    .mixin({
-      onShow() {
-        console.log('page onShow')
-      }
-    }, 'page') // proxyMPX.injectMixins === proxyMPX.mixin
-
-    //  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case
-    proxyMPX.prototype.testHello = function() {
-      console.log('hello')
-    }
-}
-```
-
-在app.js内使用插件
-
-```js
-import mpx from '@mpxjs/core'
-import test from './test'
-mpx.use(test)
-mpx.createApp({
-  onLaunch() {
-    mpx.newApi() // out put: "is new api"
-    this.testHello() // output: 'hello'
-  }
-})
-```
-
-## Fetch
-
-小程序request存在不限域名的并发限制，因此封装一个fetch来处理这种缺陷，能支持请求优先级，同时fetch还支持拦截器，请求取消等等
-
-
-### 使用说明
-
-```js
-import mpx from '@mpxjs/core'
-import mpxFetch from '@mpxjs/fetch'
-mpx.use(mpxFetch)
-// 第一种访问形式
-mpx.xfetch.fetch({
-	url: 'http://xxx.com'
-}).then(res => {
-	console.log(res.data)
-})
-
-mpx.createApp({
-	onLaunch() {
-		// 第二种访问形式
-		this.$xfetch.fetch({url: 'http://test.com'})
-	}
-})
-```
-
-### 导入api说明
-
-mpx-fetch提供了一个实例 **xfetch** ，该实例包含以下api
-
-- fetch(config, priority)， 正常的promisify风格的请求方法, priority表示请求优先级（normal，low），默认为normal
-- addLowPriorityWhiteList(rules)， 按域名规则设置低优先级请求的白名单，接收一个参数，可以是字符串，也可以是正则表达式，也可以是数组 (如果fetch传入了第二个参数，那么无视这个白名单)
-- CancelToken，实例属性，用于创建一个取消请求的凭证。
-- create()， 用于创建一个新的mpx-fetch实例
-- interceptors，实例属性，用于添加拦截器，包含两个属性，request & response
-
-### 请求优先级
-
-```js
-mpx.xfetch.fetch({
-	url: 'http://xxx.com',
-	data: {
-		name: 'test'
-	}
-}, 'low')
-
-// or addSignWhiteList
-mpx.xfetch.addLowPriorityWhiteList('http://xxx.com')
-```
-
-### 请求拦截器
-
-```js
-mpx.xfetch.interceptors.request.use(function(config) {
-	console.log(config)
-	// 也可以返回promise
-	return config
-})
-mpx.xfetch.interceptors.response.use(function(res) {
-	console.log(res)
-	// 也可以返回promise
-	return res
-})
-```
-
-### 请求中断
-
-```js
-const cancelToken = new mpx.xfetch.CancelToken()
-mpx.xfetch.fetch({
-	url: 'http://xxx.com',
-	data: {
-		name: 'test'
-	},
-	cancelToken: cancelToken.token
-})
-cancelToken.exec('手动取消请求') // 执行后请求中断，返回abort fail
-```
-### 支持 emulateJSON
-
-```js
-mpx.xfetch.fetch({
-	url: 'http://xxx.com',
-	method: 'POST',
-	data: {
-		name: 'test'
-	},
-	emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
-})
-```
-
-### 支持 params
-```js
-mpx.xfetch.fetch({
-	url: 'http://xxx.com',
-	params: {
-		name: 'test'
-	}
-})
-
-mpx.xfetch.fetch({
-	url: 'http://xxx.com',
-	method: 'POST',
-	params: {
-		age: 10
-	},
-	data: {
-		name: 'test'
-	},
-	emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
-})
-```
-
-
-## API-PROXY
-
-> convert API at each end 各个平台之间 api 进行转换
-
-## Usage
-
-```js
-// 使用 mpx 生态
-
-import mpx from '@mpxjs/core'
-import apiProxy from '@mpxjs/api-proxy'
-
-mpx.use(apiProxy, options)
-```
-
-```js
-// 单独使用
-import apiProxy from '@mpxjs/api-proxy'
-
-apiProxy(target, options) // target 为要抹平的对象
-```
-
-## Options
-
-|参数名称|类型|含义|是否必填|默认值|备注|
-|---|---|---|---|---|---|
-|platform|Object|各平台之间的转换|否|{ from:'', to:'' }|使用 mpx 脚手架配置会自动进行转换，无需配置|
-|exclude|Array(String)|跨平台时不需要转换的 api|-|
-|usePromise|Boolean|是否将 api 转化为 promise 格式使用|否|false|-|
-|whiteList|Array(String)|强行转化为 promise 格式的 api|否|[]|需要 usePromise 设为 true|
-
-## example
-
-#### 普通形式
-
-```js
-import mpx from '@mpxjs/core'
-import apiProxy from '@mpxjs/api-proxy'
-
-mpx.use(apiProxy, {
-  exclude: ['showToast'] // showToast 将不会被转换为目标平台
-})
-
-mpx.showModal({
-  title: '标题',
-  content: '这是一个弹窗',
-  success (res) {
-    if (res.cancel) {
-      console.log('用户点击取消')
-    }
-  }
-})
-```
-
-#### 使用promise形式
-
-```js
-import mpx from '@mpxjs/core'
-import apiProxy from '@mpxjs/api-proxy'
-
-mpx.use(apiProxy, {
-  usePromise: true
-})
-
-mpx.showActionSheet({
-  itemList: ['A', 'B', 'C']
-})
-.then(res => {
-  console.log(res.tapIndex)
-})
-.catch(err => {
-  console.log(err)
-})
-```
-
-## Mock
-
-mock数据生成规则同[mockjs](https://github.com/nuysoft/Mock/wiki)
-
-### 使用说明
-
-```js
-import mock from '@mpxjs/mock'
-// rule 为字符串或正则表达式
-mock([{
-  url: 'http://api.example.com',
-  rule: {
-		'list|1-10': [{
-			'id|+1': 1
-		}]
-	}
-}])
-```
-
-## webview-bridge
-
-Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。
-
-比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。
-
-为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge
-
-使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。
-
-[使用示例](https://github.com/didi/mpx/tree/master/examples/mpx-webview)
-
-支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。
-
-提供的API如下：`navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError`
diff --git a/docs/favicon.ico b/docs/favicon.ico
deleted file mode 100644
index 891c2ce010..0000000000
Binary files a/docs/favicon.ico and /dev/null differ
diff --git a/docs/i18n.md b/docs/i18n.md
deleted file mode 100644
index fb6aa45318..0000000000
--- a/docs/i18n.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# 国际化i18n
-
-Mpx支持国际化i18n，使用方式及支持能力与vue-i18n非常接近
-
-## 使用方法
-
-Mpx自带i18n能力，无需额外安装插件。由于小程序模板中的i18n函数是通过wxs编译注入进行实现，我们需要将i18n配置传入到MpxWebpackPlugin中来使i18n生效，这是与vue-i18n最大的区别
-
-### 配置方法
-
-i18n配置传入到MpxWebpackPlugin选项中即可生效，额外支持messagesPath/dateTimeFormatsPath/numberFormatsPath配置，其余配置参考vue-i18n
-
-```js
-new MpxWebpackPlugin({
-  i18n: {
-    locale: 'en-US',
-    // messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理
-    messages: {
-      'en-US': {
-        message: {
-          hello: '{msg} world'
-        }
-      },
-      'zh-CN': {
-        message: {
-          hello: '{msg} 世界'
-        }
-      }
-    },
-    // messagesPath: path.resolve(__dirname, '../src/i18n.js')
-  }
-})
-```
-
-### 在js中使用
-
-同vue-i18n，在组件中直接调用翻译函数使用，目前js中支持了vue-i18n中全部的翻译函数，包括$t/$tc/$te/$d/$n，详细使用方法参考vue-i18n
-
-```js
-createComponent({
-  ready () {
-    console.log(this.$t('message.hello', { msg: 'hello' }))
-  },
-  computed: {
-    formatedDatetime () {
-      return this.$d(new Date(), 'long')
-    }
-  }
-})
-```
-
-### 在模板中使用
-
-类似于vue-i18n，在模板的Mustache插值中直接调用翻译函数，目前由于wxs执行环境的限制，模板上可直接使用的翻译函数包括$t/$tc/$te，如果需要格式化数字或日期可以使用对应的js翻译函数和Mpx提供的计算属性结合实现
-
-```html
-<view>
-  <view>{{ $t('message.hello', { msg: 'hello' }) }}</view>
-  <!-- formatedDatetime计算属性定义见上例，可基于locale变更响应刷新 -->
-  <view>{{formatedDatetime}}</view>
-</view>
-```
-
-### 动态变更locale
-类似于vue-i18n，可实现全局local变更及局部local变更，并自动更新视图，使用方式如下
-```js
-import mpx, { createComponent } from '@mpxjs/core'
-
-createComponent({
-  ready () {
-    // 局部locale变更，生效范围为当前组件内
-    this.$i18n.locale = 'en-US'
-    setTimeout(() => {
-      // 全局locale变更，生效范围为项目全局
-      mpx.i18n.locale = 'ja-JP'
-    }, 1000)
-  }
-})
-```
-
-### 平台支持
-
-由于Mpx中i18n实现依赖类wxs能力，目前支持除头条之外的所有小程序平台(微信/支付宝/qq/百度)，在输出web时，构建会自动引入vue-i18n并进行安装配置，无需修改任何代码即可按照预期正常工作。
-
-
diff --git a/docs/images/start-install.png b/docs/images/start-install.png
deleted file mode 100644
index 4b9ee1922f..0000000000
Binary files a/docs/images/start-install.png and /dev/null differ
diff --git a/docs/images/start-start.png b/docs/images/start-start.png
deleted file mode 100644
index 33d11fcdcc..0000000000
Binary files a/docs/images/start-start.png and /dev/null differ
diff --git a/docs/instance-api.md b/docs/instance-api.md
deleted file mode 100644
index beb5bb60aa..0000000000
--- a/docs/instance-api.md
+++ /dev/null
@@ -1,134 +0,0 @@
-## Page & Component 新增的实例方法
-
-### this.$watch
-
-用于动态添加watch，返回值是一个destroy函数，执行返回函数用于销毁watch
-
-##### 参数选项
-
-- **`this.$watch(expr | function, callback, options?: Object) : function`**
-
-``` js
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    info: {
-      name: 1
-    }
-  },
-  attached () {
-    // 微信小程序生命周期
-    // 第一个参数为变量表达式
-    const unwatch1 = this.$watch('info.name', (val, old) => {
-      console.log(val, old)
-    }, {
-      // deep: true,
-      // sync: true,
-      immediate: true // watch options
-    })
-    unwatch1() // 销毁watch，不再观察
-
-    // 第一个参数也可以为函数
-    this.$watch(function() {
-      return this.info.name
-    }, (val, old) => {
-      console.log(val, old)
-    }, {
-      // deep: true,
-      // sync: true,
-      immediate: true // watch options
-    })
-  }
-})
-```
-
-### $nextTick
-
-接收一个函数，保证在小程序渲染更新之后执行回调
-
-``` js
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    info: {
-      name: 1
-    }
-  },
-  attached () {
-    this.info.name = 2
-    this.$nextTick(() => {
-      console.log('会在由name变化引起的视图更新之后执行')
-    })
-  }
-})
-```
-
-### $updated
-
-已被废弃，请使用this.$nextTick代替
-
-### $forceUpdate
-
-##### 参数选项
-
-- **`this.$forceUpdate(data: Object, callback?: function)`**
-
-用于强制刷新视图，正常情况下```只有发生了变化的数据```才会被发送到视图层进行渲染。强制更新时，会将某些数据强制发送到视图层渲染，无论是否发生了变化
-
-``` js
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    info: {
-      name: 'a'
-    },
-    age: 100
-  },
-  attached () {
-    // 虽然不会修改age的值，但仍会触发重新渲染，并且会将age发送到视图层
-    this.$forceUpdate({
-      age: 100
-    }, () => {
-      console.log('视图更新后执行')
-    })
-
-    // 也可用于正常的数据修改，key支持path
-    this.$forceUpdate({
-      'info.name': 'b'
-    }, () => {
-      console.log('视图更新后执行')
-    })
-  }
-})
-```
-
-### $set、$remove
-
-正常情况下，对一个响应式数据的新增属性或者删除数据操作是没法感知的，通过 `this.$set、this.$remove` 可以动态添加或删除属性，并且会触发观察器更新（视图更新 | watch回调）
-
-``` js
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    info: {
-      name: 'a'
-    }
-  },
-  watch: {
-    'info.age' (val) {
-      // 当新增age属性之后执行
-      console.log(val)
-    },
-    'info' (val) {
-      // 当新增或删除属性之后都会执行
-      console.log(val)
-    }
-  },
-  attached () {
-    // 新增age属性
-    this.$set(this.info, 'age', 100)
-    // 删除name属性
-    this.$remove(this.info, 'name')
-  }
-})
-```
diff --git a/docs/intro.md b/docs/intro.md
deleted file mode 100644
index 6ddb7fa81c..0000000000
--- a/docs/intro.md
+++ /dev/null
@@ -1,224 +0,0 @@
-<p align="center">
-  <a href="https://didi.github.io/mpx/">
-    <img alt="MPX" src="https://dpubstatic.udache.com/static/dpubimg/34b5079c-0399-406d-8d2e-b8624678f7ff.png" width="546">
-  </a>
-</p>
-
-<p align="center">
-    一款具有优秀开发体验和深度性能优化的增强型小程序开发框架。
-</p>
-
-
-## 简介
-
-Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。
-
-Mpx具有以下功能特性：
-* 数据响应 (赋值响应 / [watch](https://didi.github.io/mpx/single/script-enhance.html#watch) / [computed](https://didi.github.io/mpx/single/script-enhance.html#computed))
-* 增强模板语法 ([动态组件](https://didi.github.io/mpx/single/template-enhance.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6) / [样式绑定 / 类名绑定 ](https://didi.github.io/mpx/single/template-enhance.html#class%E4%B8%8Estyle%E7%BB%91%E5%AE%9A) / [内联事件函数](https://didi.github.io/mpx/single/template-enhance.html#%E5%86%85%E8%81%94%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A) / [双向绑定](https://didi.github.io/mpx/single/template-enhance.html#%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A) / [refs](https://didi.github.io/mpx/single/template-enhance.html#refs))
-* 极致性能 ([运行时性能优化](https://didi.github.io/mpx/understanding/understanding.html#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96) / [包体积优化](https://didi.github.io/mpx/understanding/understanding.html#%E5%88%86%E5%8C%85%E5%A4%84%E7%90%86%E7%BB%86%E8%8A%82) / 框架运行时体积14KB)
-* [高效强大的编译构建](https://didi.github.io/mpx/understanding/understanding.html#%E7%BC%96%E8%AF%91%E6%9E%84%E5%BB%BA) (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)
-* [单文件组件开发](https://didi.github.io/mpx/single/what-is-single-file.html#%E5%8D%95%E6%96%87%E4%BB%B6)
-* [渐进接入 / 原生组件支持](https://didi.github.io/mpx/progressive.html)
-* [状态管理](https://didi.github.io/mpx/store/#%E5%A4%9A%E5%AE%9E%E4%BE%8B) (Vuex规范 / 支持多实例Store)
-* 跨团队开发 ([packages](https://didi.github.io/mpx/single/json-enhance.html#packages))
-* 逻辑复用 ([mixins](https://didi.github.io/mpx/single/script-enhance.html#mixins))
-* [周边能力支持](https://didi.github.io/mpx/extend/) (fetch / api增强 / mock / webview-bridge)
-* 脚手架支持
-* [多平台增强](https://didi.github.io/mpx/platform.html#%E5%A4%9A%E5%B9%B3%E5%8F%B0%E6%94%AF%E6%8C%81) (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
-* [跨平台编译](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91) (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和[web平台](https://didi.github.io/mpx/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E8%BE%93%E5%87%BAweb)中运行)
-* [TypeScript支持](https://didi.github.io/mpx/ts.html) (基于ThisType实现了完善的类型推导)
-* [I18n国际化](https://didi.github.io/mpx/i18n.html)
-* 单元测试支持 (即将到来)
-* 快应用输出 (即将到来)
-
-## 安装使用
-
-```bash
-# 安装mpx脚手架工具
-npm i -g @mpxjs/cli
-
-# 初始化项目
-mpx create mpx-project
-
-# 进入项目目录
-cd mpx-project
-
-# 安装依赖
-npm i
-
-# development
-npm run serve
-
-# production
-npm run build
-```
-
-使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。
-
-## 简单示例
-
-```html
-<template>
-  <!--动态样式-->
-  <view class="container" wx:style="{{dynamicStyle}}">
-    <!--数据绑定-->
-    <view class="title">{{title}}</view>
-    <!--计算属性数据绑定-->
-    <view class="title">{{reversedTitle}}</view>
-    <view class="list">
-      <!--循环渲染，动态类名，事件处理内联传参-->
-      <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
-            bindtap="handleTap(index)">
-        <view>{{item.content}}</view>
-        <!--循环内部双向数据绑定-->
-        <input type="text" wx:model="{{list[index].content}}"/>
-      </view>
-    </view>
-    <!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件-->
-    <custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
-    <!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效-->
-    <component is="{{current}}"></component>
-    <!--显示/隐藏dom-->
-    <view class="bottom" wx:show="{{showBottom}}">
-      <!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist-->
-      <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
-      <view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
-    </view>
-  </view>
-</template>
-
-<script>
-  import { createPage } from '@mpxjs/core'
-
-  createPage({
-    data: {
-      // 动态样式和类名也可以使用computed返回
-      dynamicStyle: {
-        fontSize: '16px',
-        color: 'red'
-      },
-      title: 'hello world',
-      list: [
-        {
-          content: '全军出击',
-          id: 0,
-          active: false
-        },
-        {
-          content: '猥琐发育，别浪',
-          id: 1,
-          active: false
-        }
-      ],
-      customInfo: {
-        title: 'test',
-        content: 'test content'
-      },
-      current: 'com-a',
-      showBottom: false
-    },
-    computed: {
-      reversedTitle () {
-        return this.title.split('').reverse().join('')
-      }
-    },
-    watch: {
-      title: {
-        handler (val, oldVal) {
-          console.log(val, oldVal)
-        },
-        immediate: true
-      }
-    },
-    handleTap (index) {
-      // 处理函数直接通过参数获取当前点击的index，清晰简洁
-      this.list[index].active = !this.list[index].active
-    },
-    onReady () {
-      setTimeout(() => {
-        // 更新数据，同时关联的计算属性reversedTitle也会更新
-        this.title = '你好，世界'
-        // 此时动态组件会从com-a切换为com-b
-        this.current = 'com-b'
-      }, 1000)
-    }
-  })
-</script>
-
-<script type="application/json">
-  {
-    "usingComponents": {
-      "custom-input": "../components/custom-input",
-      "com-a": "../components/com-a",
-      "com-b": "../components/com-b"
-    }
-  }
-</script>
-
-<style lang="stylus">
-  .container
-    position absolute
-    width 100%
-</style>
-```
-
-更多示例请查看[官方示例项目](https://github.com/didi/mpx/tree/master/examples)
-
-## 设计思路
-
-Mpx的核心设计思路为增强，不同于业内大部分小程序框架将web MVVM框架迁移到小程序中运行的做法，Mpx以小程序原生的语法和技术能力为基础，借鉴参考了主流的web技术设计对其进行了扩展与增强，并在此技术上实现了以微信增强语法为base的同构跨平台输出，该设计带来的好处如下：
-* 良好的开发体验：在方便使用框架提供的便捷特性的同时，也能享受到媲美原生开发的确定性和稳定性，完全没有`框架太多坑，不如用原生`的顾虑；不管是增强输出还是跨平台输出，最终的dist代码可读性极强，便于调试排查；
-* 极致的性能：得益于增强的设计思路，Mpx框架在运行时不需要做太多封装抹平转换的工作，框架的运行时部分极为轻量简洁，压缩+gzip后仅占用14KB；配合编译构建进行的包体积优化和基于模板渲染函数进行的数据依赖跟踪，Mpx框架在性能方面做到了业内最优([小程序框架运行时性能评测报告](https://github.com/hiyuki/mp-framework-benchmark/blob/master/README.md))；
-* 完整的原生兼容：同样得益于增强的设计思路，Mpx框架能够完整地兼容小程序原生技术规范，并且做到实时跟进。在Mpx项目中开发者可以方便地使用业内已有的小程序生态，如组件库、统计工具等；原生开发者们可以方便地进行渐进迁移；甚至可以将框架的跨平台编译能力应用在微信的原生小程序组件当中进行跨平台输出。
-
-
-## 生态周边
-
-|包名|版本|描述|
-|-----|----|----|
-|@mpxjs/core|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fcore.svg)](https://badge.fury.io/js/%40mpxjs%2Fcore)|mpx运行时核心|
-|@mpxjs/webpack-plugin|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fwebpack-plugin.svg)](https://badge.fury.io/js/%40mpxjs%2Fwebpack-plugin)|mpx编译核心|
-|@mpxjs/cli|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fcli.svg)](https://badge.fury.io/js/%40mpxjs%2Fcli)|mpx脚手架命令行工具|
-|@mpxjs/fetch|[![npm version](https://badge.fury.io/js/%40mpxjs%2Ffetch.svg)](https://badge.fury.io/js/%40mpxjs%2Ffetch)|mpx网络请求库，处理wx并发请求限制|
-|@mpxjs/webview-bridge|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fwebview-bridge.svg)](https://badge.fury.io/js/%40mpxjs%2Fwebview-bridge)|为跨小程序平台的H5项目提供通用的webview-bridge|
-|@mpxjs/api-proxy|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fapi-proxy.svg)](https://badge.fury.io/js/%40mpxjs%2Fapi-proxy)|将各个平台的 api 进行转换，也可以将 api 转为 promise 格式|
-|@mpxjs/mock|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fmock.svg)](https://badge.fury.io/js/%40mpxjs%2Fmock)|结合mockjs提供数据mock能力|
-
-## 成功案例
-
-<div>
-    <img src="https://user-images.githubusercontent.com/6292668/75111787-a30fb000-5678-11ea-9ef1-78b18973ee75.jpg" width="100" title="滴滴出行"/>
-    <img src="https://user-images.githubusercontent.com/7993339/75113972-5387af00-568d-11ea-96c9-fe8122ce1032.jpg" width="100" title="彗星英语"/>
-    <img src="https://user-images.githubusercontent.com/18588816/75115186-322bc080-5697-11ea-9036-46066a19b65b.jpg" width="100" title="番薯借阅"/>
-    <img src="https://user-images.githubusercontent.com/16451550/75129100-6c7e7780-5702-11ea-87c0-dd3faf7a7538.jpg" width="100" title="疫查查应用"/>
-    <img src="https://user-images.githubusercontent.com/18554963/75134630-d8b8a580-5719-11ea-86fb-c3fdb8fbc144.png" width="100" title="滴滴金融小程序"/>
-    <img src="https://user-images.githubusercontent.com/6810697/75212604-69e35700-57c2-11ea-9190-d8a6cb77ba9d.jpg" width="100" title="小桔养车"/>
-    <img src="https://user-images.githubusercontent.com/6810697/75530109-a2976080-5a4e-11ea-97fa-01a433538ece.jpeg" width="100" title="学而思网校免费直播课"/>
-    <img src="https://user-images.githubusercontent.com/6810697/75531887-26514d00-5a4f-11ea-81c8-3df632531178.jpeg" width="100" title="小猴启蒙课"/>
-    <img src="https://user-images.githubusercontent.com/10382462/76416594-547f4700-63d6-11ea-9e9f-390a64e6b9c5.png" width="100" title="科创书店"/>
-    <img src="https://user-images.githubusercontent.com/14816052/76678054-9fd06a00-660f-11ea-8631-be93fe3dc2c2.jpg" width="100" title="在武院"/>
-    <img src="https://user-images.githubusercontent.com/17399581/77496337-b7b4b300-6e85-11ea-99b8-0ce90844ec67.jpg" width="100" title="三股绳Lite - 群打卡"/>
-</div>    
-
-[更多案例](https://github.com/didi/mpx/issues/385)，若你也在使用Mpx框架开发小程序，并想分享给大家，请填在此issue中。
-
-## 交流
-
-提供 微信群 / QQ群 两种交流方式
-
-#### 添加MPX入群客服等待受邀入群
-
-<img alt="Mpx-wx客服" src="https://dpubstatic.udache.com/static/dpubimg/3c2048fd-350d-406f-8a84-a3a7b8b9dcf3.jpg" width="300">
-
-#### 扫码进入QQ群
-
-<img alt="Mpx-QQ群" src="https://dpubstatic.udache.com/static/dpubimg/ArcgC_eEr/temp_qrcode_share_374632411.png" width="300">
-
-图片因github网络问题导致不可见的朋友可以点击该链接：https://s.didi.cn/rod
-
-## 招聘
-
-滴滴出行小程序团队绝赞招人中，欢迎各位前端同学加入我们，开发日活过千万的头部小程序应用滴滴出行，并参与Mpx框架技术建设。
-
-感兴趣的同学请将简历投递至[donghongping@didiglobal.com](donghongping@didiglobal.com)，社招校招均可~
diff --git a/docs/migrate.md b/docs/migrate.md
deleted file mode 100644
index 21fee26f08..0000000000
--- a/docs/migrate.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# 2.0迁移指南
-
-mpx2.0是完全兼容1.0版本的，显著的区别是支持了跨小程序平台的支持，
-
-新创建的项目不用关心迁移问题，直接开发即可，使用1.0时期的包等都不受影响。
-
-需要注意的一点是对小程序提供的API调用，我们使用了@mpxjs/api-proxy来抹平差异，同时之前的promisify被整合到了这个包里，所以1.x升级2.x需要替换@mpxjs/promisify为@mpxjs/api-proxy，使用方式为 `mpx.use(apiProxy, {usePromise: true})` ，同时，所有的api调用应从wx.xxx变更为mpx.xxx，比如wx.navigateTo写为mpx.navigateTo，**参数保持和微信一致，平台差异方面api-proxy做了抹平**。
-
-老项目可以有两种升级方式：
-
-## 拷贝升级
-
-如果你的项目是在1.0时期利用脚手架生成的，希望体验2.0的新特性，最简单的方式是升级cli工具后新创建一个项目，删掉src部分，复制老项目的src即可。
-
-一个有所变化的地方在于，新项目的打开项目方式发生了一些变化，原本用微信开发者工具打开项目目录变为了用开发者工具打开构建结果目录（dist或dist/wx，取决于是否用跨平台构建），变化的原因详情见下方 [附录-文件结构区别](#文件结构区别) 部分。
-
-## 手工升级
-
-如果你的项目之前就是手工配置的或者被个性化再次修改过或者对webpack配置非常熟练了解，也可以按照以下内容参考自行手工升级。
-
-### 依赖升级
-
-* `@mpxjs/core`由1.x升级至2.0
-* `@mpxjs/webpack-plugin`由1.x升级至2.0
-
-### 依赖变更
-
-* `@mpxjs/promisify`废弃，使用`@mpxjs/api-proxy`代替
-* `@mpxjs/url-loader`废弃，合入到`@mpxjs/webpack-plugin`中维护
-
-### webpack配置变更
-
-在2.0版本中，为了更好地处理小程序中template和wxs的引用，我们重写了url-loader和file-loader，并且调整了原有的wxs-loader的工作机制，这会导致项目的build/webpack.base.conf.js中的module.rules配置发生一定的变化，调整规则如下：
-
-```js
-const webpackConf = {
-  module: {
-    rules: [
-      {
-        test: /\.mpx$/,
-        use: MpxWebpackPlugin.loader({
-          transRpx: {
-            mode: 'only',
-            comment: 'use rpx',
-            include: resolve('src')
-          }
-        })
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/@mpxjs')]
-      },
-      {
-        test: /\.json$/,
-        resourceQuery: /__component/,
-        type: 'javascript/auto'
-      },
-      // 1.x版本中的配置
-      // {
-      //   test: /(\.wxs|\.sjs|\.filter\.js)$/,
-      //   use: MpxWebpackPlugin.wxsLoader(),
-      //   type: 'javascript/auto',
-      //   issuer: /(\.wxml|\.axml|\.swan|\.mpx|\.th)$/
-      // },
-      // {
-      //   test: /\.(png|jpe?g|gif|svg)$/,
-      //   loader: '@mpxjs/url-loader',
-      //   options: {
-      //     name: 'img/[name].[ext]',
-      //     limit: 10000
-      //   }
-      // },
-      
-      // 2.0版本后的配置
-      {
-        test: /\.(wxs|sjs|filter\.js)$/,
-        loader: MpxWebpackPlugin.wxsPreLoader(),
-        enforce: 'pre'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)$/,
-        loader: MpxWebpackPlugin.urlLoader({
-          name: 'img/[name].[ext]'
-        })
-      }
-    ]
-  }
-}
-```
-
-## 附录
-
-#### 文件结构区别
-
-使用@mpxjs/cli脚手架生成的项目在1.0版本时期和2.0版本时期有些区别。
-
-早先因社区同学的建议使用了在项目根目录下的project.config.json文件中通过指定miniprogramRoot字段为dist，好处是不用复制，在微信小程序开发工具里可以用编辑器直接修改保存project.config.json文件。但跨小程序平台支持下，我们可能会在dist文件夹下再深一个层级区分不同小程序比如会有/dist/wx，/dist/ali，/dist/swan这样，出于打开项目体验的一致性等方面考量，决定这个微信特有的文件还是复制进构建结果里，不通过miniprogramRoot指定。
-
-因此对于微信小程序的开发，1.0时期项目直接拷贝src到迁移2.0生成的新项目需要注意打开方式由打开项目目录改为打开项目构建生成的dist目录，如果是要用到跨平台特性（npm run build:cross），则要打开/dist/wx目录。
diff --git a/docs/platform.md b/docs/platform.md
deleted file mode 100644
index 306ba2181a..0000000000
--- a/docs/platform.md
+++ /dev/null
@@ -1,434 +0,0 @@
-# 多平台支持
-
-目前mpx支持了微信、支付宝、百度、qq、头条小程序平台。
-
-## template增强特性
-
-不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。
-
-模板增强指令对应表：
-
-增强指令|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-双向绑定|wx:model|a:model|s-model|qq:model|tt:model
-双向绑定辅助属性|wx:model-prop|a:model-prop|s-model-prop|qq:model-prop|tt:model-prop
-双向绑定辅助属性|wx:model-event|a:model-event|s-model-event|qq:model-event|tt:model-event
-双向绑定辅助属性|wx:model-value-path|a:model-value-path|s-model-value-path|qq:model-value-path|tt:model-value-path
-动态样式绑定|wx:class|a:class|s-class|qq:class|暂不支持
-动态样式绑定|wx:style|a:style|s-style|qq:style|暂不支持
-获取节点/组件实例|wx:ref|a:ref|s-ref|qq:ref|tt:ref
-显示/隐藏|wx:show|a:show|s-show|qq:show|tt:show
-
-## script增强特性
-
-增强字段|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-computed|支持|支持|支持|支持|部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)
-watch|支持|支持|支持|支持|支持
-mixins|支持|支持|支持|支持|支持
-
-## style增强特性
-
-无平台差异
-
-## json增强特性
-
-增强字段|微信|支付宝|百度|qq|头条
-----|----|----|----|----|----
-packages|支持|支持|支持|支持|部分支持，无法分包
-
-
-# 跨平台编译
-
-自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。
-
-## 使用方法
-
-如果你是使用`mpx init xxx`新生成的项目，package.json里script部分有`npm run build:cross`，直接执行`npm run build:cross`（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台
-
-如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下
-
-```js
-// 下面的示例配置能够将mpx微信小程序源码编译为支付宝小程序
-new MpxwebpackPlugin({
-  // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt)
-  mode: 'ali',
-  // srcMode为mpx编译的源码平台，目前仅支持wx   
-  srcMode: 'wx' 
-})
-```
-
-## 跨平台差异抹平
-
-为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异
-
-### 模板语法差异抹平
-
-对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。
-
-### 组件/页面对象差异抹平
-
-不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。
-
-此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：
-* 在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；
-* 提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；
-* 重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；
-* 转换抹平了微信/支付宝中properties定义的差异；
-* 利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;
-* 提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力
-
-对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：
-* 将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；
-* 利用mpx本身的mixins能力模拟微信中的behaviors能力。
-
-对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。
-
-### json配置差异抹平
-
-类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。
-
-### api调用差异抹平
-
-对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用`@mpxjs/api-proxy`，并且在调用小程序api时统一使用mpx对象进行调用，示例如下：
-
-```js
-// 请在app.mpx中安装mpx插件
-import mpx, { createApp } from '@mpxjs/core'
-import apiProxy from '@mpxjs/api-proxy'
-
-mpx.use(apiProxy, {
-  // 开启api promisify
-  usePromise: true
-})
-
-createApp({
-  onLaunch() {
-    // 调用小程序api时使用mpx.xxx，而不要使用wx.xxx或者my.xxx
-    mpx.request({url: 'xxx'})
-  }
-})
-```
-
-对于无法转换抹平的api调用会在运行时阶段报错指出。
-
-### webview bridge差异抹平
-
-对于不同平台中webview bridge的调用，我们封装了一个`@mpxjs/webview-bridge`包，用于抹平不同小程序平台中webview bridge的差异，简单使用示例如下：
-
-```js
-import mpx from '@mpxjs/webview-bridge'
-
-mpx.navigateBack()
-```
-
-对于无法转换抹平的bridge调用会在运行时阶段报错指出，详细使用指南请查看[webview-bridge](/extend/index.md#webview-bridge)
-
-## 跨平台条件编译
-
-Mpx跨平台编译的原则在于，`能转则转，转不了则报错提示`，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。
-
-mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。
-
-### 文件维度条件编译
-
-文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。
-
-文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个`虚拟的`.ali文件，并将其指向项目中的其他文件位置。
-
-```js
-  // 对于npm包中的文件依赖
-  import npmModule from 'somePackage/lib/index'
-  
-  // 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件
-  const webpackConf = {
-    resolve: {
-      alias: {
-        'somePackage/lib/index.ali': 'projectRoot/somePackage/lib/index'
-      }
-    }
-  }
-```
-
-### 区块维度条件编译
-
-在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加`mode`属性定义该区块的目标平台即可，示例如下：
-
-```html
-<!--编译mode为ali时使用如下区块-->
-<template mode="ali">
-<!--该区块中的所有代码需采用支付宝的技术标准进行编写-->
-  <view>支付宝环境</view>
-</template>
-
-<!--其他编译mode时使用如下区块-->
-<template>
-  <view>其他环境</view>
-</template>
-```
-
-### 代码维度条件编译
-
-如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问`__mpx_mode__`获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。
-
-除了 `__mpx_mode__` 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。
-
-```js
-if(__mpx_mode__ === 'ali') {
-  // 执行支付宝环境相关逻辑
-} else {
-  // 执行其他环境相关逻辑
-}
-```
-template代码中使用示例如下
-
-```html
-<!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换-->
-<view wx:if="{{__mpx_mode__ === 'ali'}}">支付宝环境</view>
-<view wx:else>其他环境</view>
-```
-
-JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：
-```html
-<script name="json">
-const pages = __mpx_mode__ === 'wx' ? [
-  'main/xxx',
-  'sub/xxx'
-] : [
-  'test/xxx'
-] // 可以为不同环境动态书写配置
-module.exports = {
-  usingComponents: {
-    aComponents: '../xxxxx' // 可以打注释 xxx组件
-  }
-}
-</script>
-```
-
-样式的条件编译：
-```css
-/*
-  @mpx-if (
-      __mpx_mode__ === 'wx' ||
-      __mpx_mode__ === 'qq'
-  )
-*/
-  /* @mpx-if (__mpx_mode__ === 'wx') */
-  wx {
-    background: green;
-  }
-  /*
-    @mpx-elif (__mpx_mode__ === 'qq')
-  */
-  qq {
-    background: black;
-  }
-  /* @mpx-endif */
-
-  /* @mpx-if (__mpx_mode__ === 'swan') */
-  swan {
-    background: cyan;
-  }
-  /* @mpx-endif */
-  always {
-    background: white;
-  }
-/*
-  @mpx-else
-*/
-other {
-  /* @mpx-if (__mpx_mode__ === 'swan') */
-  background: blue;
-  /* @mpx-else */
-  background: red;
-  /* @mpx-endif */
-}
-/*
-  @mpx-endif
-*/
-```
-
-## 其他注意事项
-
-* 当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2[点此查看详情](https://docs.alipay.com/mini/framework/custom-component-overview)；
-* 跨平台源码中自定义组件的标签名不能使用驼峰形式`myComponent`，请使用横杠形式`my-component`来书写；
-* 生成的目标代码中文件名和文件夹名不能带有`@`符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。
-
-# 跨平台输出web
-
-从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，由于该能力目前还处于持续开发阶段，目前仅支持将一些简单的运营类的小程序输出为web项目，无法直接转换大型复杂项目，我们会持续对输出web的能力进行完善和补全，以提高其适用范围和开发体验。
-
-## 技术实现
-
-与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序->web的转换在可行性和兼容性上会好一些。
-
-在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。
-
-## 使用方法
-
-使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行`npm run serve:web`，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。
-
-## 支持范围
-目前输出web的能力仍处于持续开发阶段，现阶段支持的小程序技术能力范围有限，下列表格中显示了当前版本中已支持的能力范围
-
-### 模板指令
-指令名称|是否支持
-:----|----
-Mustache数据绑定|是
-wx:for|是
-wx:for-item|是
-wx:for-index|是
-wx:key|是
-wx:if|是
-wx:elif|是
-wx:else|是
-wx:model|是
-wx:model-prop|是
-wx:model-event|是
-wx:model-value-path|是
-wx:model-filter|是
-wx:class|是
-wx:style|是
-wx:ref|是
-wx:show|是
-
-### 事件绑定方式
-
-绑定方式|是否支持
-:----|----
-bind|是
-catch|是
-capture-bind|是
-capture-catch|是
-
-### 事件名称
-
-事件名称|是否支持
-:----|----
-tap|是
-longpress|是
-longtap|是
-
-web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常
-
-### 基础组件
-
-组件名称|是否支持
-:----|----
-view|是
-cover-view|是
-scroll-view|是
-progress|是
-navigator|是
-swiper|是
-swiper-item|是
-text|是
-image|是
-block|是
-form|是
-input|是
-textarea|是
-button|是
-checkbox|是
-checkbox-group|是
-radio|是
-radio-group|是
-picker|是
-
-### 生命周期
-
-声明周期名称|是否支持
-:----|----
-onLaunch|是
-onLoad|是
-onReady|是
-onShow|是
-onHide|是
-onUnload|是
-onError|是
-created|是
-attached|是
-ready|是
-detached|是
-updated|是
-
-### 组件配置
-
-
-配置项|支持度
-:----|----
-properties|部分支持，observer不支持，请使用watch代替
-data|支持
-watch|支持
-computed|支持
-methods|支持
-mixins|支持
-observers|不支持，请使用watch代替
-behaviors|不支持，请使用mixins代替
-relations|部分支持，linkChanged、target不支持
-
-### 组件API
-
-api名称|支持度
-:----|----
-triggerEvent|支持
-$nextTick|支持
-createSelectorQuery/selectComponent|支持
-
-
-### 全局API
-
-api名称|支持度
-:----|----
-navigateTo|支持
-navigateBack|支持
-redirectTo|支持
-request|支持
-connectSocket|支持
-SocketTask|支持
-EventChannel|支持
-createSelectorQuery|支持
-base64ToArrayBuffer|支持
-arrayBufferToBase64|支持
-nextTick|支持
-set|支持
-setNavigationBarTitle|支持
-setNavigationBarColor|支持
-setStorage|支持
-setStorageSync|支持
-getStorage|支持
-getStorageSync|支持
-getStorageInfo|支持
-getStorageInfoSync|支持
-removeStorage|支持
-removeStorageSync|支持
-clearStorage|支持
-clearStorageSync|支持
-getSystemInfo|支持
-getSystemInfoSync|支持
-showModal|支持
-showToast|支持
-hideToast|支持
-showLoading|支持
-hideLoading|支持
-onWindowResize|支持
-offWindowResize|支持
-
-### JSON配置
-配置项|是否支持
-:----|----
-pages|是
-usingComponents|是
-packages|是
-subpackages|是
-navigationBarTitleText|是
-
-### 拓展能力
-能力|是否支持
-:---|---
-fetch|是
-i18n|是
-
-
-
-
diff --git a/docs/plugin.md b/docs/plugin.md
deleted file mode 100644
index 35ab974f81..0000000000
--- a/docs/plugin.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# 插件模式
-
-介绍小程序插件及插件模式创建项目的流程
diff --git a/docs/progressive.md b/docs/progressive.md
deleted file mode 100644
index 566307e21e..0000000000
--- a/docs/progressive.md
+++ /dev/null
@@ -1,181 +0,0 @@
-# 渐进接入
-
-可参考此demo：[mpx渐进接入demo](https://github.com/didi/mpx/tree/master/examples/mpx-progressive)
-
-mpx并不一定要求用户一定要一次性用上框架的所有东西。
-
-若是 **已有项目** 期望接入mpx，**`不需要对原有代码做全局重写`**。
-
-可以保持原有代码不变，新的组件、页面期望使用mpx的某些特性才引入mpx。
-
-甚至我们允许用户用mpx框架编写新的页面/组件再局部导出相应的页面/组件反用到现有的小程序项目中。见[导出原生](#导出原生)一节。（当然还是建议大家优先考虑老项目渐进改为mpx，而不是这种反过来的模式）
-
-## 原生自定义组件支持
-
-有些时候，我们需要在`mpx`工程中使用原生小程序组件:
-
-- 通过`npm`引用安装第三包
-- 将第三方包源码拷贝到本地`src`目录下
-
-> 注：mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的[开发第三方自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html)
-
-### 原理
-
-根据`unsingComponents`中设定的路径，`mpx`会去查找包的入口js文件。然后提取入口文件所在的**目录**中的`js` `json` `wxss` `wxml`进行编译
-
-编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得`mpx`可以精确的收集依赖，这表现在：
-
-- `js`文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积
-- `json`文件的`usingComponents`会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件
-- `wxss`中引用外部样式
-- `wxml`中的图片资源会被打包
-
-> 例如使用第三方组件库时，很多组件可能并未使用，如果按照组件库官方给出的使用方式，其实会将整个组件库放进你的项目。  
-而采用mpx这种方式则只会引入你使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。  
-（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）
-
-### 例子 
-
-**文件目录**
-  ```
-  node_modules
-  |-- npm-a-wx-component // npm安装
-  |   --package.json
-  |   --src
-  |     --index.js
-  |     --index.json
-  |     --index.wxss
-  |     --index.wxml
-  |-- npm-b-wx-component // npm安装
-  |   --package.json
-  |   --src
-  |     --index.js
-  |     --index.json
-  |     --index.wxss
-  |     --index.wxml
-  component
-  │-- container.mpx 
-  │-- com-a.mpx 
-  |-- src-wx-component // 手动拷贝
-  |  --index.js
-  |  --index.json
-  |  --index.wxss
-  |  --index.wxml
-
-  ```
-
-**container.mpx**
-```html
-<template>
-  <view>
-    <!-- mpx组件 -->
-    <com-a></com-a>
-    <!-- npm安装的原生组件 -->
-    <npm-a-wx-component></npm-a-wx-component>
-    <!-- 手动拷贝到工程的原生组件 -->
-    <src-wx-component></src-wx-component>
-  </view>
-</template>
-
-<script type="application/json">
-  "usingComponents": {
-    "com-a": "./com-a",
-    "npm-a-wx-component": "npm-a-wx-component",
-    "src-wx-component": "./src-wx-component"
-  }
-</script>
-```
-
-**node_modules/npm-a-wx-component/src/index.wxml**
-```html
-<template>
-  <view>
-    <view>this is a native component</view>
-    <!-- 原生组件内部使用原生组件 -->
-    <npm-b-wx-component></npm-b-wx-component>
-  </view>
-</template>
-```
-
-**node_modules/npm-a-wx-component/src/index.json**
-```json
-{
-  "usingComponents": {
-    "npm-b-wx-component": "npm-b-wx-component"
-  }
-}
-```
-
-## 原生page支持
-
-原生自定义组件的支持已经基本能保证第三方UI库和mpx的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了mpx想使用，就需要用户手工将4个文件变成mpx文件，这不够友好。
-
-于是我们提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和mpx文件，两者可以混合使用，通过webpack的构建将两者完美混合在一起生成最终的dist。
-
-使用方式和组件相似。
-
-## 导出原生
-
-通过导出原生能力，你可以将一个mpx项目融回到原生项目中。有两种做法：一是局部导出部分页面/组件，二是完整导出一个mpx项目。
-
-### 导出部分页面/组件
-
-使用mpx开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。
-
-仅需修改webpack config中entry一项，将app改为对应的页面/组件即可。
-
-请参考下面的例子，`注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。`
-
-例子：
-
-```js
-// 
-module.exports = merge(baseWebpackConfig, {
-  name: 'main-compile',
-  // entry point of our application
-  entry: {
-    // 此处以mpx脚手架生成的项目为例
-    
-    // before
-    // app: resolveSrc('app.mpx')
-    
-    // after
-    'pages/dindex': resolveSrc('./pages/index.mpx?page'),
-    'components/dlist': resolveSrc('./components/list.mpx?component')
-  }
-})
-```
-
-拷贝dist里所有文件到原生微信小程序项目根目录即可正常工作。
-
-### 完整导出
-
-我们也可以使用mpx完成一整个项目的开发，这个项目可能包含多个页面，这些页面将合作完成某一项完整的功能，一般可能是公共需求，比如登录/用户中心等公共模块。
-
-如果接入方也是Mpx框架开发的项目，那么皆大欢喜，会非常easy。但若对方是原生开发的，这时我们就希望能将整个项目完整导出成原生，并让接入方顺利使用。
-
-其实观察下mpx项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。
-
-所以完整导出整个项目的做法可以是这样：
-
-1. 确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据`/pages/index/index`，页面路径Mpx是不会修改的，所以定一个`/pages/{模块名}/{页面名}`就好。
-
-2. app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。
-
-3. 如果有要导出的入口文件，需要给output增加配置：
-```js
-// webpack.conf
-module.exports = {
-  entry: {
-    app: resolveSrc('app.mpx'),
-    index: resolveSrc('index.js') // 导出的入口文件，若没有可不写
-  },
-  output: {
-    libraryTarget: 'commonjs2',
-    libraryExport: 'default' // 若export default导出需要写这个,module.exports可省略
-  },
-  // ... 略
-}
-```
-
-4. 整个复制进接入方的项目里，注册对应的页面，然后就可以正常使用了！
diff --git a/docs/single/json-enhance.md b/docs/single/json-enhance.md
deleted file mode 100644
index ab48c25fe7..0000000000
--- a/docs/single/json-enhance.md
+++ /dev/null
@@ -1,255 +0,0 @@
-# JSON增强特性
-
-## 动态与注释
-
-作为配置文件，json最大的缺陷是不支持注释，然后是不够灵活。此处感谢社区同学贡献的解决方案：支持js。
-
-json块我们除了可以写`<script type="application/json"> …… </script>`，还可以这样：
-
-```html
-<script name="json">
-const pages = __mpx_mode__ === 'wx' ? [
-  'main/xxx',
-  'sub/xxx'
-] : [
-  'test/xxx'
-] // 可以为不同环境动态书写配置
-module.exports = {
-  usingComponents: {
-    aComponents: '../xxxxx' // 可以打注释 xxx组件
-  }
-}
-</script>
-```
-
-## packages
-
-### 背景
-
-小程序原生的app.json中定义了pages域，用于注册app中所有用到的pages，  
-这个设计能够cover绝大部分个人开发的场景，但是当我们在开发一个团队协作的大型项目时，某个开发者可能会依赖其他开发者提供的单个或几个页面/组件来进行开发。
-
-为此，我们引入了packages的概念来解决依赖问题。
-
-后来微信原生增加了 [分包加载](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html) 能力，因此我们也在package机制中增加了对原生分包加载的支持。
-
-我们提供的包能力本质是对业务的拆分合并，即开发时候可以各自开发，打包时候合为一个，和微信的分包不相同，推荐在此基础上进一步使用平台原生分包能力，可以更好地控制小程序体积。
-
-### 使用方法
-
-我们拓展了app.json的语法，新增了packages域，用来声明依赖的packages，packages可嵌套依赖。
-
-```html
-// @file src/app.mpx
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/index/index"
-    ],
-    "packages": [
-      "{npmPackage || relativePathToPackage}/index"
-    ]
-  }
-</script>
-
-// @file src/packages/index.mpx
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/other/other",
-      "./pages/other/other2"
-    ]
-  }
-</script>
-```
-
-打包结果：dist/app.json
-```json
-{
-  "pages": [
-    "pages/index/index",
-    "pages/other/other",
-    "pages/other/other2"
-  ]
-}
-```
-
-由上可见，经过我们的编译过程，packages中注册的页面按照原始的路径形状被合并到主app中，
-这样依赖的开发者可以不用考虑自己在被依赖时页面路径是怎么样的，也可以直接将调试用的app.mpx作为依赖入口直接暴露出去，
-对于主app的开发者来说也不需要了解依赖内部的细节，只需要在packages中声明自己所需的依赖即可
-
-#### 注意事项
-
-- 依赖的开发者在自己的入口app.mpx中注册页面时对于本地页面一定要使用相对路径进行注册，否则在主app中进行编译时会找不到对应的页面
-- 不管是用json还是mpx格式定义package入口，编译时永远只会解析json且只会关注json中的pages和packages域，其余所有东西在主app编译时都会被忽略
-- 由于我们是将packages中注册的页面按照原始的路径合并到主app当中，有可能会出现路径名冲突。  
-这种情况下编译会报出响应错误提示用户解决冲突，为了避免这种情况的发生，依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。
-
-例如一个包叫login，建议包内页面文件目录为：
-
-```
-project
-│   app.mpx  
-└───pages
-    └───login
-        │   page1.mpx
-        │   page2.mpx
-        │   ...
-```
-
-## 分包
-
-作为一个对performance极度重视的框架，分包作为提升小程序体验的重要能力，是必须支持的。
-
-微信文档中有以下三种分包，mpx对这些能力都做了较好的支持。
-
-> 分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前微信的分包机制是最全面的，百度其次，支付宝暂时无此能力，请根据平台决定如何使用。
-
-- [普通分包](#普通分包)
-- [分包预下载](#分包预下载)
-
-#### 普通分包
-
-mpx中会将 app.mpx（入口文件，也不一定非要叫app.mpx） 中packages域下的路径带root为key的query则被解析认为是使用分包加载。
-
-> 使用分包一定要记得阅读下面的[分包注意事项](#分包注意事项)
-
-```html
-// @file src/app.mpx
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/index/index"
-    ],
-    "packages": [
-      "{npmPackage || relativePathToPackage}/index?root=test"
-    ]
-  }
-</script>
-
-// @file src/packages/index.mpx (子包的入口文件)
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/other/other",
-      "./pages/other/other2"
-    ]
-  }
-</script>
-```
-
-打包结果：dist/app.json
-```json
-{
-  "pages": [
-    "pages/index/index"
-  ],
-  "subPackages": [
-    {
-      "root": "test",
-      "pages": [
-        "pages/other/other",
-        "pages/other/other2"
-      ]
-    }
-  ]
-}
-```
-
-分包加载的好处详见微信的文档。路径冲突的概率也大大降低，只需要保证root不同即可。
-
-#### 分包预下载
-
-> 仅微信小程序提供该部分能力
-
-分包预下载是在json中新增一个 preloadRule 字段，mpx打包时候会原封不动把这个部分放到app.json中，所以只需要按照 [微信小程序官方文档 - 分包预下载](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html) 配置即可。
-
-前面的普通分包中提到了subpackages是根据用户在package中通过增加query，key为root来指定分包名。我们进一步扩展了这个能力，允许用户传递更多的query。
-
-比如：
-
-```html
-// @file src/app.mpx
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/index/index"
-    ],
-    "packages": [
-      "{npmPackage || relativePathToPackage}/index?root=xxx&name=subpack1"
-    ]
-  }
-</script>
-
-// @file src/packages/index.mpx (子包的入口文件)
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/other/other",
-      "./pages/other/other2"
-    ]
-  }
-</script>
-```
-
-打包结果：dist/app.json
-```json
-{
-  "pages": [
-    "pages/index/index"
-  ],
-  "subPackages": [
-    {
-      "name": "subpack1",
-      "root": "xxx",
-      "pages": [
-        "pages/other/other",
-        "pages/other/other2"
-      ]
-    }
-  ]
-}
-```
-
-#### 分包注意事项
-
-当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面  
-不用分包时会是：wx.jump/pages/other/other2  
-使用分包后应为：/test/pages/other/other2  
-即前面会多?root={rootKey}的rootKey这一层
-
-为了解决这个问题，有三种方案：
-
-- import的时候在最后加'?resolve', 例如: `import testPagePath from '../pages/testPage.mpx?resolve'` , 编译时就会把它处理成正确的完整的绝对路径。
-
-- 使用相对路径跳转。
-
-- 定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）
-
-建议使用第一种。
-
-## 自定义tabbar
-
-什么是自定义tabbar参见微信文档。https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
-
-app.mpx的json部分的tabBar里custom一项为true时，需要在 src 目录下存在 custom-tab-bar 目录且里面有index.mpx，这个index.mpx里就编写自定义tabbar的模板、js、样式和json部分即可。
-
-**注意事项**：使用该feature时候要认真阅读官方例子，在页面的show钩子上要再手工设置一遍tabbar的selected值。
-
-## 体积优化指南
-
-由于微信小程序限制主包体积为2M，较复杂的应用可能需要尽可能进行体积优化。
-
-分包是微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持，可以精确地标记出分包only的资源。此外还可以从按需构建及分析构建结果等方面下手。
-
-1. 尽量让纯分包用的代码和主包用的代码分离（即让资源成为分包only的）
-
-    - 比如分包页面中需要使用一个叫 utilA 的体积很大的方法，主包页面中需要使用一个叫 utilB 的方法，如果你将这两个方法写在同一个 util.js 文件中，util模块最终会被打包到主bundle中，造成没必要的主包体积增大。[更多参考](understanding/understanding.md#分包处理细节)
-
-2. 在json里做最小声明，mpx本身提供了按需打包的能力，但按需是指按用户的声明，无法做到根据一个page是否被使用来打包
-
-    - 比如分包单独开发再以npm包形式发布这种开发模式中，可能会出现npm包开发者方为了调试组件编写了多份page引用对应组件仅为调试方便，最终集成时就会让这些调试页面占用空间。可以另提供一份json文件和app.mpx同级，比如叫index.json，开发包时候以app.mpx为入口，集成时候以index.json为入口。
-
-3. 使用analysis工具分析体积大的原因
-
-    - 构建时加上 `--report` 参数，会生成构建图，即可查看整个项目的体积构成来源了，进而分析是哪些模块占据了体积。webpack生态，webpack-bundle-analyzer插件提供的。
diff --git a/docs/single/script-enhance.md b/docs/single/script-enhance.md
deleted file mode 100644
index 6db7b27904..0000000000
--- a/docs/single/script-enhance.md
+++ /dev/null
@@ -1,238 +0,0 @@
-# script增强特性
-
-在原生自定义组件config的基础上，`mpx`新增支持了watch、computed、mixins、pageShow & pageHide等字段提高开发体验，同时`mpx`提供一个深度优化的机制来接管小程序的`setData`调用，用户在组件/页面当中可以使用`this.someData = 'abc'`的方式来设置数据，永远不应该直接调用`setData`去设置数据，这有可能导致数据不一致的问题。
-
-## computed
-
-计算属性是一个函数/带setter和getter的对象，利用组合其它数据的方式返回一个新的数据，你可以像绑定普通数据一样在模板中绑定计算属性。
-> 类型：{ [key: string]: Function | { get: Function, set: Function } }
-> 适用于【页面 | 组件】
-
-示例：
-
-```html
-<template>
-  <view>
-    <text>Original message: "{{ message }}"</text>
-    <text>Computed reversed message: "{{ reversedMessage }}"</text>
-  </view>
-</template>
-
-<script>
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    message: 'Hello',
-    num: 5
-  },
-  computed: {
-    // 计算属性
-    reversedMessage: function () {
-      return this.message.split('').reverse().join('')
-    },
-    // 读取和设置
-    computeNum: {
-      get: function () {
-        return this.num - 1
-      },
-      set: function (val) {
-        this.num = val + 1
-      }
-    }
-  },
-  ready() {
-    // 改变message后reversedMessage会同步更新，模板也会重新渲染
-    this.message = 'Hello world!'
-    this.computeNum // 4
-    this.computeNum = 10 
-    this.num // 11
-  }
-})
-</script>
-```
-
-## watch
-
-`mpx`为小程序原生组件提供了观察和响应上的数据变动的能力。虽然计算属性在大多数情况下已满足需求，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
-
-> 适用于【页面 | 组件】
-
-例如：
-
-```html
-<template>
-<view>
-  <view>{{question}}</view>
-  <view>{{answer}}</view>
-</view>
-</template>
-
-<script>
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  data: {
-    question: 'old',
-    answer: 'I cannot give you an answer until you ask a question!',
-    info: {
-      name: 'a'
-    },
-    arr: [{
-      age: 1
-    }]
-  },
-  watch: {
-    // 如果 `question` 发生改变，这个函数就会运行
-    question: function (newval, oldval) {
-      console.log(newval, ':',  oldval) // test:old
-      this.answer = 'Waiting for you to stop typing...'
-    },
-    question: {
-      handler (newval, oldval) {
-        console.log(newval, ':',  oldval) // test:old
-        this.answer = 'Waiting for you to stop typing...'
-      },
-      immediate: true // 立即执行一次
-      // deep: true // 是否深度观察
-      // sync: true // 数据变化之后是否同步执行，默认是进行异步队列
-    },
-    'info.name' (val) {
-      // 支持路径表达式
-      console.log(val) // b
-    },
-    'arr[0].age' (val) {
-      // 支持路径表达式
-      console.log(val) // 100
-    },
-    'question, answer' (val, old) {
-      // 同时观察多个值, val为数组个数, question变化时
-      console.log(val) // ['test', 'I cannot give you an answer until you ask a question!']
-    }
-  },
-  attached () {
-    // 3s之后修改数据
-    setTimeout(() => {
-      this.changeData()
-    }, 3000)
-  },
-  methods: {
-    changeData() {
-      this.question = 'test'
-      this.info.name = 'b'
-      this.arr[0].age = 100
-    }
-  }
-})
-</script>
-```
-
-除了 watch 选项之外，您还可以使用命令式的 `this.$watch` API。
-
-## mixins
-
-`mixins` 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项，他们将使用相同的选项合并逻辑合并。举例：如果你混合包含一个钩子而创建组件本身也有一个，两个函数将被调用。
-Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
-
-> 适用于【APP | 页面 | 组件】
-
-示例：
-
-```js
-// mixin.js
-export default {
-  data: {
-    list: {
-      'phone': '手机',
-      'tv': '电视',
-      'computer': '电脑'
-    }
-  },
-  ready () {
-    console.log('mixins ready:', this.list.phone)
-  }
-}
-```
-
-```html
-<template xmlns="">
-  <view class="list">
-    <view wx:for="{{list}}">{{item}}</view>
-  </view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  import mixin from './mixin'
-  createComponent({
-    mixins: [mixin],
-    ready () {
-      console.log('component ready:', this.list.tv)
-    }
-  })
-</script>
-```
-
-输出结果为
-```
-mixins ready: 手机
-component ready: 电视
-```
-
-
-## 页面生命周期转换
-
-除了类支付宝小程序之外，其他平台都能以组件的方式创建页面，因此mpx内部默认是以Component来创建页面的（微信小程序、百度小程序、头条小程序等类微信小程序）。[按官方标准](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html)，以Component创建页面时，页面特有的生命周期（onLoad、onReady、onShow等等）都必须`定义在methods内部`。为了进行统一处理，使用`mpx.createPage创建页面`时，可以统一使用标准页面的格式，`所有生命周期都定义在最外层即可`，mpx内部会根据普通进行`自动转换`到methods里面
-
-```html
-<script>
-import {createPage} from '@mpxjs/core'
-// 类微信小程序
-createPage({
-  onLoad () {
-    // 页面加载
-    console.log('page onload')
-  },
-  onShow () {
-    // 页面显示
-    console.log('page onload')
-  },
-  onPullDownRefresh () {
-    // 需在json域开启enablePullDownRefresh
-    console.log('page onPullDownRefresh')
-  },
-  attached () {
-    // 以Component创建页面，那么页面也将具体组件的生命周期
-  },
-  detached () {
-    // 以Component创建页面，那么页面也将具体组件的生命周期
-  }
-})
-</script>
-```
-
-## <del>组件生命周期扩展</del>
-
-> 2.5.x 起不建议使用  
-> 2.6.x 将废弃  
-> 早期小程序本身缺乏组件感应所在页面的状态的能力做的增强，在小程序本身提供了 pageLifetimes 后失去意义且有不必要的性能开销，2.5.x为了避免业务异常，换手段hack实现了这两个方法，但同时有在控制台提示不要再使用，2.6.x将彻底去掉。
-
-除了小程序自定义组件本身的生命周期外，`mpx`为组件本身提供了两个生命周期钩子，`pageShow`和`pageHide`，用于监听当前组件所属页面的显示或隐藏状态。
-
-```html
-<template>
-  <view>组件新生命周期</view>
-</template>
-
-<script>
-import {createComponent} from '@mpxjs/core'
-createComponent({
-  pageShow () {
-    // 所在页面显示之后就会执行一次
-    console.log('page show')
-  },
-  pageHide () {
-    // 页面切入后台执行
-    console.log('page hide')
-  }
-})
-</script>
-```
diff --git a/docs/single/style-enhance.md b/docs/single/style-enhance.md
deleted file mode 100644
index 98a784fa7c..0000000000
--- a/docs/single/style-enhance.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# style增强特性
-
-## css预处理器
- 
-`mpx`支持所有主流的`css预编译处理`，只需要在`<style>`的`lang`中设置使用的预编译语言`（stylus/less/sass等）`并且安装对应的`webpack-loader`即可正常使用。
- 
- 示例：
- ```vue
-<template>
-  <view class="container">
-    <text class="item">123</text>
-  </view>
-</template>
-
-<style lang="stylus">
-.container
- padding 10px
- .item
-     text-align center
-</style>
- ```
- 
-## 样式引用
-
-两种方式引用：
-- style内使用@import语法引入
-- 在style标签上通过src引入
-
-前者会被内联打入 组件/页面 对应的wxss文件，后者则是会将src对应的文件收集到wxss文件夹里，再在 组件/页面 对应的wxss文件中通过@import引入。
-
-在一个mpx文件中，两者可以同时使用，例如：
-
-```vue
-<!--src/components/test.mpx-->
-<!--省略template\script\json部分-->
-
-<!--这个部分的样式会被收集进wxss文件夹再被test.wxss引入-->
-<style src="../common/index.css"></style>
-
-<style>
-/*这个部分的代码会被内联打入test.wxss*/
-.test {
-  background-color: red;
-}
-</style>
-
-<!--也可以使用样式预处理语言比如sass、stylus、less等等-->
-<style lang="scss" src="../style/test.scss"></style>
-```
-
-**建议对于多个 页面/组件 公用的样式，使用src形式引入，避免一份样式被内联打成多份。**
-
-## rpx转换
-
-为了处理某些ide中不支持`rpx`单位的问题，`mpx`提供了一个将px转换为rpx的功能。
-
-支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。
-
-通过transRpx参数来进行配置，配置项是这样 **一个对象** ，也可以是 **多个这样的对象组成的数组** 。
-
-```js
-const transRpx = {
-  mode: 'all', // 可选值有none/only/all 分别是不启用，只对注释内容启用，只不对注释内容启用
-  comment: 'use px', // rpx注释，建议使用 'use px' / 'use rpx'，当mode为all时默认值为use px，mode为only时默认值为use rpx
-  include: resolve('src'), // 同webpack的include规则
-  exclude: resolve('lib'), // 同webpack的exclude规则
-  designWidth: 750 // 设计稿宽度，默认值就是750
-}
-```
-
-配置在 build.js / webpack.conf.js 中的 MpxWebpackPlugin.loader 的参数中（找已经存在的，勿新加）。关于如何配置详情请查看[mpx-loader选项](/compilationEnhance/index.md#mpxwebpackpluginloader)
-
-#### 应用场景及相应配置
-
-接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在webpack.conf.js里找到MpxWebpackPlugin.loader，应该已经有预设的transRpx选项，按例修改即可。本处示例中为了代码合规，声明了新变量表示来这个选项，项目中应该直接为option对象的子属性。
-
-三种场景分别是 [普通使用，因设计稿是px的二倍/三倍图](#场景一) ， [只对某些特殊样式转换](#场景二) ， [不同路径分别配置规则](#场景三)
-
-#### 场景一
-设计师给的稿是2倍图，分辨率750px。或者更高倍图。
-
-```js
-const transRpx = {
-  mode: 'all',
-  designWidth: 750 // 如果是其他倍，修改此值为设计稿的宽度即可
-}
-```
-
-#### 场景二
-
-大部分样式都用px下，某些元素期望用rpx。或者反过来。
-
-```js
-const transRpx = {
-  mode: 'only',
-  comment: 'use rpx',
-  designWidth: 750 // 设计稿宽度
-}
-```
-mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下面附录。
-
-#### 场景三
-使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则
-
-```js
-  {
-    test: /\.mpx$/,
-    use: MpxWebpackPlugin.loader({
-      transRpx: [
-        {
-          mode: 'only',
-          designWidth: 750,
-          comment: 'use rpx',
-          include: resolve('src')
-        },
-        {
-          mode: 'all',
-          designWidth: 1280, // 对iview单独使用一个不同的designWidth
-          include: resolve('node_modules/iview-weapp')
-        }
-      ]
-    })
-  }
-```
-
-> 注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include和exclude的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则include的是'/'即整个项目，iview-weapp里的样式就无法命中第二条规则了。
-
-#### transRpx附录
-
-designWidth
-
-设计稿宽度，单位为`px`。默认值为`750px`。
-
-`mpx`会基于小程序标准的屏幕宽度`baseWidth 750rpx`，与`option.designWidth`计算出一个转换比例`transRatio`
-
-转换比例的计算方式为`transRatio = (baseWidth / designWidth)`。精度为小数点后2位四舍五入
-
-所有生效的`rpx注释样式`中的px会乘上`transRatio`得出最终的rpx值
-
-例如：
-
-```css
-/* 转换前：designWidth = 1280 */
-.btn {
-  width: 200px;
-  height: 100px;
-}
-
-/* 转换后: transRatio = 0.59 */
-.btn {
-  width: 118rpx;
-  height: 59rpx;
-}
-```
----
-
-comment: rpx注释样式
-
-根据`rpx注释`的位置，`mpx`会将`一段css规则`或者`一条css声明`视为`rpx注释样式`
-
-开发者可以声明一段rpx注释样式，提示编译器是否转换这段css中的px
-
-例如：
-```html
-<style lang="css">
-  /* use px */
-  .not-translate-a {
-    font-size: 100px;
-    padding: 10px;
-  }
-  .not-translate-b {
-    /* use px */
-    font-size: 100px;
-    padding: 10px;
-  }
-  .translate-a {
-    font-size: 100px;
-    padding: 10px;
-  }
-  .translate-b {
-    font-size: 100px;
-    padding: 10px;
-  }
-</style>
-```
-> 第一个注释位于一个`选择器`前，是一个`css规则注释`，整个规则都会被视为`rpx注释样式`
-
-> 第二个注释位于一个`css声明`前，是一个`css声明注释`，只有`font-size: 100px`会被视为`rpx注释样式`
-
-> `transRpx = all`模式下，除了这两条rpx注释样式之外，其他都会转rpx
diff --git a/docs/single/template-enhance.md b/docs/single/template-enhance.md
deleted file mode 100644
index 199ee2e607..0000000000
--- a/docs/single/template-enhance.md
+++ /dev/null
@@ -1,248 +0,0 @@
-# template增强特性
-
-对于模板部分，我们提供了class与style的绑定，`wx:model`指令，动态组件等特性
-
-## class与style绑定
-
-#### 绑定HTML Class
-
-类似vue的class绑定
-
-例子：
-```html
-<template>
-  <view wx:class="{{ {active: isActive} }}">
-    这是一段测试文字
-  </view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-
-  createComponent({
-    properties: {
-      isActive: Boolean
-    }
-  })
-</script>
-
-<style lang="stylus">
-  .active
-    background-color blue
-</style>
-```
-
-当该组件接受一个参数isActive为true时，就会为view加上class:active。
-
-> 注意：由于微信的限制，wx:class 中的 key 值不能使用引号（如: { 'my-class-name': xx }）。
-
-#### 绑定内联样式
-
-例子：
-```html
-<template>
-  <view wx:for="{{list}}" wx:style="{{item.style}}">{{item.name}}</view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  createComponent({
-    data:{
-      list:[
-        {
-          name: 'red',
-          style: {
-            color: 'red'
-          }
-        },
-        {
-          name: 'blue',
-          style: {
-            color: 'blue'
-          }
-        }         
-      ]
-    }
-  })
-</script>
-```
-
-## 内联事件绑定
-
-对于事件处理在模板上的绑定，原生小程序只能通过事件信息结合手工拿取data里的信息，我们希望能和vue的事件绑定一样更灵活地传参
-
-例子：
-```html
-<template>
-  <view>
-    <view bindtap="handleTap1(1)">Click me!</view>
-    <view bindtap="handleTap2(testVal, $event)">Click me!</view>
-  </view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  createComponent({
-    data: {
-      testVal: '123'
-    },
-    methods: {
-      handleTap1 (val) {
-        console.log(val) // 1
-      },
-      handleTap2 (val, event) {
-        console.log(val) // '123'
-        console.log(event) // 微信原生事件
-      }
-    }
-  })
-</script>
-```
-
-> 注意：由于微信的限制，如果事件名使用横线链接分割（如: 'value-change'），将不可以使用该feature。以及在wx:for中，若遍历的是对象数组，内联传入的item并非是对象的引用，若想修改对象，请用index到原数组中获取。
-
-## 动态组件
-
-通过使用保留的 `<component>` 组件，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
-
-```html
-<template>
-  <!--动态组件，此处的componentName为json中注册的usingComponents的key值-->
-  <component is="{{componentName}}"></component>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  createComponent({
-    data: {
-      componentName: 'test'
-    },
-    ready () {
-      setTimeout(() => {
-        this.componentName = 'list'
-      }, 3000)
-    }
-  })
-</script>
-
-<script type="application/json">
-  {
-    "usingComponents": {
-      "list": "../components/list",
-      "test": "../components/test"
-    }
-  }
-</script>
-```
-
-## 双向绑定
-
-除了小程序原生指令之外，mpx 基于`input`事件提供了一个指令 `wx:model`, 用于双向绑定。
-
-例子：
-```html
-<template>
-  <view>
-    <input wx:model="{{val}}"/>
-    <input wx:model="{{test.val}}"/>
-    <input wx:model="{{test['val']}}"/>
-  </view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  createComponent({
-    data: {
-      val: 'test',
-      test: {
-        val: 'xxx'
-      }
-    }
-  })
-</script>
-```
-
-wx:model并不会影响相关的事件处理函数，比如像下面这样：
-
-```html
-<input wx:model="{{inputValue}}" bindinput="handleInput"/>
-```
-
-#### wx:model对应的属性和事件
-
-wx:model默认监听`input`事件使用`value`属性传值，如果我们希望改变默认行为，可以使用`wx:model-prop`和`wx:model-event`来定义wx:model对应的属性和事件：
-
-父组件
-```html
-<template>
-  <customCheck wx:model="{{checked}}" wx:model-prop="checkedProp" wx:model-event="checkedChange"></customCheck>
-</template>
-
-<script>
-  import {createPage} from '@mpxjs/core'
-  createPage({
-    data: {
-      checked: true
-    }
-  })
-</script>
-```
-
-子组件（customCheck）
-```html
-<template>
-  <view bindtap="handleTap">{{checkedProp}}</view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  createComponent({
-    properties: {
-      checkedProp: Boolean
-    },
-    methods: {
-      handleTap () {
-        // 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐
-        this.triggerEvent('checkedChange', {
-          value: !this.checkedProp
-        })
-      }
-    }
-  })
-</script>
-```
-
-如示例，当子组件被点击时，父组件的checked数据会发生变化
-
-> 注意：由于微信的限制，如果事件名使用横线链接分割（如: 'checked-change'），将不可以使用该feature。
-
-以及并不是所有的组件都会按微信的标准格式event.detail.value来传值，比如vant的input组件，值的抛出是用event.detail本身来传递的，这时我们可以使用 `wx:model-value-path` 来指定双向绑定时的取值路径。
-
-例如：
-```html
-<vant-field wx:model-value-path="[]" wx:model="{{a}}"></vant-field>
-```
-
-## Refs
-
-提供了 `wx:ref="xxx"` 来更方便获取 WXML 节点信息的对象。在JS里只需要通过this.$refs.xxx 即可获取节点。
-
-示例：
-```html
-<template>
-  <view wx:ref="tref">
-    123
-  </view>
-</template>
-
-<script>
-import {createComponent} from '@mpxjs/core'
-  createComponent({
-    ready () {
-      this.$refs.tref.fields({size: true}, function (res) {
-        console.log(res)
-      }).exec()
-    }
-  })
-</script>
-```
diff --git a/docs/single/what-is-single-file.md b/docs/single/what-is-single-file.md
deleted file mode 100644
index e95ae09c34..0000000000
--- a/docs/single/what-is-single-file.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# 单文件
-
-介绍单文件编译开发特性，包括单文件中有哪些部分以及如何进行ide配置等
-
-## 介绍
-
-按照小程序的文件规范，app & page & component 的组成部分都是四个文件，js, wxss, wxml, json; 多文件的形式在开发上体验并不是特别友好，使用过`vue`的同学都知道，单文件的开发模式更内聚，更可维护。因此mpx也提供了单文件开发模式，文件扩展名为 `.mpx`
-
-通过 `webpack` 构建工具和 `mpx-loader` 可以将文件扩展名为 .mpx 的 `single file component` 转换成小程序所需要的四个文件。
-
-这四个文件对应于单文件中的四个区域
-
-### 基础例子
-
-```html
-<!--对应wxml文件-->
-<template>
-  <view>hello mpx</view>
-</template>
-<!--对应js文件-->
-<script>
-</script>
-<!--对应wxss文件-->
-<style lang="stylus">
-</style>
-<!--对应json文件-->
-<script type="application/json">
-</script>
-```
-
-## 编辑器/IDE高亮、提示
-
-- [IntelliJ](what-is-single-file.md#IntelliJ)
-- [vscode](what-is-single-file.md#vscode)
-
-#### IntelliJ
-
-如果使用IntelliJ系IDE开发，可将mpx后缀文件关联到vue类型，按vue解析。
-![关联文件类型](../images/start-tips2.png)
-但会报一个warning提示有重复的script标签，关闭该警告即可。
-![关闭警告](../images/start-tips1.png)
-
-
-#### vscode
-
-在Visual Studio Marketplace中获取[Mpx语法高亮插件](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)
-
-> 下方的方案为社区同学贡献，通过更多的插件使用，可能在某些功能上有所增强，但也可能遇到一些其他问题，请个人判断是否需要
-
-##### vscode插件
-
-因为`.mpx`采用类似于`.vue`的单文件语法风格，可以使用Vue的插件通过[配置vscode扩展语言](https://code.visualstudio.com/docs/languages/overview#_adding-a-file-extension-to-a-language)
-，将`.mpx`绑定到`.vue`语法的支持。
-
-此外还有minapp插件可以配合使用。
-
-**更新**: `minapp`最新版已经支持了mpx，所以对`minapp`的使用加以修改
-
-1. `minapp`此插件主要功能是给`template`加上`wxml`的`snippet`功能，只要在 template 标签中添加属性`minapp='mpx' xlang='wxml'`就可以使用
-2. `wechat-snippet`，主要是使用里面的`wx.xxx`的snippet
-3. `vetur`主要使用其高亮和格式化功能，配套安装有`prettier`，新版配置为
-
-```
- "vetur.format.defaultFormatterOptions": {
-    "prettyhtml": {
-      "printWidth": 100, // No line exceeds 100 characters
-      "singleQuote": false // Prefer double quotes over single quotes
-    },
-    "prettier": {
-      // Prettier option here
-      "semi": false,
-      "singleQuote": true,
-      "eslintIntegration": true
-    }
-  }
-```
-
-**注意**:
-1. 当添加了`xlang="wxml"`后，可以使用`vetur`配置的`template`的格式化，但是会存在vue插件的`snippet`
-2. **在改成`xlang="wxml"`后，虽然能格式化了，但是`image`和`input`标签的格式化会出问题，所以最好在最后完成的时候，改回`lang="wxml"`关闭格式化**
-3. 注意使用vscode的工作区功能，最好把`vue`插件相关提示先关闭了
-4. 因为`mpx`单文件具有两个script标签，直接格式化会出问题，需要
-```
-<script  type='application/json' lang='json'>
-{
- "navigationBarTitleText": "",
- "usingComponents": {
-
- }
-}
-</script>
-```
-如上，需要在json的script中，加上`lang="json"`这样就不会对这个标签进行格式化
-
-##### vscode代码片段
-
-此功能主要是为了新建文件后快速生成一些代码，只要在设置里，选择`用户代码片段`，在选择`vue.json`，将以下代码复制进去。之后只要输出写好的`prefix`，就能自动提示生成。
-如此你也可以对`javascript.json`做一些自定义的代码片段
-```
-"Print to weapp page": {
- "prefix": "page",
- "body": [
-   "<template minapp='native' xlang='wxml'>",
-   "  <view class='container'>\n",
-   "  </view>",
-   "</template>\n",
-   "<script>",
-   "import { createPage } from '@mpxjs/core'",
-   "  createPage({",
-   "    data: {",
-   "    },",
-   "    onShow() {",
-   "      // 所在页面显示之后就会执行一次",
-   "      console.log('page show')\n",
-   "    },",
-   "    onHide() {",
-   "      // 页面切入后台执行",
-   "     console.log('page hide')\n",
-   "    },",
-   "    /**",
-   "     * 页面相关事件处理函数--监听用户下拉动作",
-   "    */",
-   "    onPullDownRefresh() {},",
-   "    /**",
-   "     * 页面上拉触底事件的处理函数",
-   "    */",
-   "    onReachBottom() {},",
-   "     /**",
-   "       * 用户点击右上角分享",
-   "     */",
-   "    onShareAppMessage() {},"
-   "  })",
-   "</script>\n",
-   "<style lang='scss'>\n",
-   " .container {} ",
-   "</style>",
-   "<script  type='application/json' lang='json'>",
-   "{",
-   " \"navigationBarTitleText\": \"搜索\",",
-   " \"usingComponents\": {}",
-   "}",
-   "</script>\n",
-   "$2"
- ],
- "description": "weapp page"
-},
-"Print to weapp components": {
- "prefix": "components",
- "body": [
-   "<template minapp='native' xlang='wxml'>",
-   "  <view class='container'>\n",
-   "  </view>",
-   "</template>\n",
-   "<script>",
-   "import { createComponent } from '@mpxjs/core'",
-   "  createComponent({",
-   "    properties: {\n},",
-   "    data: {",
-   "    },",
-   "    pageShow() {",
-   "      // 所在页面显示之后就会执行一次",
-   "      console.log('page show')\n",
-   "    },",
-   "    pageHide() {",
-   "      // 页面切入后台执行",
-   "     console.log('page hide')\n",
-   "    },",
-   "    methods: {\n",
-   "    }",
-   "  })",
-   "</script>\n",
-   "<style lang='scss'>\n",
-   " .container {} ",
-   "</style>",
-   "<script  type='application/json' lang='json'>",
-   "{ ",
-   " \"component\": true",
-   "}",
-   "</script>\n",
-   "$2"
- ],
- "description": "weapp components"
-}
-```
diff --git a/docs/start.md b/docs/start.md
deleted file mode 100644
index ff6ae39249..0000000000
--- a/docs/start.md
+++ /dev/null
@@ -1,229 +0,0 @@
-# 开始
-
-使用脚手架`mpx-cli`，快速开始开发mpx小程序
-## 安装mpx-cli  
-```shell
-npm i -g @mpxjs/cli
-```
-
-## 创建工程
-
-* 在当前目录中创建工程目录
-
-```shell
-mpx create <project-name>
-```
-
-`插件项目`由于微信限制必须填写插件的`AppID`，`普通项目`无强制要求。
-
-## mpx编译
-
-启动服务，mpx会将源码编译成小程序识别的代码，并监听文件变化进行重编译
-
-```shell
-npm install
-npm run serve
-```
-
-## 小程序编译
-mpx编译完成后，会将小程序代码放置在dist目录
-
-参考小程序官方的[开发指南](https://developers.weixin.qq.com/miniprogram/dev/)进行预览、调试
-
-## 创建App/Page/Component
-
-我们通过createApp、createPage、createComponent（分别对应小程序原生的App、Page、Component方法）来创建小程序、页面、组件。
-
-下面看一个例子：
-
-## 例子
-
-开始一个demo项目的流程。
-
-初始化项目：
-![安装项目](images/start-install.png)
-
-接下来：
-```bash
-# 进入project
-cd mpx-demo
-
-# 安装依赖
-npm i
-
-# 进行开发
-npm run serve
-```
-
-![开启服务](images/start-start.png)
-
-用微信开发者工具打开目录 `~/testproject/mpx-test/dist`
-
-在src/app.mpx创建一个App
-
-```html
-<script>
-  import { createApp } from '@mpxjs/core'
-  createApp({
-    onShow(options) {
-      console.log(options)
-    }
-  })
-</script>
-
-<style lang="stylus">
-  page
-    font-family: PingFangSC-Regular, PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif
-</style>
-
-<script type="application/json">
-  {
-    "pages": [
-      "./pages/index/index"
-    ],
-    "window": {
-      "backgroundTextStyle": "light",
-      "navigationBarBackgroundColor": "#fff",
-      "navigationBarTitleText": "WeChat",
-      "navigationBarTextStyle": "black"
-    }
-  }
-</script>
-
-```
-
-在src/pages创建Page
-
-```html
-<template>
-  <view class="page-container">
-    <list></list>
-  </view>
-</template>
-
-<script>
-  import {createPage} from '@mpxjs/core'
-
-  createPage({
-    onLoad () {
-    }
-  })
-</script>
-
-<style lang="stylus">
-  .page-container
-    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif
-</style>
-
-
-<script type="application/json">
-  {
-    "usingComponents": {
-      "list": "../../components/list/list"
-    }
-  }
-</script>
-
-```
-
-修改src/component/list/list.mpx的代码：
-
-```html
-<template xmlns="">
-  <view class="list">
-    <!--增强指令 wx:style-->
-    <view wx:style="{{listStyle}}" wx:for="{{listData}}">{{item}}</view>
-    <!--增强指令 wx:class-->
-    <view wx:class="{{isViewClass ? viewClass : ''}}">{{testData}}</view>
-    <!--watch question改变answer-->
-    <view>{{question}}</view>
-    <view>{{answer}}</view>
-    <!--增强指令 wx:model，用于双向绑定-->
-    <input wx:model="{{model}}"/>
-    <input wx:model="{{testModel.model}}"/>
-    <input wx:model="{{testModel['model']}}"/>
-    <!--动态组件，此处的componentName为json中注册的usingComponents的key值-->
-    <component is="{{componentName}}"></component>
-  </view>
-</template>
-
-<script>
-  import {createComponent} from '@mpxjs/core'
-  import mixin from './mixin'
-  createComponent({
-    mixins: [mixin],
-    data: {
-      model: '我是测试model双向绑定',
-      testModel: {
-        model: '我是测试model双向绑定'
-      },
-      listData: {
-        'phone': '手机',
-        'tv': '电视',
-        'computer': '电脑'
-      },
-      isViewClass: true,
-      viewClass: 'white-color',
-      listStyle: {
-        color: '#fff'
-      },
-      question: '我是测试watch用的',
-      answer: '我也是测试watch用的!',
-      componentName: 'testA'
-    },
-    ready () {
-      // mixinTestData来自mixin
-      console.log('component ready:', this.mixinTestData.tv)
-      setTimeout(() => {
-        this.changeData()
-        // 可以看到data可直接修改，实现了computed功能。
-        this.listData.phone = '110'
-        this.componentName = 'testB'
-      }, 2000)
-    },
-    computed: {
-      testData () {
-        return JSON.stringify(this.listData)
-      }
-    },
-    pageShow () {
-      // 所在页面显示之后就会执行一次
-      console.log('page show')
-    },
-    pageHide () {
-      // 页面切入后台执行
-      console.log('page hide')
-    },
-    watch: {
-      question(newval, oldval) {
-        this.answer = '我是测试观察属性watch'
-      }
-    },
-    methods: {
-      changeData() {
-        this.question = '我是测试观察属性watch'
-      }
-    }
-  })
-</script>
-
-<style lang="stylus">
-  .list
-    background-color red
-  .white-color
-    color #fff
-</style>
-
-<script type="application/json">
-  {
-    "component": true,
-    "usingComponents": {
-      "testA": "./testA",
-      "testB": "./testB"
-    }
-  }
-</script>
-
-```
-
-更多用法可以看这个todoMVC示例：https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC
diff --git a/docs/store/index.md b/docs/store/index.md
deleted file mode 100644
index f9cbe75ba7..0000000000
--- a/docs/store/index.md
+++ /dev/null
@@ -1,802 +0,0 @@
-# 数据管理
-
-我们对比了redux和vuex的设计，觉得vuex的设计更加地简单易用，最终参考了vuex的设计提供了一套数据管理方案，与vuex不同的是，我们提供了完善多实例store模式管理方案，以方便更加复杂的业务场景进行使用。
-
-这是一个简单的例子：
-
-* [开始](#开始)
-
-和Vuex类似，我们的mpx内置store主要有以下核心概念：
-
-* [state](#state)
-* [getters](#getter)
-* [mutation](#mutation)
-* [action](#action)
-* [子模块](#module)
-* [多实例store](#多实例)
-
-一些示例：
-- [todoMVC示例](https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC)
-
-# 开始
-
-“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。store 和单纯的全局对象有以下两点不同：
-
-1. store 的状态存储是响应式的。当 mpx 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
-
-2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
-
-### 最简单的store
-
-让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
-
-```js
-import {createStore} from '@mpxjs/core'
-
-const store = createStore({
-  state: {
-    count: 0
-  },
-  mutations: {
-    increment (state) {
-      state.count++
-    }
-  }
-})
-
-export default store
-```
-
-现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
-
-```js
-store.commit('increment')
-
-console.log(store.state.count) // -> 1
-```
-
-再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。
-
-接下来，我们将会更深入地探讨一些核心概念。让我们先从 [State](#state) 概念开始。
-
-# State
-
-### 在 mpx 组件中获得 store 状态
-
-那么我们如何在 mpx 组件中展示状态呢？由于 mpx内置的store 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
-
-```js
-// store.js
-import {createStore} from '@mpxjs/core'
-
-const store = createStore({
-  state: {
-    count: 0
-  },
-  mutations: {
-    increment (state) {
-      state.count++
-    }
-  }
-})
-
-export default store
-```
-
-``` js
-import store from '../store'
-import {createComponent} from '@mpxjs/core'
-
-createComponent({
-  computed: {
-    count () {
-      return store.state.count
-    }
-  }
-})
-```
-
-每当 `store.state.count` 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
-
-因为小程序原生组件的限制，无法实现自动向上查找父组件挂载的store，所以mpx的store无法像vuex一样提供vue类似的注入机制将其注入到每一个子组件中，所以需要在每个要用到store的地方手工地显式引入。
-
-### `mapState` 辅助函数
-
-当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 `store.mapState` 辅助函数帮助我们生成计算属性
-
-``` js
-// 在单独构建的版本中辅助函数为 mpx内置的store.mapState
-import store from '../store'
-import {createComponent} from '@mpxjs/core'
-
-createComponent({
-  // ...
-  computed: store.mapState({
-    // 箭头函数可使代码更简练
-    count: state => state.count,
-
-    // 传字符串参数 'count' 等同于 `state => state.count`
-    countAlias: 'count',
-
-    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
-    countPlusLocalState (state) {
-      return state.count + this.localCount
-    }
-  })
-})
-```
-
-当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 `store.mapState` 传一个字符串数组。
-
-``` js
-import store from '../store'
-import {createComponent} from '@mpxjs/core'
-
-createComponent({
-  computed: store.mapState([
-    // 映射 this.count 为 store.state.count
-    'count'
-  ])
-})
-```
-
-### 对象展开运算符
-
-`store.mapState` 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 `computed` 属性。但是自从有了[对象展开运算符](https://github.com/sebmarkbage/ecmascript-rest-spread)（现处于 ECMASCript 提案 stage-3 阶段），我们可以极大地简化写法：
-
-``` js
-import store from '../store'
-import {createComponent} from '@mpxjs/core'
-
-createComponent({
-  computed: {
-    localComputed () { /* ... */ },
-    // 使用对象展开运算符将此对象混入到外部对象中
-    ...store.mapState({
-      // ...
-    })
-  }
-})
-```
-
-### 组件仍然保有局部状态
-
-使用 mpx内置的store 并不意味着你需要将**所有的**状态放入`store`。如果有些状态严格属于单个组件，最好还是作为组件的`局部状态data`
-
-# Getter
-
-有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
-
-```js
-computed: {
-  doneTodosCount () {
-    return store.state.todos.filter(todo => todo.done).length
-  }
-}
-```
-
-如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
-
-mpx内置store 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
-
-Getter 接受 state 作为其第一个参数：
-
-```js
-import {createStore} from '@mpxjs/core'
-
-const store = createStore({
-  state: {
-    todos: [
-      { id: 1, text: '...', done: true },
-      { id: 2, text: '...', done: false }
-    ]
-  },
-  getters: {
-    doneTodos: state => {
-      return state.todos.filter(todo => todo.done)
-    }
-  }
-})
-
-export default store
-```
-
-Getter 会暴露为 `store.getters` 对象：
-
-``` js
-store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
-```
-
-Getter 也可以接受其他 getters 作为第二个参数, rootState作为第三个参数：
-
-```js
-getters: {
-  // ...
-  doneTodosCount: (state, getters, rootState) => {
-    return getters.doneTodos.length
-  }
-}
-```
-
-```js
-store.getters.doneTodosCount // -> 1
-```
-
-我们可以很容易地在任何组件中使用它：
-
-``` js
-computed: {
-  doneTodosCount () {
-    return store.getters.doneTodosCount
-  }
-}
-```
-
-你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
-
-```js
-getters: {
-  // ...
-  getTodoById: (state) => (id) => {
-    return state.todos.find(todo => todo.id === id)
-  }
-}
-```
-
-```js
-store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
-```
-
-### `store.mapGetters` 辅助函数
-
-`store.mapGetters` 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性`computed`里面：
-
-``` js
-import store from 'path to store'
-
-export default {
-  // ...
-  computed: {
-  // 使用对象展开运算符将 getter 混入 computed 对象中
-    ...store.mapGetters([
-      'doneTodosCount',
-      'anotherGetter',
-      // ...
-    ])
-  }
-}
-```
-
-如果你想将一个 getter 属性另取一个名字，使用对象形式：
-
-``` js
-store.mapGetters({
-  // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
-  doneCount: 'doneTodosCount'
-})
-```
-
-# Mutation
-
-更改 mpx内置store 的 store 中的状态的唯一方法是提交 mutation。mpx内置store 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 **事件类型 (type)** 和 一个 **回调函数 (handler)**。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
-
-``` js
-import {createStore} from '@mpxjs/core'
-
-const store = createStore({
-  state: {
-    count: 1
-  },
-  mutations: {
-    increment (state) {
-      // 变更状态
-      state.count++
-    }
-  }
-})
-
-export default store
-```
-
-你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 `increment` 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 **store.commit** 方法：
-
-``` js
-store.commit('increment')
-```
-
-### 提交载荷（Payload）
-
-你可以向 `store.commit` 传入额外的参数，即 mutation 的 **载荷（payload）**：
-
-``` js
-// ...
-mutations: {
-  increment (state, n) {
-    state.count += n
-  }
-}
-```
-``` js
-store.commit('increment', 10)
-```
-
-在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
-
-``` js
-// ...
-mutations: {
-  increment (state, payload) {
-    state.count += payload.amount
-  }
-}
-```
-
-``` js
-store.commit('increment', {
-  amount: 10
-})
-```
-
-### Mutation 需遵守的响应规则
-
-mpx内置store 中的状态是响应式的，那么当我们变更状态时，监视状态的 mpx页面或组件也会自动更新。这也意味着 mpx内置store 中的 mutation需要遵守一些注意事项：
-
-1. 无法感知属性的添加或删除，所以最好提前在你的 store 中初始化好所有所需属性。
-
-2. 当需要在对象上添加新属性时，你可以
-    ``` js
-    state.obj = { ...state.obj, newProp: 123 }
-    ```
-
-### Mutation 必须是同步函数
-
-一条重要的原则就是要记住 **mutation 必须是同步函数**
-
-
-### 在组件中提交 Mutation
-
-你可以在组件中使用 `store.commit('xxx')` 提交 mutation，或者使用 `store.mapMutations` 辅助函数将组件中的 `methods` 映射为 `store.commit` 调用。
-
-``` js
-import { createComponent } from '@mpxjs/core'
-import store from '../store'
-
-createComponent({
-  // ...
-  methods: {
-    ...store.mapMutations([
-      'increment', // 将 `this.increment()` 映射为 `store.commit('increment')`
-
-      // `mapMutations` 也支持载荷：
-      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `store.commit('incrementBy', amount)`
-    ]),
-    ...store.mapMutations({
-      add: 'increment' // 将 `this.add()` 映射为 `store.commit('increment')`
-    })
-  }
-})
-```
-
-# Action
-
-Action 类似于 mutation，不同在于：
-
-- Action 提交的是 mutation，而不是直接变更状态。
-- Action 可以包含任意异步操作。
-
-让我们来注册一个简单的 action：
-
-``` js
-import {createStore} from '@mpxjs/core'
-
-const store = createStore({
-  state: {
-    count: 0
-  },
-  mutations: {
-    increment (state) {
-      state.count++
-    }
-  },
-  actions: {
-    increment (context) {
-      context.commit('increment')
-    },
-    increment2({rootState, state, getters, dispatch, commit}) {
-    }
-  }
-})
-
-export default store
-```
-
-Action 函数接受一个 context 对象，因此你可以调用 `context.commit` 提交一个 mutation，或者通过 `context.rootState`、`context.state` 和 `context.getters` 来获取全局state、局部state 和 全局 getters。
-
-实践中，我们会经常用到 ES2015 的 [参数解构](https://github.com/lukehoban/es6features#destructuring) 来简化代码（特别是我们需要调用 `commit` 很多次的时候）：
-
-``` js
-actions: {
-  increment ({ commit }) {
-    commit('increment')
-  }
-}
-```
-
-### 分发 Action
-
-Action 通过 `store.dispatch` 方法触发：
-
-``` js
-store.dispatch('increment')
-```
-
-乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 **mutation 必须同步执行**这个限制么？Action 就不受约束！我们可以在 action 内部执行**异步**操作：
-
-``` js
-actions: {
-  incrementAsync ({ commit }) {
-    setTimeout(() => {
-      commit('increment')
-    }, 1000)
-  }
-}
-```
-
-Actions 支持同样的载荷方式进行分发：
-
-``` js
-// 以载荷形式分发
-store.dispatch('incrementAsync', {
-  amount: 10
-})
-```
-
-来看一个更加实际的购物车示例，涉及到**调用异步 API** 和**分发多重 mutation**：
-
-``` js
-actions: {
-  checkout ({ commit, state }, products) {
-    // 把当前购物车的物品备份起来
-    const savedCartItems = [...state.cart.added]
-    // 发出结账请求，然后乐观地清空购物车
-    commit(types.CHECKOUT_REQUEST)
-    // 购物 API 接受一个成功回调和一个失败回调
-    shop.buyProducts(
-      products,
-      // 成功操作
-      () => commit(types.CHECKOUT_SUCCESS),
-      // 失败操作
-      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
-    )
-  }
-}
-```
-
-注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。
-
-### 在组件中分发 Action
-
-你在组件中使用 `store.dispatch('xxx')` 分发 action，或者使用 `store.mapActions` 辅助函数将组件的 `methods` 映射为 `store.dispatch` 调用：
-
-``` js
-import { createComponent } from '@mpxjs/core'
-import store from '../store'
-
-createComponent({
-  // ...
-  methods: {
-    ...store.mapActions([
-      'increment', // 将 `this.increment()` 映射为 `store.dispatch('increment')`
-
-      // `mapActions` 也支持载荷：
-      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `store.dispatch('incrementBy', amount)`
-    ]),
-    ...store.mapActions({
-      add: 'increment' // 将 `this.add()` 映射为 `store.dispatch('increment')`
-    })
-  }
-})
-```
-
-### 组合 Action
-
-Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？
-
-首先，你需要明白 `store.dispatch` 可以处理被触发的 action 的处理函数返回的 Promise，并且 `store.dispatch` 仍旧返回 Promise：
-
-``` js
-actions: {
-  actionA ({ commit }) {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        commit('someMutation')
-        resolve()
-      }, 1000)
-    })
-  }
-}
-```
-
-现在你可以：
-
-``` js
-store.dispatch('actionA').then(() => {
-  // ...
-})
-```
-
-在另外一个 action 中也可以：
-
-``` js
-actions: {
-  // ...
-  actionB ({ dispatch, commit }) {
-    return dispatch('actionA').then(() => {
-      commit('someOtherMutation')
-    })
-  }
-}
-```
-
-最后，如果我们利用 [async / await](https://tc39.github.io/ecmascript-asyncawait/)，我们可以如下组合 action：
-
-``` js
-// 假设 getData() 和 getOtherData() 返回的是 Promise
-
-actions: {
-  async actionA ({ commit }) {
-    commit('gotData', await getData())
-  },
-  async actionB ({ dispatch, commit }) {
-    await dispatch('actionA') // 等待 actionA 完成
-    commit('gotOtherData', await getOtherData())
-  }
-}
-```
-
-# Module
-
-> PS：虽然支持module，但不支持namespace。在MPX里，我们更推荐使用[多实例模式](#多实例)
-
-当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
-
-为了解决以上问题，mpx内置store 允许我们将 store 分割成**模块（module）**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
-
-``` js
-import {createStore} from '@mpxjs/core'
-
-const moduleA = {
-  state: { ... },
-  mutations: { ... },
-  actions: { ... },
-  getters: { ... }
-}
-
-const moduleB = {
-  state: { ... },
-  mutations: { ... },
-  actions: { ... }
-}
-
-const store = createStore({
-  modules: {
-    a: moduleA,
-    b: moduleB
-  }
-})
-
-store.state.a // -> moduleA 的状态
-store.state.b // -> moduleB 的状态
-
-export default store
-```
-
-### 模块的局部状态
-
-对于模块内部的 mutation 和 getter，接收的第一个参数是**模块的局部状态对象**。
-
-``` js
-const moduleA = {
-  state: { count: 0 },
-  mutations: {
-    increment (state) {
-      // 这里的 `state` 对象是模块的局部状态
-      state.count++
-    }
-  },
-
-  getters: {
-    doubleCount (state) {
-      return state.count * 2
-    }
-  }
-}
-```
-
-同样，对于模块内部的 action，局部状态通过 `context.state` 暴露出来，根节点状态则为 `context.rootState`：
-
-``` js
-const moduleA = {
-  // ...
-  actions: {
-    incrementIfOddOnRootSum ({ state, commit, rootState }) {
-      if ((state.count + rootState.count) % 2 === 1) {
-        commit('increment')
-      }
-    }
-  }
-}
-```
-
-对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
-
-``` js
-const moduleA = {
-  // ...
-  getters: {
-    sumWithRootCount (state, getters, rootState) {
-      return state.count + rootState.count
-    }
-  }
-}
-```
-
-### 模块在组件中的引入方式
-
-``` js
-const store = createStore({
-  modules: {
-    a: {
-      state: {
-        name: 1
-      },
-      getters: {
-        getName: s => s.name
-      }
-    },
-    b: moduleB
-  }
-})
-
-createComponent({
-  computed: {
-    // mapState引入module方式有两种
-    ...store.mapState({
-      test: 'a.name'
-    }),
-    ...store.mapState('a', ['name']),
-    ...store.mapGetters('getName') // 由于没有提供namespace概念，所以getters都是全局的，类似的还有mutations & actions
-  }
-})
-```
-
-# 多实例
-
-允许创建多实例，各store实例彼此互相独立，状态互不干扰，不需要考虑命名空间的问题，而且可以随时动态创建一个新的store，更灵活且移植性更高。相对较于[modules](#module)，更推荐多实例模式
-
-### 联合多个store实例
-
-如果需要使用外部store的数据，`mpx` 也提供的createStore支持传入`deps`参数，表示注入的外部store。在store内部访问外部store的资源使用如下方式（都是加namespace形式的`path访问`模式）。由于注入store的各部分（state, getters, mutations, actions）是 **以key作为namespace** merge在options对应属性内部的，所以deps的key要防止冲突
-
-### 基础例子
-
-例子：
-
-```js
-import {createStore} from '@mpxjs/core'
-
-const store1 = createStore({
-  state: {
-    a: 1
-  },
-  getters: {
-    getA(state) {
-      return state.a
-    }
-  },
-  mutations: {
-    setA(state, payload) {
-      state.a = payload
-    }
-  },
-  actions: {
-    actionA({commit}, payload) {
-      commit('setA', payload)
-    }
-  }
-})
-const store2 = createStore({
-  state: {
-    b: 1
-  },
-  getters: {
-    getB(state, getters) {
-      // 访问外部store1的数据，按路径访问
-      return state.b + state.store1.a + getters.store1.getA
-    }
-  },
-  mutations: {
-    setB(state, payload) {
-      state.b = payload
-    }
-  },
-  actions: {
-    actionB({dispatch, commit}, payload) {
-      // 同理，mutations、actions访问外部store1的方法时，也是按路径访问
-      commit('store1.setA', payload)
-      dispatch('store1.actionA', payload)
-      commit('setB', payload)
-    }
-  },
-  deps: {
-    store1
-  }
-})
-
-export {store1, store2}
-```
-
-### 多store注入下的'store.mapGetters、store.mapMuations、store.mapActions'
-
-```js
-
-import {createStore, createComponent} from '@mpxjs/core'
-const store1 = createStore({
-  state: {
-    a: 1
-  },
-  getters: {
-    getA(state, getters) {
-      return state.b + state.store1.a + getters.store1.getA
-    }
-  },
-  mutations: {
-    setA(state, payload) {
-      state.a = payload
-    }
-  },
-  actions: {
-    actionA({commit}, payload) {
-      commit('setA', payload)
-    }
-  }
-})
-const store2 = createStore({
-  state: {
-    b: 1
-  },
-  getters: {
-    getB(state) {
-      return state.b + state.store1.a
-    }
-  },
-  mutations: {
-    setB(state, payload) {
-      state.b = payload
-    }
-  },
-  actions: {
-    actionB({dispatch, commit}, payload) {
-      commit('store1.setA', payload)
-      dispatch('store1.actionA', payload)
-      commit('setB', payload)
-    }
-  },
-  deps: {
-    // xx: store1
-    store1
-  }
-})
-
-// 组件内部使用store
-createComponent({
-  computed: {
-    ...store2.mapGetters(['getB']),
-    // 对于依赖store1的引入，可以使用以下两种方式，类似的mapMutations、mapActions, mapState
-    ...store2.mapgetters({
-      getA: 'store1.getA'
-    }),
-    ...store2.mapGetters('store1', ['getA'])
-  }
-})
-```
diff --git a/docs/ts.md b/docs/ts.md
deleted file mode 100644
index c0f44d7d45..0000000000
--- a/docs/ts.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# Typescript支持
-
-### 为什么要使用Typescript
-
->  `TypeScript` 是 `JavaScript` 的强类型版本，就然后在编译期去掉类型和特有语法，生成纯粹的 `JavaScript` 代码。由于最终在浏览器中运行的仍然是 `JavaScript`，所以 `TypeScript` 并不依赖于浏览器的支持，也并不会带来兼容性问题。
-
-> `TypeScript` 是 `JavaScript` 的超集，这意味着他支持所有的 `JavaScript` 语法。并在此之上对 `JavaScript` 添加了一些扩展，如 `class` / `interface` / `module` 等。这样会大大提升代码的可阅读性。
-
-### 总体上好处可以归纳成下面4点：
-
-1.  静态类型检查
-
-    静态类型检查可以避免很多不必要类型的错误，不用在调试的时候才发现问题。
-
-2.  IDE 智能提示
-    在 `TypeScript` 这一类语言之前， `JavaScript`  的智能提示基本完全依赖 IDE 提供的猜测。局限性就是，这种猜测可能并不正确。并且也缺乏更多的辅助信息, 所以要正确使用一个类库, 得不断地在文档和 IDE 之间切换，影响心情和效率， 而 `TypeScript` 不仅自己写的类库有丰富的类型信息。
-
-3. 代码重构
-
-    有时候的确需要修改一些变量/属性/方法名，牵涉到属性和方法的时候，很多改动是跨文件的，不像普通变量可以简单定位 `scope` ， 属性方法名的重命名对于 `JavaScript`来说异常痛苦， 一方面是修改本身就不方便, 另一方面是改了还不确定该改的是不是改了，不该改的是不是也改了。而 TypeScript 的静态类型系统就可以较为完美的解决这个问题。
-
-4. 可读性
-
-    对于阅读代码的人来讲，各种便利的类型一目了然，更容易明白作者的意图。
-
-## 使用方式
-
-### .mpx中编写ts
-
-.mpx文件中script标签声明lang为ts，在编译时会自动这部分script中的内容进行ts类型检查
-
-```html
-<script lang="ts">
-// 内联编写ts代码
-</script>
-```
-
-由于大部分IDE对ts的语法提示支持都只对.ts和.d.ts文件生效，上述在.mpx文件中编写ts代码虽然能在编译时进行ts类型检查，但是无法享受IDE中编写ts时的代码提示和实时报错等优秀体验，所以，我们更建议大家创建一个.ts文件进行ts代码编写，通过src的方式引入到.mpx当中
-
-```html
-<script lang="ts" src="./index.ts"></script>
-```
-
-### 为.ts文件添加loader
-
-在webpack配置中添加如下rules以配置ts-loader
-
-```js
-{
-  test: /\.ts$/,
-  use: [
-    'babel-loader',
-    'ts-loader'
-  ]
-}
-```
-
-### 编写tsconfig.json文件
-
-对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥mpx中强大的ts类型推导能力
-
-```json
-{
-  "compilerOptions": {
-    "target": "es6",
-    "allowJs": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "moduleResolution": "node",
-    "lib": [
-      "dom",
-      "es6",
-      "dom.iterable"
-    ]
-  }
-}
-```
-
-### 增强类型
-
-如果需要增加 Mpx 的属性和选项，可以自定义声明 TypeScript 补充现有的类型。
-
-例如，首先创建一个 types.d.ts 文件
-
-```ts
-// types.d.ts
-
-import { Mpx } from '@mpxjs/core'
-
-declare module '@mpxjs/core' {
-  // 声明为 Mpx 补充的属性
-  interface Mpx {
-    $myProperty: string
-  }
-}
-```
-
-之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用
-
-```ts
-// app.mpx
-
-/// <reference path="./types.d.ts" />
-import mpx from '@mpxjs/core'
-
-mpx.$myProperty = 'my-property'
-```
-
-## 类型推导及注意事项
-
-Mpx基于泛型函数提供了非常方便用户使用的反向类型推导能力，简单来说，就是用户可以用非常接近于js的方式调用Mpx提供的api，就能够获得大量基于用户输入参数反向推导得到的类型提示及检查。但是由于ts本身的能力限制，我们在mpx的运行时中添加了少量辅助函数和变种api，便于用户最大程度地享受反向类型推导带来的便利性，具体的注意事项和使用方法如下述demo
-
-```typescript
-import {createComponent, getMixin, createStoreWithThis} from '@mpxjs/core'
-
-// createStoreWithThis作为createStore的变种方法，主要变化在于定义getters，mutations和actions时，
-// 获取自身的state，getters等属性不再通过参数传入，而是通过this.state或者this.getters等属性进行访问，
-// 由于TS的能力限制，getters/mutations/actions只有使用对象字面量的方式直接传入createStoreWithThis时
-// 才能正确推导出this的类型，当需要将getters/mutations/actions拆解为对象编写时，
-// 需要用户显式地声明this类型，无法直接推导得出。
-
-const store = createStoreWithThis({
-  state: {
-    aa: 1,
-    bb: 2
-  },
-  getters: {
-    cc() {
-      return this.state.aa + this.state.bb
-    }
-  },
-  actions: {
-    doSth3() {
-      console.log(this.getters.cc)
-      return false
-    }
-  }
-})
-
-
-createComponent({
-  data: {
-    a: 1,
-    b: '2'
-  },
-  computed: {
-    c() {
-      return this.b
-    },
-    d() {
-      // data, mixin, computed中定义的数据能够被推导到this中
-      return this.a + this.aaa + this.c
-    },
-    // 从store上map过来的计算属性或者方法同样能够被推导到this中
-    ...store.mapState(['aa'])
-  },
-  mixins: [
-    // 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin
-    getMixin({
-      computed: {
-        aaa() {
-          return 123
-        }
-      },
-      methods: {
-        doSth() {
-          console.log(this.aaa)
-          return false
-        }
-      }
-    })
-  ],
-  methods: {
-    doSth2() {
-      this.a++
-      console.log(this.d)
-      console.log(this.aa)
-      this.doSth3()
-    },
-    ...store.mapActions(['doSth3'])
-  }
-})
-```
-
-更加具体的使用方法和实现原理我们会在后面的文档和文章中补充完整
-
-
diff --git a/docs/understanding/resource.md b/docs/understanding/resource.md
deleted file mode 100644
index 5e2a0d842f..0000000000
--- a/docs/understanding/resource.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# 图像资源处理
-
-小程序对于图片资源存在一些限制，使得习惯开发web应用的开发者面对小程序时无法理解差异性
-
-~~mpx提供了[@mpxjs/url-loader](/compilationEnhance/index.md#mpxjsurl-loader)对小程序中各种资源加载方式进行处理。~~ (该loader已被默认整合进 MpxWebpackPlugin.loader)
-
-本文会从使用的角度出发，介绍小程序既有的对图像资源的限制，以及 MpxWebpackPlugin.loader 是如何解决这些问题。
-
-----
-## 引用线上资源
-
-小程序原生支持在`wxss`和`wxml`中使用线上资源，这点和开发web应用没有太多区别。
-
-无需任何配置，就可以直接在`.mpx`中引用线上资源。
-
-**webpack.config.js**
-```js
-webpackconfig = {
-  // 不需要配置
-}
-```
-
-**index.mpx**
-```html
-<template>
-  <view>
-    <image src='http://my.cdn.com/bg2.png'/>
-    <view class="container"></view>
-  <view>
-</template>
-<style lang="css">
-  .container: {
-    background-image: url('http://my.cdn.com/bg1.png');
-  }
-</style>
-```
-
-----
-## 引用本地资源
-
-* 在`<style>`中使用本地资源
-
-  小程序不支持在`.wxss`的样式中使用本地资源，因此`@mpxjs/url-loader`会对`<style>`中的图片做强制base64
-
-  **index.mpx**
-  ```html
-  <style lang="css">
-    .container: {
-      background-image: url('./bg-img.png');
-    }
-  </style>
-  ```
-  > 编译后变成base64
-
-* `<image> / <cover-image>`组件src属性使用本地资源，@mpxjs/webpack-plugin提供了urlLoader来处理本地图片资源。
-  
-  **webpack.config.js**
-  ```js
-  webpackconfig = {
-    module: {
-      rules: [
-        {
-          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-          loader: MpxWebpackPlugin.urlLoader({
-            name: 'img/[name].[ext]'
-          })
-        }
-      ]
-    }
-  }
-  ```
-
-   **index.mpx**
-  ```html
-  <template>
-    <view>
-      <image src='./bg2.png'/>
-    <view>
-  </template>
-  ```
-
-## 动态引用本地资源
-利用`@mpxjs/url-loader`，配合mpx提供的`计算属性`，实现在运行阶段动态设置图片 
-
-**文件目录**
-  ```
-  component
-  │-- index.mpx 
-  │-- dark.png    
-  │-- light.png    
-  ```
-
-**webpack.config.js**
-```js
-webpackconfig = {
-  module: {
-    rules: [
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: MpxWebpackPlugin.urlLoader({
-          name: 'img/[name].[ext]'
-        })
-      }
-    ]
-  }
-}
-```
-
-**index.mpx**
-```html
-<template>
-  <view>
-    <image src='{{dynamicSrc}}'/>
-    <view class="container" style='{{dynamicStyle}}'>i have a background image</view>
-    <button bindtap="clickHandler">click me to change</button>
-  </view>
-</template>
-
-<script>
-  import {createPage} from '@mpxjs/core'
-  // 如果是有限张图片
-  import dark from './dark.png'
-  import light from './light.png'
-
-  createPage({
-    data: {
-      count: 0,
-      imageId: '1'
-    },
-    computed: {
-      dynamicSrc() {
-        return (this.count % 2 === 0) ? dark : light
-      },
-      dynamicStyle() {
-        let url = (this.count % 2 !== 0) ? dark : light
-        return `background-image: url(${url})`
-      },
-      background () {
-        // 如果期望整个bgs文件夹里的图片都被纳入
-        return require('./bgs/' + this.imageId + '.jpg')
-      }
-    },
-    methods: {
-      clickHandler() {
-        this.count++
-      }
-    }
-  })
-</script>
-
-<style lang="stylus">
-  .container
-    height: 150px
-  </style>
-```
-
-> 通过点击button，两个元素的图片会动态变化 
diff --git a/docs/understanding/understanding.md b/docs/understanding/understanding.md
deleted file mode 100644
index c3705f8c39..0000000000
--- a/docs/understanding/understanding.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# mpx运行机制
-
-下面我们分别从运行时和编译两个方面介绍mpx的实现机制
-
-## 数据响应与性能优化
-数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式
-
-作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：
-1. 尽可能减少setData调用的频次
-2. 尽可能减少单次setData传输的数据
-
-为了实现以上两个优化方向，我们做了以下几项工作：
-* 将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；
-* 将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。
-
-![Mpx数据响应机制流程示意图](https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg)
-
-*Mpx数据响应机制流程示意图*
-
-## 编译构建
-我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：
-1. src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；
-2. 对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。
-
-最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。
- 
-![Mpx编译构建机制流程示意图](https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg)
-
-*Mpx编译构建机制流程示意图*
-
-### 分包处理细节
-
-构建时对于非JS资源，是所有的包串行处理，资源map会精确记录每个包中引用了哪些资源。
-
-在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。
-
-由于主包和分包限制相同，一般情况下分包体积远小于主包体积
-，而微信小程序的体积限制策略主要卡主包体积不得超过2M，因此，Mpx设定的是主包体积优先策略，即尽可能减小主包体积，为此，会将分包资源尽可能打到分包去。
-
-组件和静态资源的输出规则如下：
-
-1. 主包引用的资源输出至主包
-2. 分包引用且主包引用过的资源输出至主包，不在当前分包重复输出
-3. 分包引用且无其他包引用的资源输出至当前分包
-4. 分包引用且其他分包也引用过的资源，重复输出至当前分包
-5. 当用户通过packageName query显式指定了资源的所属包时，输出至指定的包
-
-如此复杂的分包策略也完全是为了尽可能良好地支持处理分包引用npm资源，因此不管在主包还是分包中，使用Mpx框架开发小程序，可以享受最舒适最自然最好用的npm机制。
-
-而小程序原生的分包是不具备这个能力，只能引用自己分包下的资源，同时大部分基于web技术而来的转译型框架应该也都是不会考虑这个部分的。
-
-甚至如果出现这种场景：同一个组件在A分包和B分包中都有使用，但未在主包使用，会将这个组件分别放入A分包和B分包而不是主包。（是否需要这样可自行斟酌，如果不希望出现这种情况，可在主包中引入一次该组件就会被收到主包去，全局就这一份了）
-
-总结一下：
-
-对于组件，若同时被多个分包引用，主包未引用，会有多份分包存在于各分包中。一旦被主包使用，就仅有一份存在于主包中。
-
-对于资源（例如纯JS模块），若被主包使用，会被收集到主包里。若被多个分包使用，会被收集进主包的bundle里。若仅被某分包使用，就会在分包的bundle.js里（视模块大小及引用次数也可能被内联到某个组件JS里）。
-
-进阶用户有更花式的需求可通过packageName query来显示指定输出。
diff --git a/lerna.json b/lerna.json
index edc1456c92..c52f6f75d0 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,3 +1,3 @@
 {
-  "version": "2.9.70"
+  "version": "2.9.71"
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index d57ad55a53..4ac0b77d83 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
     "lint:js": "eslint --ext .js packages/",
     "test": "jest",
     "release": "npm run lint && npm run test && npx lerna version",
-    "docs:dev": "vuepress dev docs-vuepress",
-    "docs:build": "vuepress build docs-vuepress",
+    "docs:dev": "vitepress dev docs-vitepress",
+    "docs:build": "vitepress build docs-vitepress",
+    "docs:preview": "vitepress preview docs-vitepress",
     "tsc:build": "npm --workspace=./packages/webpack-plugin run build"
   },
   "devDependencies": {
@@ -23,8 +24,7 @@
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.2.0",
-    "@vuepress/plugin-back-to-top": "^1.8.2",
-    "@vuepress/plugin-pwa": "^1.8.0",
+    "@vite-pwa/vitepress": "^0.5.3",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-html": "^6.2.0",
@@ -36,10 +36,12 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.0",
     "lerna": "^8.1.8",
+    "stylus": "^0.63.0",
     "typescript": "^4.1.3",
-    "vuepress": "^1.9.7"
+    "vitepress": "^1.5.0"
   },
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "docs-vitepress"
   ]
 }
diff --git a/packages/api-proxy/package.json b/packages/api-proxy/package.json
index 780291bace..70011a35e0 100644
--- a/packages/api-proxy/package.json
+++ b/packages/api-proxy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.70",
+  "version": "2.9.71",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
diff --git a/packages/core/package.json b/packages/core/package.json
index 4c7dea508a..a600669839 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.70",
+  "version": "2.9.71",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
diff --git a/packages/core/src/convertor/wxToReact.js b/packages/core/src/convertor/wxToReact.js
index 34e59760e1..ec7476601c 100644
--- a/packages/core/src/convertor/wxToReact.js
+++ b/packages/core/src/convertor/wxToReact.js
@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter']
+const unsupported = ['moved', 'definitionFilter']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)
diff --git a/packages/core/src/platform/builtInMixins/index.js b/packages/core/src/platform/builtInMixins/index.js
index e8548f8c36..8ce7787817 100644
--- a/packages/core/src/platform/builtInMixins/index.js
+++ b/packages/core/src/platform/builtInMixins/index.js
@@ -22,7 +22,8 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
       directiveHelperMixin(),
       styleHelperMixin(),
       refsMixin(),
-      i18nMixin()
+      i18nMixin(),
+      relationsMixin(type)
     ]
   } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [
diff --git a/packages/core/src/platform/builtInMixins/relationsMixin.ios.js b/packages/core/src/platform/builtInMixins/relationsMixin.ios.js
new file mode 100644
index 0000000000..be8dc5b06b
--- /dev/null
+++ b/packages/core/src/platform/builtInMixins/relationsMixin.ios.js
@@ -0,0 +1,67 @@
+import { BEFORECREATE, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
+
+const relationTypeMap = {
+  parent: 'child',
+  ancestor: 'descendant'
+}
+
+export default function relationsMixin (mixinType) {
+  if (mixinType === 'component') {
+    return {
+      [BEFORECREATE] () {
+        this.__relationNodesMap = {}
+      },
+      [MOUNTED] () {
+        this.__mpxExecRelations('linked')
+      },
+      [BEFOREUNMOUNT] () {
+        this.__mpxExecRelations('unlinked')
+        this.__relationNodesMap = {}
+      },
+      methods: {
+        getRelationNodes (path) {
+          return this.__relationNodesMap[path] || null
+        },
+        __mpxExecRelations (type) {
+          const relations = this.__mpxProxy.options.relations
+          const relationContext = this.__relation
+          const currentPath = this.__componentPath
+          if (relations && relationContext) {
+            Object.keys(relations).forEach((path) => {
+              const relation = relations[path]
+              const relationType = relation.type
+              if ((relationType === 'parent' || relationType === 'ancestor') && relationContext[path]) {
+                const target = relationContext[path]
+                const targetRelation = target.__mpxProxy.options.relations?.[currentPath]
+                if (targetRelation && targetRelation.type === relationTypeMap[relationType] && target.__componentPath === path) {
+                  if (type === 'linked') {
+                    this.__mpxLinkRelationNodes(target, currentPath)
+                  } else if (type === 'unlinked') {
+                    this.__mpxRemoveRelationNodes(target, currentPath)
+                  }
+                  if (typeof targetRelation[type] === 'function') {
+                    targetRelation[type].call(target, this)
+                  }
+                  if (typeof relation[type] === 'function') {
+                    relation[type].call(this, target)
+                  }
+                  this.__relationNodesMap[path] = [target]
+                }
+              }
+            })
+          }
+        },
+        __mpxLinkRelationNodes (target, path) {
+          target.__relationNodesMap[path] = target.__relationNodesMap[path] || [] // 父级绑定子级
+          target.__relationNodesMap[path].push(this)
+        },
+        __mpxRemoveRelationNodes (target, path) {
+          const relationNodesMap = target.__relationNodesMap
+          const arr = relationNodesMap[path] || []
+          const index = arr.indexOf(this)
+          if (index !== -1) arr.splice(index, 1)
+        }
+      }
+    }
+  }
+}
diff --git a/packages/core/src/platform/env/index.ios.js b/packages/core/src/platform/env/index.ios.js
index f18fcbcf4c..971121dd81 100644
--- a/packages/core/src/platform/env/index.ios.js
+++ b/packages/core/src/platform/env/index.ios.js
@@ -1,3 +1,4 @@
+import { isFunction, isNumber, isString } from '@mpxjs/utils'
 import { createI18n } from '../builtInMixins/i18nMixin'
 
 export function init (Mpx) {
@@ -30,21 +31,30 @@ function initGlobalErrorHandling () {
     })
   }
 
+  function onUnhandledRejection (event) {
+    if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+      global.__mpxAppCbs.rejection.forEach((cb) => {
+        cb(event)
+      })
+    } else {
+      console.warn(`UNHANDLED PROMISE REJECTION ${(isNumber(event.id) || isString(event.id)) ? '(id:' + event.id + ')' : ''}: ${event.reason}\n`)
+    }
+  }
   const rejectionTrackingOptions = {
     allRejections: true,
     onUnhandled (id, error) {
-      if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
-        global.__mpxAppCbs.rejection.forEach((cb) => {
-          cb(error, id)
-        })
-      } else {
-        console.warn(`UNHANDLED PROMISE REJECTION (id: ${id}): ${error}\n`)
-      }
+      onUnhandledRejection({ id, reason: error, promise: null })
     }
   }
 
-  if (global?.HermesInternal?.hasPromise?.()) {
-    global.HermesInternal?.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
+  // 支持 core-js promise polyfill
+  const oldOnUnhandledRejection = global.onunhandledrejection
+  global.onunhandledrejection = function onunhandledrejection (event) {
+    onUnhandledRejection(event)
+    isFunction(oldOnUnhandledRejection) && oldOnUnhandledRejection.call(this, event)
+  }
+  if (global.HermesInternal?.hasPromise?.()) {
+    global.HermesInternal.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
   } else {
     require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
   }
diff --git a/packages/core/src/platform/env/index.web.js b/packages/core/src/platform/env/index.web.js
index 58dccf2d03..39794f020e 100644
--- a/packages/core/src/platform/env/index.web.js
+++ b/packages/core/src/platform/env/index.web.js
@@ -38,7 +38,7 @@ function initGlobalErrorHandling () {
     window.addEventListener('unhandledrejection', (event) => {
       if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
         global.__mpxAppCbs.rejection.forEach((cb) => {
-          cb(event.reason, event.promise)
+          cb(event)
         })
       } else {
         console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}\n`)
diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index c98e3ea19b..86ad50d04b 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement, createContext } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
@@ -193,7 +193,7 @@ const instanceProto = {
   }
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation }) {
   const instance = Object.create(instanceProto, {
     dataset: {
       get () {
@@ -247,6 +247,24 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     }
   })
 
+  if (type === 'component') {
+    Object.defineProperty(instance, '__componentPath', {
+      get () {
+        return currentInject.componentPath || ''
+      },
+      enumerable: false
+    })
+  }
+
+  if (relation) {
+    Object.defineProperty(instance, '__relation', {
+      get () {
+        return relation
+      },
+      enumerable: false
+    })
+  }
+
   // bind this & assign methods
   if (rawOptions.methods) {
     Object.entries(rawOptions.methods).forEach(([key, method]) => {
@@ -374,21 +392,58 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
+const RelationsContext = createContext(null)
+
+const checkRelation = (options) => {
+  const relations = options.relations || {}
+  let hasDescendantRelation = false
+  let hasAncestorRelation = false
+  Object.keys(relations).forEach((path) => {
+    const relation = relations[path]
+    const type = relation.type
+    if (['child', 'descendant'].includes(type)) {
+      hasDescendantRelation = true
+    } else if (['parent', 'ancestor'].includes(type)) {
+      hasAncestorRelation = true
+    }
+  })
+  return {
+    hasDescendantRelation,
+    hasAncestorRelation
+  }
+}
+
+const provideRelation = (instance, relation) => {
+  const componentPath = instance.__componentPath
+  if (relation) {
+    return Object.assign({}, relation, { [componentPath]: instance })
+  } else {
+    return {
+      [componentPath]: instance
+    }
+  }
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
+  const { hasDescendantRelation, hasAncestorRelation } = checkRelation(rawOptions)
   if (rawOptions.methods) rawOptions.methods = wrapMethodsWithErrorHandling(rawOptions.methods)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
     const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
+    let relation = null
+    if (hasDescendantRelation || hasAncestorRelation) {
+      relation = useContext(RelationsContext)
+    }
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx, relation })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -473,15 +528,22 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       return proxy.finalMemoVersion
     }, [proxy.stateVersion, proxy.memoVersion])
 
-    const root = useMemo(() => proxy.effect.run(), [finalMemoVersion])
+    let root = useMemo(() => proxy.effect.run(), [finalMemoVersion])
     if (root && root.props.ishost) {
       // 对于组件未注册的属性继承到host节点上，如事件、样式和其他属性等
       const rootProps = getRootProps(props, validProps)
       rootProps.style = Object.assign({}, root.props.style, rootProps.style)
       // update root props
-      return cloneElement(root, rootProps)
+      root = cloneElement(root, rootProps)
     }
-    return root
+    return hasDescendantRelation
+      ? createElement(RelationsContext.Provider,
+          {
+            value: provideRelation(instance, relation)
+          },
+          root
+        )
+      : root
   }))
 
   if (rawOptions.options?.isCustomText) {
diff --git a/packages/fetch/package.json b/packages/fetch/package.json
index 9cccf50069..2c5a66fd54 100644
--- a/packages/fetch/package.json
+++ b/packages/fetch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/fetch",
-  "version": "2.9.70",
+  "version": "2.9.71",
   "description": "mpx fetch lib",
   "author": "donghongping",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@mpxjs/api-proxy": "^2.9.70",
+    "@mpxjs/api-proxy": "^2.9.71",
     "@mpxjs/utils": "^2.9.70",
     "path-to-regexp": "^6.2.0"
   },
diff --git a/packages/unocss-plugin/package.json b/packages/unocss-plugin/package.json
index 18dd7e550b..8d5051109e 100644
--- a/packages/unocss-plugin/package.json
+++ b/packages/unocss-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/unocss-plugin",
-  "version": "2.9.69",
+  "version": "2.9.71",
   "description": "mpx unocss webpack plugin",
   "main": "lib/index.js",
   "scripts": {
diff --git a/packages/webpack-plugin/lib/react/processScript.js b/packages/webpack-plugin/lib/react/processScript.js
index 7ad2a9913f..fe5b2e2ad3 100644
--- a/packages/webpack-plugin/lib/react/processScript.js
+++ b/packages/webpack-plugin/lib/react/processScript.js
@@ -9,6 +9,7 @@ module.exports = function (script, {
   moduleId,
   isProduction,
   jsonConfig,
+  outputPath,
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap
@@ -64,7 +65,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }
diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 5994b781eb..943aa0889b 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -88,7 +88,8 @@ function buildGlobalParams ({
   jsonConfig,
   componentsMap,
   pagesMap,
-  firstPage
+  firstPage,
+  outputPath
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -117,6 +118,9 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     content += `global.currentInject.getComponents = function () {
   return ${shallowStringify(componentsMap)}
 }\n`
+    if (ctorType === 'component') {
+      content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
+    }
   }
   content += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
   content += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
diff --git a/packages/webpack-plugin/lib/runtime/components/react/context.ts b/packages/webpack-plugin/lib/runtime/components/react/context.ts
index 39472e6744..2930ce52e8 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/context.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/context.ts
@@ -55,6 +55,8 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 
 export const RouteContext = createContext<number | null>(null)
 
+export const SwiperContext = createContext({})
+
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
 export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx
index 2c9771f001..161e3307ff 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx
@@ -1,8 +1,10 @@
-import { View, LayoutChangeEvent } from 'react-native'
-import { ReactNode, forwardRef, useRef } from 'react'
+import { View } from 'react-native'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { ReactNode, forwardRef, useRef, useContext } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
+import { SwiperContext } from './context'
 
 interface SwiperItemProps {
   'item-id'?: string;
@@ -14,15 +16,31 @@ interface SwiperItemProps {
   'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
+  customStyle: Object;
+  itemIndex: number;
+}
+
+interface ContextType {
+  offset: SharedValue<number>;
+  step: SharedValue<number>;
+  scale: boolean;
+  dir: string;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
   const {
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
-    style
+    style,
+    customStyle,
+    itemIndex
   } = props
 
+  const contextValue = useContext(SwiperContext) as ContextType
+  const offset = contextValue.offset || 0
+  const step = contextValue.step || 0
+  const scale = contextValue.scale || false
+  const dir = contextValue.dir || 'x'
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
 
@@ -47,19 +65,35 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
   const innerProps = useInnerProps(props, {
-    style: { ...innerStyle, ...layoutStyle },
     ref: nodeRef,
     ...layoutProps
   }, [
     'children',
-    'enable-offset'
+    'enable-offset',
+    'style'
   ], { layoutRef })
-
+  const itemAnimatedStyle = useAnimatedStyle(() => {
+    if (!step.value) return {}
+    const inputRange = [step.value, 0]
+    const outputRange = [0.7, 1]
+    // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+    const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value }
+    const transformStyle = []
+    if (scale) {
+      transformStyle.push({
+        scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+      })
+    }
+    return Object.assign(outerLayoutStyle, {
+      transform: transformStyle
+    })
+  })
   return (
-    <View
-      data-itemId={props['item-id']}
-      {...innerProps}>
-       {
+    <Animated.View
+      {...innerProps}
+      style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]}
+      data-itemId={props['item-id']}>
+      {
         wrapChildren(
           props,
           {
@@ -70,7 +104,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
           }
         )
       }
-    </View>
+    </Animated.View>
   )
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx
new file mode 100644
index 0000000000..081a2734da
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx
@@ -0,0 +1,742 @@
+import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
+
+import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
+import { SwiperContext } from './context'
+/**
+ * ✔ indicator-dots
+ * ✔ indicator-color
+ * ✔ indicator-active-color
+ * ✔ autoplay
+ * ✔ current
+ * ✔ interval
+ * ✔ duration
+ * ✔ circular
+ * ✔ vertical
+ * ✔ previous-margin
+ * ✔ next-margin
+ * ✔ easing-function  ="easeOutCubic"
+ * ✘ display-multiple-items
+ * ✘ snap-to-edge
+ */
+type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
+type StrAbsoType = 'absoluteX' | 'absoluteY'
+type EventDataType = {
+  translation: number
+}
+
+interface SwiperProps {
+  children?: ReactNode;
+  circular?: boolean;
+  current?: number;
+  interval?: number;
+  autoplay?: boolean;
+  // scrollView 只有安卓可以设
+  duration?: number;
+  // 滑动过程中元素是否scale变化
+  scale?: boolean;
+  'indicator-dots'?: boolean;
+  'indicator-color'?: string;
+  'indicator-active-color'?: string;
+  vertical?: boolean;
+  style: {
+    [key: string]: any
+  };
+  'easing-function'?: EaseType;
+  'previous-margin'?: string;
+  'next-margin'?: string;
+  'enable-offset'?: boolean;
+  'enable-var': boolean;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>;
+  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+
+/**
+ * 默认的Style类型
+ */
+const styles: { [key: string]: Object } = {
+  pagination_x: {
+    position: 'absolute',
+    bottom: 25,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pagination_y: {
+    position: 'absolute',
+    right: 15,
+    top: 0,
+    bottom: 0,
+    flexDirection: 'column',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pagerWrapperx: {
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pagerWrappery: {
+    position: 'absolute',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  swiper: {
+    overflow: 'scroll',
+    display: 'flex',
+    justifyContent: 'flex-start'
+  }
+}
+
+const dotCommonStyle = {
+  width: 8,
+  height: 8,
+  borderRadius: 4,
+  marginLeft: 3,
+  marginRight: 3,
+  marginTop: 3,
+  marginBottom: 3,
+  zIndex: 98
+}
+const activeDotStyle = {
+  zIndex: 99
+}
+const longPressRatio = 100
+
+const easeMap = {
+  default: Easing.linear,
+  linear: Easing.linear,
+  easeInCubic: Easing.in(Easing.cubic),
+  easeOutCubic: Easing.out(Easing.cubic),
+  easeInOutCubic: Easing.inOut(Easing.cubic)
+}
+
+const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
+  const {
+    'indicator-dots': showsPagination,
+    'indicator-color': dotColor = 'rgba(0, 0, 0, .3)',
+    'indicator-active-color': activeDotColor = '#000000',
+    'enable-var': enableVar = false,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    'external-var-context': externalVarContext,
+    style = {},
+    autoplay = false,
+    circular = false
+  } = props
+  const easeingFunc = props['easing-function'] || 'default'
+  const easeDuration = props.duration || 500
+  const horizontal = props.vertical !== undefined ? !props.vertical : true
+  const nodeRef = useRef<View>(null)
+  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {})
+  // 计算transfrom之类的
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) as number : 0
+  const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) as number : 0
+  const preMarginShared = useSharedValue(preMargin)
+  const nextMarginShared = useSharedValue(nextMargin)
+  const autoplayShared = useSharedValue(autoplay)
+  // 默认前后补位的元素个数
+  const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
+  const patchElmNumShared = useSharedValue(patchElmNum)
+  const circularShared = useSharedValue(circular)
+  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
+  // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
+  const childrenLength = useSharedValue(children.length)
+  const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width
+  const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height
+  const dir = horizontal === false ? 'y' : 'x'
+  const pstep = dir === 'x' ? initWidth : initHeight
+  const initStep: number = isNaN(pstep) ? 0 : pstep
+  // 每个元素的宽度 or 高度，有固定值直接初始化无则0
+  const step = useSharedValue(initStep)
+  // 记录选中元素的索引值
+  const currentIndex = useSharedValue(props.current || 0)
+  // const initOffset = getOffset(props.current || 0, initStep)
+  // 记录元素的偏移量
+  const offset = useSharedValue(getOffset(props.current || 0, initStep))
+  const strAbso = 'absolute' + dir.toUpperCase() as StrAbsoType
+  // 标识手指触摸和抬起, 起点在onBegin
+  const touchfinish = useSharedValue(true)
+  // 记录上一帧的绝对定位坐标
+  const preAbsolutePos = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesUp 时移动的距离
+  const moveTranstion = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesUp 的时间
+  const moveTime = useSharedValue(0)
+  const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
+  const intervalTimer = props.interval || 500
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout })
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef
+  }, [
+    'style',
+    'indicator-dots',
+    'indicator-color',
+    'indicator-active-color',
+    'previous-margin',
+    'vertical',
+    'previous-margin',
+    'next-margin',
+    'easing-function',
+    'autoplay',
+    'circular',
+    'interval',
+    'easing-function'
+  ], { layoutRef: layoutRef })
+
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    const { width, height } = e.nativeEvent.layout
+    const realWidth = dir === 'x' ? width - preMargin - nextMargin : width
+    const realHeight = dir === 'y' ? height - preMargin - nextMargin : height
+    const iStep = dir === 'x' ? realWidth : realHeight
+    if (iStep !== step.value) {
+      step.value = iStep
+      updateCurrent(props.current || 0, iStep)
+      updateAutoplay()
+    }
+  }
+
+  const dotAnimatedStyle = useAnimatedStyle(() => {
+    if (!step.value) return {}
+    const dotStep = dotCommonStyle.width + dotCommonStyle.marginRight + dotCommonStyle.marginLeft
+    if (dir === 'x') {
+      return { transform: [{ translateX: currentIndex.value * dotStep }] }
+    } else {
+      return { transform: [{ translateY: currentIndex.value * dotStep }] }
+    }
+  })
+
+  function renderPagination () {
+    if (children.length <= 1) return null
+    const activeColor = activeDotColor || '#007aff'
+    const unActionColor = dotColor || 'rgba(0,0,0,.2)'
+    // 正常渲染所有dots
+    const dots: Array<ReactNode> = []
+    for (let i = 0; i < children.length; i++) {
+      dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>)
+    }
+    return (
+      <View pointerEvents="none" style = {styles['pagination_' + dir]}>
+        <View style = {[styles['pagerWrapper' + dir]]}>
+          <Animated.View style={[
+            dotCommonStyle,
+            activeDotStyle,
+            {
+              backgroundColor: activeColor,
+              position: 'absolute',
+              left: 0,
+              top: 0
+            },
+            dotAnimatedStyle
+          ]}
+          />
+          {dots}
+      </View>
+    </View>)
+  }
+
+  function renderItems () {
+    const intLen = children.length
+    let renderChild = children.slice()
+    if (circular && intLen > 1) {
+      // 最前面加最后一个元素
+      const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+      // 最后面加第一个元素
+      const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+      if (preMargin) {
+        const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+        const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+        renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+      } else {
+        renderChild = [lastChild].concat(renderChild).concat([firstChild])
+      }
+    }
+    const arrChildren = renderChild.map((child, index) => {
+      const extraStyle = {} as { [key: string]: any }
+      if (index === 0 && !circular) {
+        preMargin && dir === 'x' && (extraStyle.marginLeft = preMargin)
+        preMargin && dir === 'y' && (extraStyle.marginTop = preMargin)
+      }
+      if (index === intLen - 1 && !circular) {
+        nextMargin && dir === 'x' && (extraStyle.marginRight = nextMargin)
+        nextMargin && dir === 'y' && (extraStyle.marginBottom = nextMargin)
+      }
+      // 业务swiper-item自己生成key，内部添加的元素自定义key
+      const newChild = React.cloneElement(child, {
+        itemIndex: index,
+        customStyle: extraStyle
+      })
+      return newChild
+    })
+    const contextValue = {
+      offset,
+      step,
+      scale: props.scale,
+      dir
+    }
+    return (<SwiperContext.Provider value={contextValue}>{arrChildren}</SwiperContext.Provider>)
+  }
+
+  const { loop, pauseLoop, resumeLoop } = useMemo(() => {
+    function createAutoPlay () {
+      if (!step.value) return
+      let targetOffset = 0
+      let nextIndex = currentIndex.value
+      if (!circularShared.value) {
+        // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
+        if (currentIndex.value === childrenLength.value - 1) {
+          pauseLoop()
+          return
+        }
+        nextIndex += 1
+        // targetOffset = -nextIndex * step.value - preMarginShared.value
+        targetOffset = -nextIndex * step.value
+        offset.value = withTiming(targetOffset, {
+          duration: easeDuration,
+          easing: easeMap[easeingFunc]
+        }, () => {
+          currentIndex.value = nextIndex
+          runOnJS(loop)()
+        })
+      } else {
+        // 默认向右, 向下
+        if (nextIndex === childrenLength.value - 1) {
+          nextIndex = 0
+          targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
+          // 执行动画到下一帧
+          offset.value = withTiming(targetOffset, {
+            duration: easeDuration
+          }, () => {
+            const initOffset = -step.value * patchElmNumShared.value + preMarginShared.value
+            // 将开始位置设置为真正的位置
+            offset.value = initOffset
+            currentIndex.value = nextIndex
+            runOnJS(loop)()
+          })
+        } else {
+          nextIndex = currentIndex.value + 1
+          targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
+          // 执行动画到下一帧
+          offset.value = withTiming(targetOffset, {
+            duration: easeDuration,
+            easing: easeMap[easeingFunc]
+          }, () => {
+            currentIndex.value = nextIndex
+            runOnJS(loop)()
+          })
+        }
+      }
+    }
+
+    // loop在JS线程中调用，createAutoPlay + useEffect中
+    function loop () {
+      timerId.current && clearTimeout(timerId.current)
+      timerId.current = setTimeout(createAutoPlay, intervalTimer)
+    }
+
+    function pauseLoop () {
+      timerId.current && clearTimeout(timerId.current)
+    }
+    // resumeLoop在worklet中调用
+    function resumeLoop () {
+      if (autoplayShared.value && childrenLength.value > 1) {
+        loop()
+      }
+    }
+    return {
+      loop,
+      pauseLoop,
+      resumeLoop
+    }
+  }, [])
+
+  function handleSwiperChange (current: number) {
+    if (props.current !== currentIndex.value) {
+      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+      props.bindchange && props.bindchange(eventData)
+    }
+  }
+
+  function getOffset (index:number, stepValue: number) {
+    if (!stepValue) return 0
+    let targetOffset = 0
+    if (circular && children.length > 1) {
+      const targetIndex = index + patchElmNum
+      targetOffset = -(stepValue * targetIndex - preMargin)
+    } else {
+      targetOffset = -index * stepValue
+    }
+    return targetOffset
+  }
+
+  function updateCurrent (index:number, stepValue: number) {
+    const targetOffset = getOffset(index || 0, stepValue)
+    if (targetOffset !== offset.value) {
+      // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
+      if (props.current !== undefined && props.current !== currentIndex.value) {
+        offset.value = withTiming(targetOffset, {
+          duration: easeDuration,
+          easing: easeMap[easeingFunc]
+        }, () => {
+          currentIndex.value = props.current || 0
+        })
+      } else {
+        offset.value = targetOffset
+      }
+    }
+  }
+  function updateAutoplay () {
+    if (autoplay && children.length > 1) {
+      loop()
+    } else {
+      pauseLoop()
+    }
+  }
+  // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
+  useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
+    // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
+    if (newIndex !== preIndex && props.bindchange) {
+      runOnJS(handleSwiperChange)(newIndex)
+    }
+  })
+
+  useEffect(() => {
+    let patchStep = 0
+    if (preMargin !== preMarginShared.value) {
+      patchStep += preMargin - preMarginShared.value
+    }
+    if (nextMargin !== nextMarginShared.value) {
+      patchStep += nextMargin - nextMarginShared.value
+    }
+    preMarginShared.value = preMargin
+    nextMarginShared.value = nextMargin
+    const newStep = step.value - patchStep
+    if (step.value !== newStep) {
+      step.value = newStep
+      offset.value = getOffset(currentIndex.value, newStep)
+    }
+  }, [preMargin, nextMargin])
+
+  useEffect(() => {
+    childrenLength.value = children.length
+    if (children.length - 1 < currentIndex.value) {
+      pauseLoop()
+      currentIndex.value = 0
+      offset.value = getOffset(0, step.value)
+      if (autoplay && children.length > 1) {
+        loop()
+      }
+    }
+  }, [children.length])
+
+  useEffect(() => {
+    updateCurrent(props.current || 0, step.value)
+  }, [props.current])
+
+  useEffect(() => {
+    autoplayShared.value = autoplay
+    updateAutoplay()
+    return () => {
+      if (autoplay) {
+        pauseLoop()
+      }
+    }
+  }, [autoplay])
+
+  useEffect(() => {
+    if (circular !== circularShared.value) {
+      circularShared.value = circular
+      patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0
+      offset.value = getOffset(currentIndex.value, step.value)
+    }
+  }, [circular, preMargin])
+
+  const { gestureHandler } = useMemo(() => {
+    function getTargetPosition (eventData: EventDataType) {
+      'worklet'
+      // 移动的距离
+      const { translation } = eventData
+      let resetOffsetPos = 0
+      let selectedIndex = currentIndex.value
+      // 是否临界点
+      let isCriticalItem = false
+      // 真实滚动到的偏移量坐标
+      let moveToTargetPos = 0
+      const currentOffset = translation < 0 ? offset.value - preMarginShared.value : offset.value + preMarginShared.value
+      const computedIndex = Math.abs(currentOffset) / step.value
+      const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
+      // 实际应该定位的索引值
+      if (!circularShared.value) {
+        selectedIndex = moveToIndex
+        moveToTargetPos = selectedIndex * step.value
+      } else {
+        if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
+          selectedIndex = moveToIndex - (childrenLength.value + patchElmNumShared.value)
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
+          isCriticalItem = true
+        } else if (moveToIndex <= patchElmNumShared.value - 1) {
+          selectedIndex = moveToIndex === 0 ? childrenLength.value - patchElmNumShared.value : childrenLength.value - 1
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
+          isCriticalItem = true
+        } else {
+          selectedIndex = moveToIndex - patchElmNumShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
+        }
+      }
+      return {
+        selectedIndex,
+        isCriticalItem,
+        resetOffset: -resetOffsetPos,
+        targetOffset: -moveToTargetPos
+      }
+    }
+    function canMove (eventData: EventDataType) {
+      'worklet'
+      const { translation } = eventData
+      const currentOffset = Math.abs(offset.value)
+      if (!circularShared.value) {
+        if (translation < 0) {
+          return currentOffset < step.value * (childrenLength.value - 1)
+        } else {
+          return currentOffset > 0
+        }
+      } else {
+        return true
+      }
+    }
+    function handleEnd (eventData: EventDataType) {
+      'worklet'
+      const { isCriticalItem, targetOffset, resetOffset, selectedIndex } = getTargetPosition(eventData)
+      if (isCriticalItem) {
+        offset.value = withTiming(targetOffset, {
+          duration: easeDuration,
+          easing: easeMap[easeingFunc]
+        }, () => {
+          if (touchfinish.value !== false) {
+            currentIndex.value = selectedIndex
+            offset.value = resetOffset
+            runOnJS(resumeLoop)()
+          }
+        })
+      } else {
+        offset.value = withTiming(targetOffset, {
+          duration: easeDuration,
+          easing: easeMap[easeingFunc]
+        }, () => {
+          if (touchfinish.value !== false) {
+            currentIndex.value = selectedIndex
+            runOnJS(resumeLoop)()
+          }
+        })
+      }
+    }
+    function handleBack (eventData: EventDataType) {
+      'worklet'
+      const { translation } = eventData
+      // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
+      let currentOffset = Math.abs(offset.value)
+      if (circularShared.value) {
+        currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value
+      }
+      const curIndex = currentOffset / step.value
+      const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value
+      const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0)
+      offset.value = withTiming(targetOffset, {
+        duration: easeDuration,
+        easing: easeMap[easeingFunc]
+      }, () => {
+        if (touchfinish.value !== false) {
+          currentIndex.value = moveToIndex
+          runOnJS(resumeLoop)()
+        }
+      })
+    }
+    function handleLongPress () {
+      'worklet'
+      const currentOffset = Math.abs(offset.value)
+      let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
+      if (circularShared.value) {
+        preOffset -= preMarginShared.value
+      }
+      // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
+      const diffOffset = preOffset - currentOffset
+      const half = Math.abs(diffOffset) > step.value / 2
+      if (+diffOffset === 0) {
+        runOnJS(resumeLoop)()
+      } else if (half) {
+        handleEnd({ translation: diffOffset })
+      } else {
+        handleBack({ translation: diffOffset })
+      }
+    }
+    function reachBoundary (eventData: EventDataType) {
+      'worklet'
+      // 移动的距离
+      const { translation } = eventData
+      const elementsLength = step.value * childrenLength.value
+      let isBoundary = false
+      let resetOffset = 0
+      // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
+      const currentOffset = offset.value
+      const moveStep = Math.ceil(translation / elementsLength)
+      if (translation < 0) {
+        const posEnd = (childrenLength.value + patchElmNumShared.value + 1) * step.value
+        const posReverseEnd = (patchElmNumShared.value - 1) * step.value
+        if (currentOffset < -posEnd + step.value) {
+          isBoundary = true
+          resetOffset = Math.abs(moveStep) === 0 ? patchElmNumShared.value * step.value + translation : moveStep * elementsLength
+        }
+        if (currentOffset > -posReverseEnd) {
+          isBoundary = true
+          resetOffset = moveStep * elementsLength
+        }
+      } else if (translation > 0) {
+        const posEnd = (patchElmNumShared.value - 1) * step.value
+        const posReverseEnd = (patchElmNumShared.value + childrenLength.value) * step.value
+        if (currentOffset > -posEnd) {
+          isBoundary = true
+          resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0)
+        }
+        if (currentOffset < -posReverseEnd) {
+          isBoundary = true
+          resetOffset = moveStep * elementsLength + patchElmNumShared.value * step.value
+        }
+      }
+      return {
+        isBoundary,
+        resetOffset: -resetOffset
+      }
+    }
+    const gesturePan = Gesture.Pan()
+      .onBegin((e) => {
+        'worklet'
+        if (!step.value) return
+        touchfinish.value = false
+        cancelAnimation(offset)
+        runOnJS(pauseLoop)()
+        preAbsolutePos.value = e[strAbso]
+        moveTranstion.value = e[strAbso]
+        moveTime.value = new Date().getTime()
+      })
+      .onTouchesMove((e) => {
+        'worklet'
+        if (touchfinish.value) return
+        const touchEventData = e.changedTouches[0]
+        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const eventData = {
+          translation: moveDistance
+        }
+        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        if (!circularShared.value && !canMove(eventData)) {
+          return
+        }
+        const { isBoundary, resetOffset } = reachBoundary(eventData)
+        if (isBoundary && circularShared.value) {
+          offset.value = resetOffset
+        } else {
+          offset.value = moveDistance + offset.value
+        }
+        preAbsolutePos.value = touchEventData[strAbso]
+      })
+      .onTouchesUp((e) => {
+        'worklet'
+        if (touchfinish.value) return
+        const touchEventData = e.changedTouches[0]
+        const moveDistance = touchEventData[strAbso] - moveTranstion.value
+        touchfinish.value = true
+        const eventData = {
+          translation: moveDistance
+        }
+        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+        if (!circularShared.value && !canMove(eventData)) {
+          return
+        }
+        const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
+        if (Math.abs(strVelocity) < longPressRatio) {
+          handleLongPress()
+        } else {
+          handleEnd(eventData)
+        }
+      })
+    return {
+      gestureHandler: gesturePan
+    }
+  }, [])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    if (dir === 'x') {
+      return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 }
+    } else {
+      return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 }
+    }
+  })
+
+  function renderSwiper () {
+    const arrPages: Array<ReactNode> | ReactNode = renderItems()
+    return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
+        <Animated.View style={[{
+          flexDirection: dir === 'x' ? 'row' : 'column',
+          width: '100%',
+          height: '100%'
+        }, animatedStyles]}>
+          {wrapChildren({
+            children: arrPages
+          }, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          })}
+        </Animated.View>
+        {showsPagination && renderPagination()}
+    </View>)
+  }
+
+  if (children.length === 1) {
+    return renderSwiper()
+  } else {
+    return (<GestureDetector gesture={gestureHandler}>
+      {renderSwiper()}
+    </GestureDetector>)
+  }
+})
+SwiperWrapper.displayName = 'MpxSwiperWrapper'
+
+export default SwiperWrapper
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx
deleted file mode 100644
index 6d00d236b6..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/carouse.tsx
+++ /dev/null
@@ -1,527 +0,0 @@
-/**
- * swiper 实现
- */
-import { Animated, View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, NativeScrollPoint, Platform, LayoutChangeEvent } from 'react-native'
-import { JSX, forwardRef, useState, useRef, useEffect, ReactNode } from 'react'
-import { CarouseProps, CarouseState } from './type'
-import { getCustomEvent } from '../getInnerListeners'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from '../utils'
-
-/**
- * 默认的Style类型
- */
-const styles: { [key: string]: Object } = {
-  slide: {
-    backgroundColor: 'transparent'
-  },
-  container_x: {
-    position: 'relative'
-  },
-  container_y: {
-    position: 'relative'
-  },
-  pagination_x: {
-    position: 'absolute',
-    bottom: 25,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-
-  pagination_y: {
-    position: 'absolute',
-    right: 15,
-    top: 0,
-    bottom: 0,
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-}
-
-const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, CarouseProps>((props, ref): JSX.Element => {
-  // 默认取水平方向的width
-  const { width } = Dimensions.get('window')
-  const {
-    style,
-    previousMargin = 0,
-    nextMargin = 0,
-    enableVar,
-    externalVarContext,
-    parentFontSize,
-    parentWidth,
-    parentHeight
-  } = props
-  // 计算transform之类的
-  const {
-    normalStyle,
-    hasVarDec,
-    varContextRef,
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, {
-    enableVar,
-    externalVarContext,
-    parentFontSize,
-    parentWidth,
-    parentHeight
-  })
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
-  const { textProps } = splitProps(props)
-  const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children
-  const totalElements = Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0)
-  const defaultHeight = (normalStyle?.height || 150)
-  const defaultWidth = (normalStyle?.width || width || 375)
-  const dir = props.horizontal === false ? 'y' : 'x'
-  // state的offset默认值
-  // const initIndex = props.circular ? props.current + 1: (props.current || 0)
-  // 记录真正的下标索引, 不包括循环前后加入的索引, 游标
-  const initIndex = props.current || 0
-  // 这里要排除超过元素个数的设置
-  const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
-  const defaultX = (defaultWidth * initOffsetIndex) || 0
-  const defaultY = (defaultHeight * initOffsetIndex) || 0
-  // 主动scorllTo时是否要出发onScrollEnd
-  const needTriggerScrollEnd = useRef(true)
-  // 内部存储上一次的offset值
-  const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  const scrollViewRef = useRef<ScrollView & View>(null)
-  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {
-    style: normalStyle
-  })
-  const {
-    // 存储layout布局信息
-    layoutRef,
-    layoutProps,
-    layoutStyle
-  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout })
-  // 内部存储上一次的偏移量
-  const internalsRef = useRef({
-    offset: {
-      x: 0,
-      y: 0
-    },
-    isScrolling: false
-  })
-  const isDragRef = useRef(false)
-  const [state, setState] = useState({
-    width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
-    height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
-    // 真正的游标索引, 从0开始
-    index: initIndex,
-    total: totalElements,
-    offset: {
-      x: 0,
-      y: 0
-    },
-    dir
-  } as CarouseState)
-  /**
-   * @desc: 开启下一次自动轮播
-  */
-  function createAutoPlay () {
-    autoplayTimerRef.current && clearTimeout(autoplayTimerRef.current)
-    autoplayTimerRef.current = setTimeout(() => {
-      startAutoPlay()
-    }, props.interval || 500)
-  }
-
-  useEffect(() => {
-    // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-    if (props.autoplay) {
-      createAutoPlay()
-    }
-  }, [props.autoplay, props.current, state.index, state.width, state.height])
-
-  useEffect(() => {
-    // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-    if (!props.autoplay && props.current !== undefined && props.current !== state.index) {
-      const initIndex = props.current || 0
-      // 这里要排除超过元素个数的设置
-      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
-      // 1. 安卓需要主动更新下内部状态, 2. IOS不能触发完wcrollTo之后立即updateState, 会造成滑动两次
-      // 2. setTimeout 是fix 当再渲染过程中触发scrollTo失败的问题
-      if (Platform.OS === 'ios') {
-        needTriggerScrollEnd.current = false
-        setTimeout(() => {
-          scrollViewRef.current?.scrollTo({
-            ...nextOffset,
-            animated: true
-          })
-        }, 50)
-      } else {
-        updateState(nextIndex, nextOffset)
-      }
-    }
-  }, [props.current, state.width, state.height])
-
-  function getMultiNextConfig (target: number) {
-    const step = state.dir === 'x' ? state.width : state.height
-    const targetPos = step * props.current
-    const targetOffset = {
-      x: dir === 'x' ? targetPos : 0,
-      y: dir === 'y' ? targetPos : 0
-    }
-    return {
-      nextIndex: target,
-      nextOffset: targetOffset
-    }
-  }
-  /**
-   * @desc: 更新状态: index和offset, 并响应索引变化的事件
-   * scrollViewOffset: 移动到的目标位置
-  */
-  function updateIndex (scrollViewOffset: NativeScrollPoint, useIndex = false) {
-    const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset)
-    updateState(nextIndex, nextOffset)
-    // 更新完状态之后, 开启新的loop
-  }
-
-  /**
-   * 更新索引状态
-  */
-  function updateState (index: number, offset: { x: number, y: number}) {
-    internalsRef.current.offset = offset
-    setState((preState) => {
-      const newState = {
-        ...preState,
-        index: index,
-        // offset用来指示当前scrollView的偏移量
-        offset: offset
-      }
-      return newState
-    })
-    internalsRef.current.isScrolling = false
-    // getCustomEvent
-    const eventData = getCustomEvent('change', {}, { detail: { current: index, source: 'touch' }, layoutRef: layoutRef })
-    props.bindchange && props.bindchange(eventData)
-  }
-
-  /**
-   * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
-   * @desc: 包括正循环、反向循环、不循环
-   * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset,
-   * 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
-  */
-  function getNextConfig (scrollViewOffset: NativeScrollPoint) {
-    const step = state.dir === 'x' ? state.width : state.height
-    const currentOffset = state.offset
-    let nextIndex = state.index + 1
-    let nextOffset = currentOffset
-    // autoMoveOffset scrollView 滚动到前后增加的位置
-    let autoMoveOffset = currentOffset
-    let isBack = false
-    let isAutoEnd = false
-    // 如果是循环反向的
-    if (scrollViewOffset?.[state.dir] < currentOffset[state.dir]) {
-      isBack = true
-      nextIndex = isBack ? nextIndex - 2 : nextIndex
-    }
-    if (!props.circular) {
-      nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex })
-    } else {
-      if (isBack) {
-        if (nextIndex < 0) {
-          // 反向: scollView 滚动到虚拟的位置
-          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 })
-          nextIndex = state.total - 1
-          // 反向: 数组最后一个index
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total })
-          isAutoEnd = true
-        } else {
-          // 反向非最后一个
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step })
-        }
-      } else {
-        if (nextIndex > state.total - 1) {
-          autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) })
-          nextIndex = 0
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: step })
-          isAutoEnd = true
-        } else {
-          // nextIndex =  nextIndex,
-          nextOffset = Object.assign({}, currentOffset, { [state.dir]: (nextIndex + 1) * step })
-        }
-      }
-    }
-    return {
-      // 下一个要滚动到的实际元素的索引
-      nextIndex,
-      // 下一个要滚动到实际元素的offset
-      nextOffset,
-      // scrollTo一个位置的坐标, 虚拟元素的位置
-      autoMoveOffset,
-      isAutoEnd
-    }
-  }
-
-  /**
-   * @desc: 开启自动轮播
-  */
-  function startAutoPlay () {
-    if (state.width && isNaN(+state.width)) {
-      createAutoPlay()
-      return
-    }
-    if (!Array.isArray(props.children)) {
-      return
-    }
-    const step = state.dir === 'x' ? state.width : state.height
-    const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset)
-    // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
-    if (Platform.OS === 'ios') {
-      if (!isAutoEnd) {
-        scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
-      } else {
-        if (state.dir === 'x') {
-          scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.x, animated: true })
-        } else {
-          scrollViewRef.current?.scrollTo({ x: autoMoveOffset.y, y: autoMoveOffset.y, animated: true })
-        }
-      }
-    } else {
-      if (!isAutoEnd) {
-        scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
-        onScrollEnd({
-          nativeEvent: {
-            contentOffset: {
-              x: +nextOffset.x,
-              y: +nextOffset.y
-            }
-          }
-        } as NativeSyntheticEvent<NativeScrollEvent>)
-      } else {
-        // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
-        if (state.dir === 'x') {
-          scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
-        } else {
-          scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true })
-        }
-        updateState(0, nextOffset)
-      }
-    }
-  }
-
-  /**
-   * 当用户开始拖动此视图时调用此函数, 更新当前在滚动态
-   */
-  function onScrollBegin () {
-    internalsRef.current.isScrolling = true
-  }
-
-  /**
-   * 当用户开始拖动结束
-   * 注意: 当手动调用scrollTo的时候, 安卓不会触发onMomentumScrollEnd, IOS会触发onMomentumScrollEnd
-   */
-  function onScrollEnd (event: NativeSyntheticEvent<NativeScrollEvent>) {
-    if (Platform.OS === 'ios' && !needTriggerScrollEnd.current) {
-      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
-      updateState(nextIndex, nextOffset)
-      needTriggerScrollEnd.current = true
-      return
-    }
-    if (totalElements === 1) {
-      return
-    }
-    internalsRef.current.isScrolling = false
-    // 用户手动滑动更新索引后，如果开启了自动轮播等重新开始
-    updateIndex(event.nativeEvent.contentOffset, true)
-  }
-
-  /**
-   * 当拖拽结束时，检测是否可滚动
-  */
-  function onScrollEndDrag (event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { contentOffset } = event.nativeEvent
-    const { index, total } = state
-    isDragRef.current = true
-    const internalOffset = internalsRef.current.offset
-    const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y
-    const moveOffset = props.horizontal ? contentOffset.x : contentOffset.y
-    if (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
-      internalsRef.current.isScrolling = false
-    }
-  }
-
-  /**
-   * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
-  */
-  function onWrapperLayout (e: LayoutChangeEvent) {
-    scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      const isWDiff = state.width !== width
-      const isHDiff = state.height !== height
-      if (isWDiff || isHDiff) {
-        const changeState = {
-          width: isWDiff ? width : state.width,
-          height: isHDiff ? height : state.height
-        }
-        const attr = state.dir === 'x' ? 'width' : 'height'
-        changeState[attr] = changeState[attr] - previousMargin - nextMargin
-        const correctOffset = Object.assign({}, state.offset, {
-          [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
-        })
-        state.width = changeState.width
-        state.height = changeState.height
-        // 这里setState之后,会再触发重新渲染, renderScrollView会再次触发onScrollEnd,
-        setState((preState) => {
-          return {
-            ...preState,
-            width: changeState.width,
-            height: changeState.height
-          }
-        })
-      }
-      props.getInnerLayout && props.getInnerLayout(layoutRef)
-    })
-  }
-
-  function getOffset (): Array<number> {
-    const step = state.dir === 'x' ? state.width : state.height
-    if (!step || Number.isNaN(+step)) return []
-    const offsetArray = []
-    for (let i = 0; i < totalElements; i++) {
-      offsetArray.push(i * step)
-    }
-    return offsetArray
-  }
-
-  function renderScrollView (pages: ReactNode) {
-    const offsetsArray = getOffset()
-    const scrollElementProps = {
-      ref: scrollViewRef,
-      horizontal: props.horizontal,
-      pagingEnabled: true,
-      snapToOffsets: offsetsArray,
-      decelerationRate: 0.99, // 'fast'
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-      bounces: false,
-      scrollsToTop: false,
-      removeClippedSubviews: true,
-      automaticallyAdjustContentInsets: false
-    }
-    const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth }
-    return (
-      <Animated.ScrollView
-        {...scrollElementProps}
-        style={[layoutStyle]}
-        overScrollMode="always"
-        contentOffset={state.offset}
-        onScrollBeginDrag={onScrollBegin}
-        onMomentumScrollEnd={onScrollEnd}
-        onScrollEndDrag={onScrollEndDrag}
-      >
-        {pages}
-      </Animated.ScrollView>
-    )
-  }
-
-  function renderPagination () {
-    if (state.total <= 1) return null
-    const dots: Array<ReactNode> = []
-    const activeDotStyle = [{
-      backgroundColor: props.activeDotColor || '#007aff',
-      width: 8,
-      height: 8,
-      borderRadius: 4,
-      marginLeft: 3,
-      marginRight: 3,
-      marginTop: 3,
-      marginBottom: 3
-    }]
-    const dotStyle = [{
-      backgroundColor: props.dotColor || 'rgba(0,0,0,.2)',
-      width: 8,
-      height: 8,
-      borderRadius: 4,
-      marginLeft: 3,
-      marginRight: 3,
-      marginTop: 3,
-      marginBottom: 3
-    }]
-    for (let i = 0; i < state.total; i++) {
-      if (i === state.index) {
-        dots.push(<View style={activeDotStyle} key={i}></View>)
-      } else {
-        dots.push(<View style={dotStyle} key={i}></View>)
-      }
-    }
-    return (
-      <View
-        pointerEvents="none"
-        style={[styles['pagination_' + state.dir]]}
-      >
-        {dots}
-      </View>
-    )
-  }
-
-  function renderPages () {
-    const { width, height } = state
-    const { children } = props
-    const { circular } = props
-    const pageStyle = { width: width, height: height }
-    // 设置了previousMargin或者nextMargin,
-    // 1. 元素的宽度是减去这两个数目之和
-    // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
-    // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
-    if (totalElements > 1 && Array.isArray(children)) {
-      let arrElements: (Array<ReactNode>) = []
-      // pages = ["2", "0", "1", "2", "0"]
-      const pages = Array.isArray(children) ? Object.keys(children) : []
-      /* 无限循环的时候 */
-      if (circular) {
-        pages.unshift(totalElements - 1 + '')
-        pages.push('0')
-      }
-      arrElements = pages.map((page, i) => {
-        const extraStyle = {} as {
-          [key: string]: any
-        }
-        if (i === 0 && dir === 'x' && typeof width === 'number') {
-          previousMargin && (extraStyle.marginLeft = previousMargin)
-        } else if (i === pages.length - 1 && typeof width === 'number') {
-          nextMargin && (extraStyle.marginRight = nextMargin)
-        }
-        return (<View style={[pageStyle, styles.slide, extraStyle]} key={'page' + i}>
-          {wrapChildren(
-            {
-              children: children[+page]
-            },
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )}
-        </View>)
-      })
-      return arrElements
-    } else {
-      const realElement = (
-        <View style={pageStyle} key={0}>
-          {children}
-        </View>
-      )
-      return realElement
-    }
-  }
-
-  const pages: Array<ReactNode> | ReactNode = renderPages()
-  return (<View style={[normalStyle, innerStyle, layoutStyle]} {...layoutProps}>
-      {renderScrollView(pages)}
-      {props.showsPagination && renderPagination()}
-  </View>)
-})
-
-_Carouse.displayName = 'MpxCarouse'
-
-export default _Carouse
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx
deleted file mode 100644
index 46f6d8daeb..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ScrollView } from 'react-native'
-import { JSX, MutableRefObject, forwardRef, useRef } from 'react'
-import Carouse from './carouse'
-import { SwiperProps } from './type'
-import useInnerProps from '../getInnerListeners'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-/**
- * ✔ indicator-dots
- * ✔ indicator-color
- * ✔ indicator-active-color
- * ✔ autoplay
- * ✔ current
- * ✔ interval
- * ✔ duration
- * ✔ circular
- * ✔ vertical
- * ✘ display-multiple-items
- * ✘ previous-margin
- * ✘ next-margin
- * ✔ easing-function  ="easeOutCubic"
- * ✘ snap-to-edge
- */
-const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
-  const { children } = props
-  const innerLayout = useRef({})
-  const swiperProp = {
-    circular: props.circular || false,
-    current: props.current || 0,
-    autoplay: props.autoplay || false,
-    duration: props.duration || 500,
-    interval: props.interval || 5000,
-    showsPagination: props['indicator-dots'],
-    dotColor: props['indicator-color'] || 'rgba(0, 0, 0, .3)',
-    activeDotColor: props['indicator-active-color'] || '#000000',
-    horizontal: props.vertical !== undefined ? !props.vertical : true,
-    previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
-    nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
-    enableOffset: props['enable-offset'] || true,
-    enableVar: props['enable-var'] || false,
-    parentFontSize: props['parent-font-size'],
-    parentWidth: props['parent-width'],
-    parentHeight: props['parent-height'],
-    style: props.style || {},
-    externalVarContext: props['external-var-context'],
-    bindchange: props.bindchange,
-    easingFunction: props['easing-function'] || 'default'
-  }
-
-  const nodeRef = useRef(null)
-  useNodesRef<ScrollView, SwiperProps>(props, ref, nodeRef, {})
-
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef
-  }, [
-    'indicator-dots',
-    'indicator-color',
-    'indicator-active-color',
-    'previous-margin',
-    'vertical',
-    'previous-margin',
-    'next-margin',
-    'easing-function'
-  ], { layoutRef: innerLayout })
-
-  const getInnerLayout = (layout: MutableRefObject<{}>) => {
-    innerLayout.current = layout.current
-  }
-
-  return <Carouse
-    getInnerLayout={getInnerLayout}
-    innerProps={innerProps}
-    {...innerProps}
-    {...swiperProp}>
-    {children}
-  </Carouse>
-})
-
-_SwiperWrapper.displayName = 'MpxSwiper'
-
-export default _SwiperWrapper
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/type.ts b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/type.ts
deleted file mode 100644
index 2815f9acc7..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper/type.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ReactNode } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
-
-export type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
-
-export interface SwiperProps {
-  children?: ReactNode;
-  circular?: boolean;
-  current?: number;
-  interval?: number;
-  autoplay?: boolean;
-  duration?: number;
-  'indicator-dots'?: boolean;
-  'indicator-color'?: string;
-  'indicator-active-color'?: string;
-  vertical?: boolean;
-  style: {
-    [key: string]: any
-  };
-  'easing-function'?: EaseType;
-  'previous-margin'?: string;
-  'next-margin'?: string;
-  'enable-offset'?: boolean;
-  'enable-var': boolean;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  'external-var-context'?: Record<string, any>;
-  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
-}
-
-export interface CarouseProps {
-  children?: ReactNode;
-  circular?: boolean;
-  current: number;
-  autoplay?: boolean;
-  duration?: number;
-  interval?: number;
-  showsPagination?: boolean;
-  dotColor?: string;
-  activeDotColor?: string;
-  horizontal?: boolean;
-  easingFunction?: EaseType;
-  previousMargin?: number;
-  nextMargin?: number;
-  enableOffset?: boolean;
-  parentFontSize?: number;
-  parentWidth?: number;
-  parentHeight?: number;
-  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
-  getInnerLayout: Function;
-  innerProps: Object;
-  style: {
-    [key: string]: any
-  };
-  enableVar: boolean;
-  externalVarContext?: Record<string, any>;
-}
-
-export interface CarouseState {
-  children: Array<ReactNode> | ReactNode,
-  width: number;
-  height: number;
-  index: number;
-  total: number;
-  // 设置scrollView初始的滚动坐标，contentOffset
-  offset: {
-    x: number,
-    y: number
-  };
-  // 是否结束自动轮播，手动设置滚动到具体位置时结束
-  autoplayEnd: boolean;
-  loopJump: boolean;
-  dir: 'x' | 'y';
-  isScrollEnd: boolean
-}
-
-export interface ScrollElementProps {
-  pagingEnabled: boolean,
-  showsHorizontalScrollIndicator: boolean,
-  showsVerticalScrollIndicator: boolean,
-  bounces: boolean,
-  scrollsToTop: boolean,
-  removeClippedSubviews: boolean,
-  automaticallyAdjustContentInsets: boolean,
-  horizontal: boolean
-}
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
index f8aa7f321a..9de536a192 100644
--- a/packages/webpack-plugin/package.json
+++ b/packages/webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.70",
+  "version": "2.9.71",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,7 +83,7 @@
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.9.70",
+    "@mpxjs/api-proxy": "^2.9.71",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",