feat(project): local dev environment (#3463)

- Add vite config for local dev
2026-03-13 07:51:17 +08:00 · 2021-09-17 16:42:20 +08:00
parent 0636e1e240
commit 477519a52e
13 changed files with 121 additions and 14 deletions
--- 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
--- 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,
--- 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",
--- 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",
--- 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",
--- 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",
--- 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",
--- 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",
--- a/play/index.html
+++ 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>
--- a/play/main.ts
+++ 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')
--- a/play/play.vue
+++ 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>
--- a/play/vite.config.js
+++ b/play/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})
--- 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"