diff --git a/README.md b/README.md
index 2b25dd6260..8fe0b186ff 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,33 @@ $ yarn docs:dev
 
 the project will launch website for you to preview all existing component
 
+## Local development
+
+1. With command
+
+```shell
+$ yarn dev
+```
+
+will start the local development environment
+
+2. Add your component into `play/play.vue`
+
+> play.vue
+
+```vue
+<template>
+  <ComponentYouAreDeveloping />
+</template>
+
+<script setup lang="ts">
+// make sure this component is registered in @element-plus/components
+import { ComponentYouAreDeveloping } from '@element-plus/components'
+</script>
+```
+
+Modify `play.vue` file per your needs to get things work.
+
 ## Component migration process
 
 1. Convert the item in https://github.com/element-plus/element-plus/projects/1 to an issue
diff --git a/build/build-helper.ts b/build/build-helper.ts
index 615d67a1cc..50a958823c 100644
--- a/build/build-helper.ts
+++ b/build/build-helper.ts
@@ -15,8 +15,7 @@ const _version = tagVer
 helper({
   name,
   version: _version,
-  entry:
-    'docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
+  entry: 'docs/en-US/component/!(datetime-picker|message-box|message).md',
   outDir: 'dist/element-plus',
   reComponentName,
   reDocUrl,
diff --git a/package.json b/package.json
index 4d0646f86f..6c0e94ebf2 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "cz": "npx git-cz",
     "test": "jest",
+    "dev": "cd play && vite",
     "gen": "bash ./scripts/gc.sh",
     "gen:version": "esno build/gen-version.ts",
     "update:version": "esno build/update-version.ts",
@@ -83,6 +84,7 @@
     "@types/through2": "^2.0.36",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
+    "@vitejs/plugin-vue": "^1.6.2",
     "@vue/babel-plugin-jsx": "^1.0.7",
     "@vue/compiler-sfc": "^3.2.8",
     "@vue/component-compiler-utils": "^3.2.2",
@@ -128,6 +130,7 @@
     "ts-morph": "^11.0.3",
     "ts-node": "^10.1.0",
     "typescript": "^4.4.2",
+    "vite": "^2.5.8",
     "vue": "^3.2.0",
     "vue-jest": "5.0.0-alpha.5",
     "vue-router": "^4.0.2",
diff --git a/packages/components/package.json b/packages/components/package.json
index 239e117525..0665256f20 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -18,8 +18,8 @@
   "peerDependencies": {
     "vue": "^3.2.0"
   },
-  "main": "index.js",
-  "module": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "types": "index.d.ts",
   "unpkg": "index.js",
   "jsdelivr": "index.js",
diff --git a/packages/directives/package.json b/packages/directives/package.json
index a613f6010f..54726b3563 100644
--- a/packages/directives/package.json
+++ b/packages/directives/package.json
@@ -2,8 +2,8 @@
   "name": "@element-plus/directives",
   "description": "Element Plus directives",
   "version": "0.0.5",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "unpkg": "index.js",
   "jsdelivr": "index.js",
   "license": "MIT",
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 5cb76fed8f..479674ae43 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -2,8 +2,8 @@
   "name": "@element-plus/hooks",
   "description": "Element Plus composables",
   "version": "0.0.5",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "unpkg": "index.js",
   "jsdelivr": "index.js",
   "types": "index.d.ts",
diff --git a/packages/locale/package.json b/packages/locale/package.json
index 2f21e401e3..f2cadae030 100644
--- a/packages/locale/package.json
+++ b/packages/locale/package.json
@@ -2,8 +2,8 @@
   "name": "@element-plus/locale",
   "description": "Element Plus locale",
   "version": "0.0.5",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "unpkg": "index.js",
   "jsdelivr": "index.js",
   "types": "index.d.ts",
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 53d9fba16d..528ef11dd3 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -9,8 +9,8 @@
     "clean": "rm -rf lib",
     "build": "gulp build"
   },
-  "main": "index.js",
-  "module": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "types": "index.d.js",
   "unpkg": "index.js",
   "jsdelivr": "index.js",
diff --git a/play/index.html b/play/index.html
new file mode 100644
index 0000000000..d33dc5c515
--- /dev/null
+++ b/play/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Element Plus App</title>
+    <!-- element css cdn -->
+  </head>
+  <body>
+    <div id="play"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>
diff --git a/play/main.ts b/play/main.ts
new file mode 100644
index 0000000000..3e9bd52e6d
--- /dev/null
+++ b/play/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import Play from './play.vue'
+
+import '@element-plus/theme-chalk/src/index.scss'
+
+const app = createApp(Play)
+
+app.mount('#play')
diff --git a/play/play.vue b/play/play.vue
new file mode 100644
index 0000000000..1c6ea3510a
--- /dev/null
+++ b/play/play.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="play-container">
+    <ElButton> test </ElButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from '@element-plus/components'
+</script>
+
+<style lang="scss">
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  #play {
+    height: 100%;
+    width: 100%;
+    .play-container {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/play/vite.config.js b/play/vite.config.js
new file mode 100644
index 0000000000..c40aa3c361
--- /dev/null
+++ b/play/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/yarn.lock b/yarn.lock
index db1bf6beb9..651bc05098 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3172,6 +3172,11 @@
     "@typescript-eslint/types" "4.30.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vitejs/plugin-vue@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.2.tgz#40dfe314cff610d4dd027a0b4ea2a93a257f3fc9"
+  integrity sha512-Pf+dqkT4pWPfziPm51VtDXsPwE74CEGRiK6Vgm5EDBewHw1EgcxG7V2ZI/Yqj5gcDy5nVtjgx0AbsTL+F3gddg==
+
 "@volar/code-gen@^0.27.7":
   version "0.27.7"
   resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.27.7.tgz#2914a4055e8947ad710a52f2b8662b2bf6bc8d29"
@@ -5875,6 +5880,11 @@ esbuild-register@^3.0.0:
   dependencies:
     jsonc-parser "^3.0.0"
 
+esbuild@^0.12.17:
+  version "0.12.28"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.28.tgz#84da0d2a0d0dee181281545271e0d65cf6fab1ef"
+  integrity sha512-pZ0FrWZXlvQOATlp14lRSk1N9GkeJ3vLIwOcUoo3ICQn9WNR4rWoNi81pbn6sC1iYUy7QPqNzI3+AEzokwyVcA==
+
 esbuild@^0.12.20, esbuild@^0.12.6:
   version "0.12.21"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.21.tgz#7ff32a9ac73ce4310f9cb61ea4c3da9756570d46"
@@ -10510,7 +10520,7 @@ postcss@^7.0.36:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.10, postcss@^8.3.0:
+postcss@^8.1.10, postcss@^8.3.0, postcss@^8.3.6:
   version "8.3.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
   integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
@@ -11405,7 +11415,7 @@ rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.56.3:
+rollup@^2.38.5, rollup@^2.56.3:
   version "2.56.3"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.56.3.tgz#b63edadd9851b0d618a6d0e6af8201955a77aeff"
   integrity sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==
@@ -12914,6 +12924,18 @@ vinyl@^2.2.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+vite@^2.5.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.8.tgz#e2da21540411e91cb1c4a62e133c652a787cf116"
+  integrity sha512-2GRsLrmMsFI0u31WTtkGbKvEIJO4I9qDltma3QiyDJEk14IzjM35OCElAFHFs2VlL7h2qX5AdHbwfEhnmwhQgw==
+  dependencies:
+    esbuild "^0.12.17"
+    postcss "^8.3.6"
+    resolve "^1.20.0"
+    rollup "^2.38.5"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 void-elements@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"