first commit

src/App.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 16:22:24
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:31:49
+-->
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/api/base-service.ts

@@ -0,0 +1,81 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:48:13
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:52:39
+ */
+/* 1.引入文件 */
+import axios from "axios"; //引入 axios库
+// @ts-ignore
+import qs from "qs"; //引入 node中自带的qs模块（数据格式转换）
+/* 2.全局默认配置 */
+let baseURL;
+let process: any;
+// 判断开发环境（一般用于本地代理）
+if (process.env.NODE_ENV === "development") {
+  // 开发环境
+  baseURL = "http://www.liulongbin.top:3006"; // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
+} else {
+  // 编译环境
+  if (process.env.type === "test") {
+    // 测试环境
+    baseURL = "http://www.liulongbin.top:3006";
+  } else {
+    // 正式环境
+    baseURL = "http://www.liulongbin.top:3006";
+  }
+}
+// 配置axios的属性
+axios.defaults.timeout = 6000; // 请求超时时间1分钟
+axios.defaults.baseURL = baseURL; // 你的接口地址
+axios.defaults.responseType = "json";
+axios.defaults.withCredentials = false; //是否允许带cookie这些
+/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
+ *喜好，我比较喜欢用这种方法，如下：
+ */
+const Axios = axios.create({
+  baseURL: baseURL, // 后台服务地址
+  timeout: 60000, // 请求超时时间1分钟
+  responseType: "json",
+  withCredentials: false, // 是否允许带cookie这些
+});
+/* 3.设置拦截器 */
+/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
+时定义的变量*/
+Axios.interceptors.request.use(
+  (config) => {
+    //发送请求前进行拦截
+    //  可在此处配置请求头信息
+    // config.headers["appkey"] = "...";
+    // config.headers["token"] = "...";
+    if (config.method == "post") {
+      /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
+设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
+换，会使得参数丢失，造成请求失败。*/
+      config.data = qs.stringify(config.data);
+    }
+    return config;
+  },
+  (error) => {
+    //console.log("错误的传参", 'fail');
+    return Promise.reject(error);
+  }
+);
+Axios.interceptors.response.use(
+  (res) => {
+    //请求响应后拦截
+    if (res.status == 200) {
+      // 对响应数据做些事
+      //alert("提交成功")
+      return Promise.resolve(res);
+    }
+    return res;
+  },
+  (error) => {
+    //alert("网络异常!") 404等问题可以在这里处理
+    return Promise.reject(error);
+  }
+);
+export default Axios;

src/assets/scss/index.scss

@@ -0,0 +1,4 @@
+* {
+  margin: 0;
+  padding: 0;
+}

src/components/HelloWorld.vue

@@ -0,0 +1,61 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 16:22:24
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 16:26:59
+-->
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    See
+    <code>README.md</code> for more information.
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

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
+}

src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import router from "./router/index"; //引入vue-router
+import store from "./store/index";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.use(router); // 挂载到app上
+app.use(store); // 挂载到app上
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,26 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 16:57:54
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:35:58
+ */
+import { createRouter, createWebHashHistory } from "vue-router";
+const routes = [
+  {
+    path: "/",
+    component: () => import("../views/index.vue"),
+    // redirect: "/index",
+  },
+  // {
+  //   path: "/index",
+  //   component: () => import("../views/index.vue"),
+  // },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+export default router;

src/services/home.ts

@@ -0,0 +1,47 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:42:57
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 18:04:29
+ */
+
+import Axios from "../api/base-service"; // 导入配置好的axios文件
+// 封装axios请求函数，并用export导出
+export function getInfo(datas: unknown) {
+  return Axios({
+    url: "/api.php?key=free&appid=0&msg=鹅鹅鹅",
+    method: "GET",
+    headers: {
+      "content-type": "application/json",
+    },
+    data: datas,
+  });
+}
+export function getInfoA(datas: unknown) {
+  return Axios({
+    url: "/api/getbooks",
+    method: "get",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded", //设置请求头请求格式form
+    },
+    data: datas,
+  });
+}
+export function getItem(datas: unknown) {
+  return Axios({
+    url: "/api/getItem",
+    method: "post",
+    headers: {
+      "Content-Type": "application/json", //设置请求头请求格式为json
+    },
+    data: datas,
+  });
+}
+export function getItemInfo(datas: unknown) {
+  return Axios({
+    url: "/api/getItemInfo" + datas,
+    method: "get",
+  });
+}

src/store/index.ts

@@ -0,0 +1,23 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:00:37
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:00:38
+ */
+import { createStore } from "vuex";
+export default createStore({
+  state: {
+    userInfo: {
+      name: "yk",
+    },
+  },
+  mutations: {
+    getUserInfo(state, name) {
+      state.userInfo.name = name;
+    },
+  },
+  actions: {},
+  getters: {},
+});

src/utils/other.ts

@@ -0,0 +1,13 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:45:05
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:47:27
+ */
+import axios from "axios";
+const otherApi = axios.create({
+  baseURL: "http://baidu.com",
+});
+export default otherApi;

src/utils/request/request.ts

@@ -0,0 +1,13 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:36:26
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 17:46:39
+ */
+import axios from "axios";
+const homeApi = axios.create({
+  baseURL: "http://baidu.com",
+});
+export default homeApi;

src/views/index.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 17:26:47
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 18:10:50
+-->
+<script setup lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+import { ref } from 'vue';
+
+const msg = ref('这是主页')
+
+</script>
+
+<template>
+  <div class="home">{{ msg }}</div>
+  <div class="content">
+    <img alt="Vue logo" src="../assets/logo.png" />
+    <HelloWorld msg="Vue 3 + TypeScript + Vite + volar + vscode +element-plus" />
+    <el-button>Default</el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>