封装方法，搭建项目

src/App.vue

@@ -1,9 +1,11 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+  <div>
+    <nav>
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </nav>
+    <router-view />
+  </div>
 </template>
 
 <style>

src/api/test.js

@@ -0,0 +1,14 @@
+import { getAxios, postAxios } from '@/utils/axios.js'
+
+export function apiGetListXX(data) {
+    return postAxios({ url: '/cgi-bin/draft/batchget', data })
+}
+export function apiAddXX(data) {
+    return postAxios({ url: '/cgi-bin/draft/add', data })
+}
+export function apiGetCart() {
+    return getAxios({ url: '/cgi-bin/cart/latest' })
+}
+export function test() { 
+    return getAxios({ url: 'https://share.gdaiyy.com/zhihui_config.json' })
+}

src/components/HelloWorld.vue

@@ -11,7 +11,6 @@
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
     </ul>
     <h3>Essential Links</h3>
     <ul>

src/stores/notice.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const noticeStore = defineStore('noticeNum', {
+	state: () => {
+		return { data: { num: 0 } };
+	},
+	actions: {
+		increment() {
+			this.data.num++;
+		},
+	},
+});

src/utils/axios.js

@@ -0,0 +1,85 @@
+/**
+ * axios请求封装
+ * https://rudon.blog.csdn.net/
+ */
+import axios from 'axios'
+import { getToken, setToken, removeToken } from '@/utils/storage'
+// 请求地址前缀
+let baseURL = ''
+if (process.env.NODE_ENV === 'production') {
+    // 生产环境
+    baseURL = ""
+} else {
+    // 开发环境
+    baseURL = ""
+}
+
+// 请求拦截器
+axios.interceptors.request.use((config) => {
+    if (getToken()) {
+        config.headers['token'] = getToken();
+    }
+    // 请求超时时间 - 毫秒
+    config.timeout = 10000
+    config.baseURL = baseURL
+    // 自定义Content-type
+    // config.headers['Content-type'] = 'application/json'
+    return config;
+}, (error) => {
+    return Promise.reject(error)
+})
+
+// 响应拦截器
+axios.interceptors.response.use((response) => {
+    /**
+     * 可添加请求响应的处理逻辑, 例如接口自定义的response.data.code不是200代表失败。
+     * 错误的话 return Promise.reject(response)
+     * 正确的话 return response
+     */
+    return response
+}, (error) => {
+    // 可添加请求失败后的处理逻辑
+    return Promise.reject(error)
+})
+
+
+
+// axios的get请求
+// 导出一个函数，用于发送GET请求
+// 返回一个Promise对象
+export function getAxios({ url, params }) {
+    // 使用axios发送GET请求
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+            params
+            // 请求成功，将返回的数据传递给resolve函数
+        }).then(res => {
+            resolve(res.data)
+            // 请求失败，将错误信息传递给reject函数
+        }).catch(err => {
+            console.log(err)
+            reject(err)
+        })
+    })
+}
+
+// axios的post请求
+export function postAxios({ url, data }) {
+    return new Promise((resolve, reject) => {
+        axios.post(
+            url,
+            data,
+            {
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                }
+            }
+        ).then(res => {
+            resolve(res.data)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
+export default axios

src/utils/storage.js

@@ -0,0 +1,11 @@
+export default {
+	getToken() {
+		return localStorage.getItem('token');
+	},
+	setToken(token) {
+		localStorage.setItem('token', token);
+	},
+	removeToken() {
+		localStorage.removeItem('token');
+	}
+}

src/views/HomeView.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
-<script>
+<script setup>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
+console.log(process.env.VUE_APP_API_URL)
+
 </script>