diff --git a/package.json b/package.json
index 301b26b6..b7eb19ca 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "types"
   ],
   "peerDependencies": {
-    "element-ui": "^2.15.3"
+    "element-ui": "^2.15.3",
+    "vue": "^2.6.14"
   },
   "dependencies": {
     "@laomao800/parse-size-with-unit": "^1.0.3",
@@ -38,8 +39,7 @@
     "core-js": "^3.6.5",
     "has-values": "^2.0.1",
     "lodash": "^4.17.21",
-    "normalize.css": "^8.0.1",
-    "vue": "^2.6.14"
+    "normalize.css": "^8.0.1"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
@@ -74,6 +74,7 @@
     "rimraf": "^3.0.2",
     "semver": "^7.3.5",
     "typescript": "~4.1.5",
+    "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "vuepress": "^1.8.2",
     "webpack-node-externals": "^3.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f5d7bb9..60287b64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,7 +51,6 @@ dependencies:
   has-values: 2.0.1
   lodash: 4.17.21
   normalize.css: 8.0.1
-  vue: 2.6.14
 
 devDependencies:
   '@types/jest': 24.9.1
@@ -86,6 +85,7 @@ devDependencies:
   rimraf: 3.0.2
   semver: 7.3.5
   typescript: 4.1.5
+  vue: 2.6.14
   vue-template-compiler: 2.6.14
   vuepress: 1.8.2
   webpack-node-externals: 3.0.0
@@ -2298,7 +2298,7 @@ packages:
       webpack-dev-server: 3.11.2_webpack@4.46.0
       webpack-merge: 4.2.2
     optionalDependencies:
-      vue-loader-v16: /vue-loader/16.3.1
+      vue-loader-v16: /vue-loader/16.3.3_webpack@4.46.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12625,12 +12625,19 @@ packages:
       webpack: 4.46.0
     dev: true
 
-  /vue-loader/16.3.1:
-    resolution: {integrity: sha512-QTtXgdqQ+4G3d8dmhnnfJSiKKHQtp53XiivSYAvAqNCOufL9aK0DYOc9MW9MSy7Xzj/1qdcghb28zKhOPvQYqQ==}
+  /vue-loader/16.3.3_webpack@4.46.0:
+    resolution: {integrity: sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.0.8
+      webpack: ^4.1.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
     dependencies:
       chalk: 4.1.1
       hash-sum: 2.0.0
       loader-utils: 2.0.0
+      webpack: 4.46.0
     dev: true
     optional: true
 
@@ -12671,6 +12678,7 @@ packages:
 
   /vue/2.6.14:
     resolution: {integrity: sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==}
+    dev: true
 
   /vuepress-html-webpack-plugin/3.2.0_webpack@4.46.0:
     resolution: {integrity: sha512-BebAEl1BmWlro3+VyDhIOCY6Gef2MCBllEVAP3NUAtMguiyOwo/dClbwJ167WYmcxHJKLl7b0Chr9H7fpn1d0A==}
diff --git a/src/create.ts b/src/create.ts
index 5aab22ff..011ee97c 100644
--- a/src/create.ts
+++ b/src/create.ts
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import pick from 'lodash/pick'
 import isPlainObject from 'lodash/isPlainObject'
 import { Listview as _Listview } from '@/index'
-import { create as CreateFunction } from '~/types'
+import { CreateFunction } from '~/types/Create'
 
 const allowPresetProps = [
   // StoreProvider
diff --git a/types/Create.d.ts b/types/Create.d.ts
new file mode 100644
index 00000000..d1da6e80
--- /dev/null
+++ b/types/Create.d.ts
@@ -0,0 +1,28 @@
+import { ListviewProps } from './Props'
+
+type AllowPresetProps =
+  | 'pressEnterSearch'
+  | 'autoload'
+  | 'requestMethod'
+  | 'requestConfig'
+  | 'transformRequestData'
+  | 'transformResponseData'
+  | 'contentDataMap'
+  | 'contentMessage'
+  | 'validateResponse'
+  | 'resolveResponseErrorMessage'
+  | 'usePage'
+  | 'pageSize'
+  | 'pageSizes'
+  | 'pageProps'
+  | 'pagePosition'
+  | 'height'
+  | 'fullHeight'
+  | 'searchButton'
+  | 'resetButton'
+
+type CreateOptions = Partial<Pick<ListviewProps, AllowPresetProps>> & {
+  replaceComponents?: Record<string, Component>
+}
+
+export type CreateFunction = (options?: CreateOptions) => Component
diff --git a/types/Props.d.ts b/types/Props.d.ts
new file mode 100644
index 00000000..747625cb
--- /dev/null
+++ b/types/Props.d.ts
@@ -0,0 +1,136 @@
+import Vue, { VueConstructor, VNode, Component } from 'vue'
+import { AxiosRequestConfig } from 'axios'
+import { FilterButton } from './FilterButton'
+import { FilterField } from './FilterField'
+import { TableColumn } from './TableColumn'
+
+type MessageType = 'success' | 'warning' | 'info' | 'error'
+type Dic<T = any> = Record<string, T>
+
+declare class ComponentWithInstall extends Vue {
+  static install(Vue: VueConstructor<Vue>, options: any): void
+}
+
+declare class ListviewProps extends ComponentWithInstall {
+  /** 顶部通栏页面标题文本。 default: '' */
+  headerTitle: string
+
+  /** 优先级最高，设置整体布局高度，包含顶部标题栏、搜索栏、正文区域、页码区域所有内容的高度，支持百分比。 default: null */
+  height: string | number
+
+  /** 垂直高度是否铺满屏幕高度。 default: true */
+  fullHeight: boolean
+
+  /** 初始化后是否自动加载第一页内容。 default: true */
+  autoload: boolean
+
+  /** 数据请求接口地址。 default: '' */
+  requestUrl: string
+
+  /** 支持 Axios 所有支持的请求方法。 default: 'get' */
+  requestMethod:
+    | 'get'
+    | 'delete'
+    | 'head'
+    | 'options'
+    | 'post'
+    | 'put'
+    | 'patch'
+
+  /** 兼容 Axios 的所有除了 cancelToken 之外的 requestConfig 配置。 default: {} */
+  requestConfig: AxiosRequestConfig
+
+  /** 自定义请求方法，需要返回 Promise ，以返回的内容交由 `validateResponse` 进行验证 */
+  requestHandler: (requestData: Dic) => Promise<any> | any
+
+  /** 对接口发起请求参数在发送前作最后的更改 */
+  transformRequestData: (requestData: Dic) => Dic | boolean
+
+  /** 对原始响应数据的加工方法 default: null */
+  transformResponseData: (responseData: Dic) => void
+
+  /** 数据接口响应内容属性映射。 default: { items: 'result.items', total: 'result.total_count' } */
+  contentDataMap: { [k: string]: string }
+
+  /** 可用在 autoload 为 false 时候，初始显示的提示信息。 default: null */
+  contentMessage: null | string | { type: MessageType; text: string }
+
+  /** 验证接口响应是否成功 */
+  validateResponse: (response?: any) => boolean
+
+  /** 解析错误提示信息 */
+  resolveResponseErrorMessage: (response?: any) => any
+
+  /** 搜索栏左侧按钮配置。 default: [] */
+  filterButtons: FilterButton[] | (() => VNode) | VNode
+
+  /** 搜索栏搜索字段配置。 default: [] */
+  filterFields: FilterField[] | (() => VNode) | VNode
+
+  /** 可选，存储搜索栏的搜索条件值。 default: {} */
+  filterModel: Record<string, any>
+
+  /** 在搜索栏按下回车键是否出发搜索请求。 default: true */
+  pressEnterSearch: boolean
+
+  /**
+   * boolean 是否显示搜索栏的“提交”按钮
+   * object 可自定义按钮配置。
+   * default: { text: '搜索', icon: 'el-icon-search', type: 'primary' }
+   */
+  searchButton: Record<string, any> | boolean
+
+  /**
+   * boolean 是否显示搜索栏的“重置”按钮。
+   * object 可自定义按钮配置。
+   * default: { text: '重置', type: 'default' }
+   */
+  resetButton: Record<string, any> | boolean
+
+  /** 可传入 <el-table> 的所有支持属性。 default: {} */
+  contentProps: Record<string, any>
+
+  /** 可传入 <el-table> 的所有支持事件。 default: {} */
+  contentEvents: Record<string, (...args: any[]) => void>
+
+  /** 表格列配置。 default: [] */
+  tableColumns: TableColumn[]
+
+  /** 是否开启表格行选择功能，传入 'single' 为表格单选效果。 default: true */
+  tableSelectionColumn:
+    | boolean
+    | string
+    | { type?: string; selectable?: (row: any, index: number) => boolean }
+
+  /** 表格行选择的选中数据，可通过 .sync 修饰符获取更新。 default: [] */
+  selection: any[]
+
+  /** 是否开启底部分页功能，或配置请求时分页参数的键名。 default: true */
+  usePage: boolean | { pageIndex: string; pageSize: string }
+
+  /** 分页“每页数量”可选值。 default: [20, 50, 100] */
+  pageSizes: number[]
+
+  /** 默认每页分页数量。 default: 20 */
+  pageSize: number
+
+  /** 页码位置。 default: 'left' */
+  pagePosition: 'left' | 'right'
+
+  /** el-pagination Props */
+  pageProps: Record<string, any>
+}
+
+export declare class ListviewContainerProps extends ComponentWithInstall {
+  /** 顶部通栏页面标题文本。 default: '' */
+  headerTitle: ListviewProps['headerTitle']
+
+  /** 顶部通栏页面面包屑。 default: [] */
+  headerNav: ListviewProps['headerNav']
+
+  /** Tab 样式。 default: '' */
+  type: '' | 'card' | 'line'
+
+  /** Tab 位置。 default: 'left' */
+  tabPosition: 'left' | 'center'
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index a1cd4ada..87d7bc2e 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,166 +1,11 @@
-import Vue, { VueConstructor, VNode, Component } from 'vue'
-import { AxiosRequestConfig } from 'axios'
-import { FilterButton } from './FilterButton'
-import { FilterField } from './FilterField'
-import { TableColumn } from './TableColumn'
-
-type MessageType = 'success' | 'warning' | 'info' | 'error'
-type Dic<T = any> = Record<string, T>
-
-declare class ListviewProps extends Vue {
-  /** 设置页面顶部通栏内的页面标题文本。 default: '' */
-  headerTitle: string
-
-  /** 优先级最高，设置整体布局高度，包含顶部标题栏、搜索栏、正文区域、页码区域所有内容的高度，支持百分比。 default: null */
-  height: string | number
-
-  /** 垂直高度是否铺满屏幕高度。 default: true */
-  fullHeight: boolean
-
-  /** 初始化后是否自动加载第一页内容。 default: true */
-  autoload: boolean
-
-  /** 数据请求接口地址。 default: '' */
-  requestUrl: string
-
-  /** 支持 Axios 所有支持的请求方法。 default: 'get' */
-  requestMethod:
-    | 'get'
-    | 'delete'
-    | 'head'
-    | 'options'
-    | 'post'
-    | 'put'
-    | 'patch'
-
-  /** 兼容 Axios 的所有除了 cancelToken 之外的 requestConfig 配置。 default: {} */
-  requestConfig: AxiosRequestConfig
-
-  /** 自定义请求方法，需要返回 Promise ，以返回的内容交由 `validateResponse` 进行验证 */
-  requestHandler: (requestData: Dic) => Promise<any> | any
-
-  /** 对接口发起请求参数在发送前作最后的更改 */
-  transformRequestData: (requestData: Dic) => Dic | boolean
-
-  /** 对原始响应数据的加工方法 default: null */
-  transformResponseData: (responseData: Dic) => void
-
-  /** 数据接口响应内容属性映射。 default: { items: 'result.items', total: 'result.total_count' } */
-  contentDataMap: { [k: string]: string }
-
-  /** 可用在 autoload 为 false 时候，初始显示的提示信息。 default: null */
-  contentMessage: null | string | { type: MessageType; text: string }
-
-  /** 验证接口响应是否成功 */
-  validateResponse: (response?: any) => boolean
-
-  /** 解析错误提示信息 */
-  resolveResponseErrorMessage: (response?: any) => any
-
-  /** 搜索栏左侧按钮配置。 default: [] */
-  filterButtons: FilterButton[] | (() => VNode) | VNode
-
-  /** 搜索栏搜索字段配置。 default: [] */
-  filterFields: FilterField[] | (() => VNode) | VNode
-
-  /** 可选，存储搜索栏的搜索条件值。 default: {} */
-  filterModel: Record<string, any>
-
-  /** 在搜索栏按下回车键是否出发搜索请求。 default: true */
-  pressEnterSearch: boolean
-
-  /**
-   * boolean 是否显示搜索栏的“提交”按钮
-   * object 可自定义按钮配置。
-   * default: { text: '搜索', icon: 'el-icon-search', type: 'primary' }
-   */
-  searchButton: Record<string, any> | boolean
-
-  /**
-   * boolean 是否显示搜索栏的“重置”按钮。
-   * object 可自定义按钮配置。
-   * default: { text: '重置', type: 'default' }
-   */
-  resetButton: Record<string, any> | boolean
-
-  /** 可传入 <el-table> 的所有支持属性。 default: {} */
-  contentProps: Record<string, any>
-
-  /** 可传入 <el-table> 的所有支持事件。 default: {} */
-  contentEvents: Record<string, (...args: any[]) => void>
-
-  /** 表格列配置。 default: [] */
-  tableColumns: TableColumn[]
-
-  /** 是否开启表格行选择功能，传入 'single' 为表格单选效果。 default: true */
-  tableSelectionColumn:
-    | boolean
-    | string
-    | { type?: string; selectable?: (row: any, index: number) => boolean }
-
-  /** 表格行选择的选中数据，可通过 .sync 修饰符获取更新。 default: [] */
-  selection: any[]
-
-  /** 是否开启底部分页功能，或配置请求时分页参数的键名。 default: true */
-  usePage: boolean | { pageIndex: string; pageSize: string }
-
-  /** 分页“每页数量”可选值。 default: [20, 50, 100] */
-  pageSizes: number[]
-
-  /** 默认每页分页数量。 default: 20 */
-  pageSize: number
-
-  /** 页码位置。 default: 'left' */
-  pagePosition: 'left' | 'right'
-
-  pageProps: Record<string, any>
-}
-
-declare class ListviewContainerProps extends Vue {}
-
-declare class Listview extends ListviewProps {
-  static install(Vue: VueConstructor<Vue>, options: any): void
-}
-
-declare class ListviewContainer extends ListviewContainerProps {
-  static install(Vue: VueConstructor<Vue>, options: any): void
-}
-
-type AllowPresetProps =
-  | 'pressEnterSearch'
-  | 'autoload'
-  | 'requestMethod'
-  | 'requestConfig'
-  | 'transformRequestData'
-  | 'transformResponseData'
-  | 'contentDataMap'
-  | 'contentMessage'
-  | 'validateResponse'
-  | 'resolveResponseErrorMessage'
-  | 'usePage'
-  | 'pageSize'
-  | 'pageSizes'
-  | 'pageProps'
-  | 'pagePosition'
-  | 'height'
-  | 'fullHeight'
-  | 'searchButton'
-  | 'resetButton'
-
-type CreateOptions = Partial<
-  Pick<ListviewProps, typeof AllowPresetProps[number]>
-> & { replaceComponents?: Record<string, Component> }
-
-type create = (options?: CreateOptions) => Component
+import { ListviewProps, ListviewContainerProps } from './Props'
+import { CreateFunction } from './Create'
 
 export default Listview
-export {
-  create,
-  Listview,
-  ListviewContainer,
-  ListviewProps,
-  ListviewContainerProps,
-}
+export declare const create: CreateFunction
+export declare class Listview extends ListviewProps {}
+export declare class ListviewContainer extends ListviewContainerProps {}
+export { ListviewProps, ListviewContainerProps }
 export * from './FilterButton'
 export * from './FilterField'
 export * from './TableColumn'