diff --git a/packages/fes-doc/docs/.vuepress/config.js b/packages/fes-doc/docs/.vuepress/config.js
index 71393141..60be4c4a 100644
--- a/packages/fes-doc/docs/.vuepress/config.js
+++ b/packages/fes-doc/docs/.vuepress/config.js
@@ -2,6 +2,17 @@ module.exports = {
     base: "/fes.js/",
     title: "Fes.js",
     description: "中台应用前端快速解决方案",
+    plugins: {
+        "@vuepress/pwa": {
+            serviceWorker: true,
+            updatePopup: {
+                "/": {
+                    message: "发现新内容可用",
+                    buttonText: "刷新"
+                }
+            }
+        }
+    },
     themeConfig: {
         repo: "WeBankFinTech/fes.js",
         sidebarDepth: 3,
diff --git a/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-192x192.png b/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-192x192.png
new file mode 100755
index 00000000..b02aa64d
Binary files /dev/null and b/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-192x192.png differ
diff --git a/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-512x512.png b/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-512x512.png
new file mode 100755
index 00000000..06088b01
Binary files /dev/null and b/packages/fes-doc/docs/.vuepress/public/icons/android-chrome-512x512.png differ
diff --git a/packages/fes-doc/docs/.vuepress/public/manifest.json b/packages/fes-doc/docs/.vuepress/public/manifest.json
new file mode 100644
index 00000000..e44fd4f3
--- /dev/null
+++ b/packages/fes-doc/docs/.vuepress/public/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "Fes.js",
+  "short_name": "Fes.js",
+  "icons": [
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#3eaf7c"
+}
diff --git a/packages/fes-doc/docs/guide/directory-structure.md b/packages/fes-doc/docs/guide/directory-structure.md
index 6d442f36..3c025bd6 100644
--- a/packages/fes-doc/docs/guide/directory-structure.md
+++ b/packages/fes-doc/docs/guide/directory-structure.md
@@ -270,8 +270,10 @@ export default function () {
 读取文件名称作为组件名称进行注册，例如`src/components/message.vue`注册的全局组件名称为`message`，
 
 ### 特殊组件
-`fesHeader.vue`用于自定义页面头部。参数`FesHeader`控制`fesHeader.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局，也可以在页面组件中单独定义`FesHeader`。   
-`fesLeft.vue` 用于自定义菜单栏。配置参数`FesLeft`控制`fesLeft.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局，也可以在页面组件中单独定义`FesHeader`。   
+`fesHeader.vue`      
+用于自定义页面头部。参数`FesHeader`控制`fesHeader.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局的，也可以在页面组件中单独配置`FesHeader`。     
+`fesLeft.vue`       
+用于自定义菜单栏。配置参数`FesLeft`控制`fesLeft.vue` 是否显示。在`fes.config.js`中配置`FesLeft`定义全局的，也可以在页面组件中单独配置`FesLeft`。   
 
 ## src/pages
 在`pages`目录下编写页面，`Fes.js`会根据`pages`目录以及文件结构自动生成[Vue-router](https://router.vuejs.org/zh-cn/)路由配置。
@@ -288,16 +290,16 @@ pages
 └── layout.vue        # 根路由下所有page共用的外层
 ```
 1. 如果目录下有`layout.vue`，则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
-2. 带参数的路径使用`@id.fes`的形式
+2. 带参数的路径使用`@id.vue`的形式
 
 ### 编译
 编译后在`.cache`目录下生成`routeConfig.js`，内容如下：
 ```js
-import layout from 'D:\\git\\fes-template\\src\\pages\\layout.fes';
-import index from 'D:\\git\\fes-template\\src\\pages\\index.fes';
-import a from 'D:\\git\\fes-template\\src\\pages\\a.fes';
-import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.fes';
-import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.fes';
+import layout from 'D:\\git\\fes-template\\src\\pages\\layout.vue';
+import index from 'D:\\git\\fes-template\\src\\pages\\index.vue';
+import a from 'D:\\git\\fes-template\\src\\pages\\a.vue';
+import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.vue';
+import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.vue';
 export default { 
     '/': { 
         component: layout,
diff --git a/packages/fes-doc/docs/guide/route.md b/packages/fes-doc/docs/guide/route.md
index a911dd31..2b8de416 100644
--- a/packages/fes-doc/docs/guide/route.md
+++ b/packages/fes-doc/docs/guide/route.md
@@ -5,26 +5,26 @@
 `Vue-router`加载的路由是使用 `router.config.js` 配置的。而`Fes.js`将根据项目的 `pages`目录结构自动生成路由规则
 ```
 	pages
-	├── index.fes         # 根路由页面 路径 index.html#/
-    ├── a.fes             # 路径 /a
+	├── index.vue         # 根路由页面 路径 index.html#/
+    ├── a.vue             # 路径 /a
     ├── b                 # 文件夹b
-    │   ├── index.fes     # 路径 /b
-    │   ├── @id.fes       # 动态路由 /b/:id
-    │   └── c.fes         # 路径 /b/c
-    └── layout.fes        # 根路由下所有page共用的外层
+    │   ├── index.vue     # 路径 /b
+    │   ├── @id.vue       # 动态路由 /b/:id
+    │   └── c.vue         # 路径 /b/c
+    └── layout.vue        # 根路由下所有page共用的外层
 ```
-1. 如果目录下有`layout.fes`，则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
-2. 带参数的路径使用`@[filename].fes`的方式
+1. 如果目录下有`layout.vue`，则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
+2. 带参数的路径使用`@[filename].vue`的方式
 
 <br>
 Fes编译代码之前会根据 pages 目录结构生成下面的配置代码：
 
 ```javascript
-import layout from 'D:\\git\\fes-template\\src\\pages\\layout.fes';
-import index from 'D:\\git\\fes-template\\src\\pages\\index.fes';
-import a from 'D:\\git\\fes-template\\src\\pages\\a.fes';
-import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.fes';
-import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.fes';
+import layout from 'D:\\git\\fes-template\\src\\pages\\layout.vue';
+import index from 'D:\\git\\fes-template\\src\\pages\\index.vue';
+import a from 'D:\\git\\fes-template\\src\\pages\\a.vue';
+import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.vue';
+import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.vue';
 import b_c from 'D:\\git\\fes-template\\src\\pages\\b\\b_c';
 export default { 
     '/': {