feat: 添加按需导入、完整导入的demo示例

pure-admin · Oct 9, 2022 · a3b9443 · a3b9443
1 parent 0676f87
commit a3b9443
Show file tree

Hide file tree

Showing 21 changed files with 1,118 additions and 0 deletions.
diff --git a/playgrounds/auto-import-demo/.gitignore b/playgrounds/auto-import-demo/.gitignore
@@ -0,0 +1,14 @@
+.vite-ssg-temp
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+# lock
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+
+*.log
diff --git a/playgrounds/auto-import-demo/.npmrc b/playgrounds/auto-import-demo/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playgrounds/auto-import-demo/README.md b/playgrounds/auto-import-demo/README.md
@@ -0,0 +1,20 @@
+## 按需导入示例
+
+需要注意的是，[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 实现自动引入 `element-plus` 的方式，在结合 [@pureadmin/descriptions](https://github.com/xiaoxian521/pure-admin-descriptions) 使用时，需要手动引入 `ElDescriptions` 样式，代码如下
+
+```ts
+// main.ts
+import "element-plus/es/components/descriptions/style/css";
+import "element-plus/es/components/descriptions-item/style/css";
+```
+
+`@pureadmin/descriptions` 内置 `element-plus` 的 `Loading` 动画，按需引入时还需要加上下面这些代码
+
+```ts
+// main.ts
+import "element-plus/es/components/loading/style/css";
+
+import { vLoading } from "element-plus";
+
+app.directive("loading", vLoading);
+```
diff --git a/playgrounds/auto-import-demo/index.html b/playgrounds/auto-import-demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Auto-Import-Demo</title>
+  <!-- element css cdn, if you use custom theme, remove it. -->
+  <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
+    /> -->
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/playgrounds/auto-import-demo/package.json b/playgrounds/auto-import-demo/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "auto-import-demo",
+  "version": "1.1.1",
+  "scripts": {
+    "dev": "vite",
+    "serve": "vite",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@pureadmin/descriptions": "^1.1.1",
+    "element-plus": "^2.2.17",
+    "vue": "^3.2.40"
+  },
+  "devDependencies": {
+    "@types/node": "^18.8.3",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "unplugin-vue-components": "^0.22.8",
+    "vite": "^3.1.6"
+  }
+}
diff --git a/playgrounds/auto-import-demo/public/favicon.svg b/playgrounds/auto-import-demo/public/favicon.svg
diff --git a/playgrounds/auto-import-demo/src/App.vue b/playgrounds/auto-import-demo/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <PureDescriptions title="按需引入示例" :column="3" border :data="data" :columns="columns" :loading="loading" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const loading = ref({
+  load: true,
+})
+
+const columns = [{
+  label: "Name",
+  prop: "name",
+}, {
+  label: "Phone",
+  prop: "phone",
+}, {
+  label: "Place",
+  prop: "place",
+}]
+
+const data = ref([
+  {
+    name: "小明",
+    phone: "18100000000",
+    place: "China",
+  }
+])
+
+setTimeout(() => {
+  loading.value.load = false
+}, 1000)
+</script>
+
diff --git a/playgrounds/auto-import-demo/src/env.d.ts b/playgrounds/auto-import-demo/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/playgrounds/auto-import-demo/src/main.ts b/playgrounds/auto-import-demo/src/main.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+// If you want to use ElDescriptions, import it.
+import "element-plus/es/components/descriptions/style/css";
+import "element-plus/es/components/descriptions-item/style/css";
+
+import "element-plus/es/components/loading/style/css";
+
+import { vLoading } from "element-plus";
+
+import PureDescriptions from "@pureadmin/descriptions";
+
+const app = createApp(App);
+app.directive("loading", vLoading).use(PureDescriptions).mount("#app");
diff --git a/playgrounds/auto-import-demo/tsconfig.json b/playgrounds/auto-import-demo/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "~/*": ["src/*"]
+    },
+    "skipLibCheck": true,
+    "types": ["@pureadmin/descriptions/volar"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/playgrounds/auto-import-demo/vite.config.ts b/playgrounds/auto-import-demo/vite.config.ts
@@ -0,0 +1,35 @@
+import path from "path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+const pathSrc = path.resolve(__dirname, "src");
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~/": `${pathSrc}/`
+    }
+  },
+  server: {
+    host: "0.0.0.0"
+  },
+  plugins: [
+    vue(),
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ["vue", "md"],
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: "sass"
+        })
+      ],
+      dts: "src/components.d.ts"
+    })
+  ]
+});
diff --git a/playgrounds/whole-import-demo/README.md b/playgrounds/whole-import-demo/README.md
@@ -0,0 +1 @@
+## 完整导入示例
diff --git a/playgrounds/whole-import-demo/index.html b/playgrounds/whole-import-demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Whole-Import-Demo</title>
+  <!-- element css cdn, if you use custom theme, remove it. -->
+  <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
+    /> -->
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/playgrounds/whole-import-demo/package.json b/playgrounds/whole-import-demo/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "whole-import-demo",
+  "version": "1.1.1",
+  "scripts": {
+    "dev": "vite",
+    "serve": "vite",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@pureadmin/descriptions": "^1.1.1",
+    "element-plus": "^2.2.17",
+    "vue": "^3.2.40"
+  },
+  "devDependencies": {
+    "@types/node": "^18.8.3",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.6"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		shamefully-hoist=true
		strict-peer-dependencies=false