axios configuration finished

Author: imtomq

.env.development

@@ -1,2 +1 @@
-VUE_APP_DEVELOPMENT=DEVELOPMENT
-VUE_APP_MODE=DEVELOPMENT
+VUE_APP_API=https://vitejs-vite-t9mch8--3001.local.webcontainer.io/

.env.production

@@ -1,2 +0,0 @@
-VUE_APP_PRODUCTION=PRODUCTION
-VUE_APP_MODE=PRODUCTION

README.md

@@ -1,24 +1 @@
-# vue3-router
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Working...

db.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

document.txt

@@ -2,4 +2,6 @@ https://vuejs.org/guide/essentials/component-basics.html#dynamic-components
 https://vuejs.org/guide/built-ins/transition.html#javascript-hooks
 https://vuejs.org/guide/built-ins/keep-alive.html
 https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
-https://router.vuejs.org/guide/advanced/lazy-loading.html#with-vite
+https://router.vuejs.org/guide/advanced/lazy-loading.html#with-vite
+
+https://skirtles-code.github.io/vue-examples/patterns/global-properties.html

package.json

@@ -7,9 +7,11 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
-    "json-server": "json-server --w --p 3002 ./db/db.json"
+    "frontend": "http-server",
+    "backend": "json-server -w db.json"
   },
   "dependencies": {
+    "axios": "^1.1.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.0.13"

src/App.vue

@@ -8,7 +8,22 @@
   <router-view></router-view>
 </template>
 <script>
+import { useHttp } from '@/services/http.js';
 export default {
   name: 'MyApp',
+  setup() {
+    const http = useHttp();
+
+    async function fetchData() {
+      const response = await http.get('/posts/');
+      console.log(response);
+    }
+    return {
+      fetchData,
+    };
+  },
+  created() {
+    this.fetchData();
+  },
 };
 </script>

src/main.js

@@ -1,15 +1,17 @@
 import { createApp } from 'vue';
 
-import router from './router';
-import './main.css';
-
 import App from './App.vue';
 import QButton from '@/components/QButton.vue';
 
+import './main.css';
+import router from './router';
+import { plugin } from '@/services/http.js';
+
 const app = createApp(App);
 
 app.use(router);
+app.use(plugin);
+
 app.component('q-button', QButton);
-app.mount('#app');
 
-// createApp(App).use(router).mount('#app');
+app.mount('#app');

src/services/http.js

@@ -0,0 +1,36 @@
+import { inject } from 'vue';
+import axios from 'axios';
+
+const baseURL =
+  process.env.NODE_ENV === 'development' ? process.env.VUE_APP_API : '';
+const injectionKey = Symbol('$http');
+
+export const useHttp = () => inject(injectionKey);
+
+export const plugin = {
+  install(app) {
+    const instance = axios.create({
+      baseURL,
+    });
+    instance.interceptors.request.use(
+      function (config) {
+        return config;
+      },
+      function (error) {
+        return Promise.reject(error);
+      }
+    );
+
+    instance.interceptors.response.use(
+      function (response) {
+        return response;
+      },
+      function (error) {
+        return Promise.reject(error);
+      }
+    );
+    app.provide(injectionKey, instance);
+
+    app.config.globalProperties.$http = instance;
+  },
+};

src/untils/example

@@ -0,0 +1 @@
+.