feat: add examples

meadmin-cn · Sep 14, 2020 · 2c5a86b · 2c5a86b
1 parent 4bfab46
commit 2c5a86b
Show file tree

Hide file tree

Showing 25 changed files with 4,679 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,3 @@ node_modules
 .DS_Store
 dist
 es
-examples
diff --git a/README.md b/README.md
@@ -16,6 +16,26 @@ and
 
 `yarn add vite-plugin-mock -D` or `npm i vite-plugin-mock -D`
 
+**Run Example**
+
+```bash
+
+# ts example
+cd ./examples/ts-examples
+
+yarn install
+
+yarn serve
+
+# js example
+
+cd ./examples/js-examples
+
+yarn install
+
+yarn serve
+```
+
 ## Usage
 
 **Development environment**

diff --git a/examples/js-example/.gitignore b/examples/js-example/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
diff --git a/examples/js-example/index.html b/examples/js-example/index.html
@@ -0,0 +1,13 @@
+<!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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/js-example/mock/role.js b/examples/js-example/mock/role.js
@@ -0,0 +1,17 @@
+export default [
+  {
+    url: '/api/getRoleById',
+    method: 'get',
+    response: ({ query }) => {
+      console.log('id>>>>>>>>', query.id);
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          roleName: 'admin',
+          roleValue: 'admin',
+        },
+      };
+    },
+  },
+];
diff --git a/examples/js-example/mock/user.js b/examples/js-example/mock/user.js
@@ -0,0 +1,14 @@
+export default [
+  {
+    url: '/api/createUser',
+    method: 'post',
+    response: ({ body }) => {
+      console.log('body>>>>>>>>', body);
+      return {
+        code: 0,
+        message: 'ok',
+        data: null,
+      };
+    },
+  },
+];
diff --git a/examples/js-example/package.json b/examples/js-example/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "ts-example",
+  "version": "0.0.0",
+  "scripts": {
+    "serve": "cross-env NODE_ENV=development vite",
+    "build": "cross-env NODE_ENV=production vite build "
+  },
+  "dependencies": {
+    "axios": "^0.20.0",
+    "mockjs": "^1.1.0",
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-rc.1",
+    "vite": "^1.0.0-rc.1",
+    "vite-plugin-mock": "^1.0.2"
+  }
+}
diff --git a/examples/js-example/public/favicon.ico b/examples/js-example/public/favicon.ico
diff --git a/examples/js-example/src/App.vue b/examples/js-example/src/App.vue
@@ -0,0 +1,34 @@
+<template>
+  <button @click="getRoleById"> getRoleById</button>
+  <br />
+  <button @click="createUser"> createUser</button>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import axios from 'axios';
+  export default defineComponent({
+    name: 'App',
+    setup() {
+      const getRoleById = () => {
+        axios.get('/api/getRoleById', { params: { id: 1 } }).then((res) => {
+          console.log(res);
+        });
+      };
+      const createUser = () => {
+        axios
+          .post('/api/createUser', {
+            name: 'vben',
+            gender: 'man',
+          })
+          .then((res) => {
+            console.log(res);
+          });
+      };
+      return {
+        getRoleById,
+        createUser,
+      };
+    },
+  });
+</script>
diff --git a/examples/js-example/src/main.js b/examples/js-example/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+// import { setupProdMockServer } from './mockProdServer';
+
+createApp(App).mount('#app');
+
+// production mock server
+// if (process.env.NODE_ENV === 'production') {
+//   console.log(111);
+//   setupProdMockServer();
+// }
diff --git a/examples/js-example/src/mockProdServer.js b/examples/js-example/src/mockProdServer.js
@@ -0,0 +1,7 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+import roleMock from '../mock/role';
+import userMock from '../mock/user';
+
+export function setupProdMockServer() {
+  createProdMockServer([...roleMock, ...userMock]);
+}
diff --git a/examples/js-example/vite.config.js b/examples/js-example/vite.config.js
@@ -0,0 +1,13 @@
+import { createMockServer } from 'vite-plugin-mock';
+
+const config = {
+  plugins: [
+    createMockServer({
+      // close support .ts file
+      supportTs: false,
+      // default
+      mockPath: 'mock',
+    }),
+  ],
+};
+export default config;