first commit

2022-01-25 18:30:11 +08:00
commit e2edaec30a
22 changed files with 3321 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,11 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
--- a/index.html
+++ b/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.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "learn-new",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^0.25.0",
+    "dayjs": "^1.10.7",
+    "element-plus": "^1.3.0-beta.8",
+    "lodash": "^4.17.21",
+    "qs": "^6.10.3",
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.12",
+    "@vitejs/plugin-vue": "^2.0.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2",
+    "vue-tsc": "^0.29.8",
+    "vuex": "^4.0.2"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/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>
--- a/src/api/base-service.ts
+++ b/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;
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -0,0 +1,4 @@
+* {
+  margin: 0;
+  padding: 0;
+}
--- a/src/components/HelloWorld.vue
+++ b/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>
--- a/src/env.d.ts
+++ b/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
+}
--- a/src/main.ts
+++ b/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");
--- a/src/router/index.ts
+++ b/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;
--- a/src/services/home.ts
+++ b/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",
+  });
+}
--- a/src/store/index.ts
+++ b/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: {},
+});
--- a/src/utils/other.ts
+++ b/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;
--- a/src/utils/request/request.ts
+++ b/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;
--- a/src/views/index.vue
+++ b/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>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
+    "paths": {
+      // 用于设置模块名到基于baseUrl的路径映射
+      "@/*": ["src/*"]
+    },
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,39 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 16:22:24
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-01-25 18:07:10
+ */
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+// ui组件自动导入
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import { resolve } from "path";
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"), // 路径别名
+    },
+    extensions: [".js", ".json", ".ts"], // 使用路径别名时想要省略的后缀名，可以自己 增减
+  },
+  server: {
+    host: "0.0.0.0",
+    port: 8888,
+    // 是否开启 https
+    https: false,
+  },
+});