vue生态依赖更新

2023-08-01 15:58:34 +08:00
parent fd4dd1bf88
commit 40008c2c68
14 changed files with 1930 additions and 1159 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    Header: typeof import('./src/components/Header.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,23 +7,23 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "axios": "^0.27.2",
-    "dayjs": "^1.11.4",
-    "element-plus": "^2.2.10",
-    "lodash": "^4.17.21",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.9",
+    "element-plus": "^2.3.8",
    "normalize.css": "^8.0.1",
-    "pinia": "^2.0.17",
-    "qs": "^6.11.0",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.2"
+    "pinia": "^2.1.6",
+    "qs": "^6.11.2",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
-    "@types/node": "^18.6.1",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "sass": "^1.54.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.3",
-    "vue-tsc": "^0.39.0",
-    "vuex": "^4.0.2"
+    "@types/node": "^18.17.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.64.2",
+    "typescript": "^4.9.5",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.4.7",
+    "vue-tsc": "^0.39.5"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,21 +3,16 @@
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2022-01-25 16:22:24
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 10:55:38
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:25:13
 -->

 <template>
-  <Header></Header>
  <router-view></router-view>
-  <Footer></Footer>
 </template>

-<script setup lang="ts">
-import Header from "@/components/Header.vue"
-import Footer from "@/components/Footer.vue"
-</script>
+<script setup lang="ts"></script>

 <style>
-@import "./assets/scss/index.scss";
+@import './assets/scss/index.scss';
 </style>
--- a/src/api/base-service.ts
+++ b/src/api/base-service.ts
@@ -7,40 +7,40 @@
 * @LastEditTime: 2022-01-25 17:52:39
 */
 /* 1.引入文件 */
-import axios from "axios"; //引入 axios库
+import axios from 'axios' //引入 axios库
 // @ts-ignore
-import qs from "qs"; //引入 node中自带的qs模块（数据格式转换）
+import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
 /* 2.全局默认配置 */
-let baseURL;
-let process: any;
+let baseURL
+let process: any
 // 判断开发环境（一般用于本地代理）
-if (process.env.NODE_ENV === "development") {
+if (process.env.NODE_ENV === 'development') {
  // 开发环境
-  baseURL = "http://www.liulongbin.top:3006"; // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
+  baseURL = 'http://www.liulongbin.top:3006' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
 } else {
  // 编译环境
-  if (process.env.type === "test") {
+  if (process.env.type === 'test') {
    // 测试环境
-    baseURL = "http://www.liulongbin.top:3006";
+    baseURL = 'http://www.liulongbin.top:3006'
  } else {
    // 正式环境
-    baseURL = "http://www.liulongbin.top:3006";
+    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这些
+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这些
-});
+  responseType: 'json',
+  withCredentials: false // 是否允许带cookie这些
+})
 /* 3.设置拦截器 */
 /*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
 时定义的变量*/
@@ -50,32 +50,32 @@ Axios.interceptors.request.use(
    //  可在此处配置请求头信息
    // config.headers["appkey"] = "...";
    // config.headers["token"] = "...";
-    if (config.method == "post") {
+    if (config.method == 'post') {
      /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
 设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
 换，会使得参数丢失，造成请求失败。*/
-      config.data = qs.stringify(config.data);
+      config.data = qs.stringify(config.data)
    }
-    return config;
+    return config
  },
  (error) => {
    //console.log("错误的传参", 'fail');
-    return Promise.reject(error);
+    return Promise.reject(error)
  }
-);
+)
 Axios.interceptors.response.use(
  (res) => {
    //请求响应后拦截
    if (res.status == 200) {
      // 对响应数据做些事
      //alert("提交成功")
-      return Promise.resolve(res);
+      return Promise.resolve(res)
    }
-    return res;
+    return res
  },
  (error) => {
    //alert("网络异常!") 404等问题可以在这里处理
-    return Promise.reject(error);
+    return Promise.reject(error)
  }
-);
-export default Axios;
+)
+export default Axios
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -9,6 +9,5 @@
 <template>
  <div class="header-root">我是公共足部组件</div>
 </template>
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped></style>
+<script setup lang="ts"></script>
+<style lang="scss" scoped></style>
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -3,24 +3,18 @@
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2022-03-10 10:15:28
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 14:58:15
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:45:21
 -->
 <template>
  <div class="root">我是公共头部组件</div>
 </template>
 <script setup lang="ts">
-import { computed, onBeforeMount } from 'vue';
-import { useStore } from 'vuex';
-const store = useStore()
+import { computed, onBeforeMount } from 'vue'

-
-onBeforeMount(() => {
-
-})
+onBeforeMount(() => {})
 computed(() => {
-  console.log(123);
+  console.log(123)
 })
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,20 +3,20 @@
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2022-01-25 16:22:24
- * @LastEditors: 刘引
- * @LastEditTime: 2022-07-26 16:58:53
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:54:28
 */
-import { createApp } from "vue";
-
-import router from "./router/index"; //引入vue-router
-import store from "./store/index";
-import App from "./App.vue";
-import {createPinia} from 'pinia'
-// import
-import "normalize.css/normalize.css";
-const app = createApp(App);
-const pinia = createPinia()
-app.use(router); // 挂载到app上
-app.use(store); // 挂载到app上
-app.use(pinia)
-app.mount("#app");
+import { createApp } from 'vue'
+import router from './router/index' //引入vue-router
+import App from './App.vue'
+import { createPinia } from 'pinia'
+import Footer from '@/components/Footer.vue'
+import Header from '@/components/Header.vue'
+import 'normalize.css/normalize.css'
+// 挂载到app上
+createApp(App)
+  .use(router)
+  .use(createPinia())
+  .component('Footer', Footer)
+  .component('Header', Header)
+  .mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,30 +6,30 @@
 * @LastEditors: 刘引
 * @LastEditTime: 2022-03-11 14:26:24
 */
-import path from "node:path/win32";
-import { createRouter, createWebHashHistory } from "vue-router";
+import path from 'node:path/win32'
+import { createRouter, createWebHashHistory } from 'vue-router'
 const routes = [
  {
-    path: "/",
-    component: () => import("@/views/home/index.vue"),
+    path: '/',
+    component: () => import('@/views/index.vue'),
    children: [
      {
-        path: "/",
-        component: import("@/views/home/index.vue"),
-        children: [{ path: "/", component: import("@/views/home/index.vue") }],
-      },
-    ],
+        path: '/',
+        component: import('@/views/index.vue'),
+        children: [{ path: '/', component: import('@/views/index.vue') }]
+      }
+    ]
    // redirect: "/index",
  },
  {
-    path: "/user",
-    component: () => import("@/views/user/index.vue"),
-  },
-];
+    path: '/user',
+    component: () => import('@/views/user/index.vue')
+  }
+]

 const router = createRouter({
  history: createWebHashHistory(),
-  routes,
-});
-export default router;
+  routes
+})
+export default router
 // 我感觉
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,37 +1,35 @@
 /*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-01-25 17:00:37
- * @LastEditors: 刘引
- * @LastEditTime: 2022-07-26 16:38:41
+ * @Author: 刘引 liu.yin.work@foxmail.com
+ * @Date: 2023-08-01 13:46:06
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:56:19
+ * @FilePath: \kthec-emss-web\src\pinia\index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
-import { createStore } from "vuex";
-export default createStore({
-  // 存放数据
-  state: {
-    userInfo: {
-      name: "testVueX",
-    },
+import { defineStore } from 'pinia' // 定义容器
+
+export let useMain = defineStore('useStore', {
+  /**
+   * 存储全局状态
+   * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
+   * 和 TS 类型推导
+   */
+  state: () => {
+    return {
+      count: 0,
+      list: [1, 2, 3, 4]
+    }
  },
-  // 同步方法更改state中属性的状态
-  mutations: {
-    getUserInfo(state, name) {
-      state.userInfo.name = "我的值被改动";
-      console.log("vueX中的方法触发");
-    },
-    setAsyncInfo(state) {
-      state.userInfo.name = "setTimeOut";
-    },
-  },
-  // 异步调用mutations中的方法更改state状态 并不能直接更改
-  actions: {
-    setData(context) {
-      setTimeout(() => {
-        context.commit("setAsyncInfo");
-      }, 1000);
-    },
-  },
-  //state中的数据做过滤等简单处理，相当于是计算属性
+  /**
+   * 用来封装计算属性 有缓存功能  类似于computed
+   */
  getters: {},
-});
+  /**
+   * 编辑业务逻辑  类似于methods
+   */
+  actions: {
+    changeData(val: number) {
+      this.count = val + 10
+    }
+  }
+})
--- a/src/utils/request/request.ts
+++ b/src/utils/request/request.ts
@@ -6,8 +6,8 @@
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-25 17:46:39
 */
-import axios from "axios";
+import axios from 'axios'
 const homeApi = axios.create({
-  baseURL: "http://baidu.com",
-});
-export default homeApi;
+  baseURL: 'http://baidu.com'
+})
+export default homeApi
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <Header></Header>
+  <div>根组件{{ store.count }}</div>
+  <Footer></Footer>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted, watch } from 'vue'
+import { useMain } from '@/store'
+const store = useMain()
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -3,29 +3,22 @@
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2022-03-10 10:11:06
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 16:05:04
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:45:57
 -->
 <template>
  <div class="root-home">
    <news></news>
    <el-button @click="changeData()">更改值了</el-button>
    <h1>写一点demo玩一玩</h1>
-    {{ res }}
  </div>
 </template>

 <script setup lang="ts">
-import news from "./components/news.vue"
-import { useStore } from 'vuex';
-import { computed } from "vue";
-const store = useStore()
-let res: any = computed(() => store.state.userInfo.name)
-const changeData = () => {
-  store.dispatch('setData')
-}
+import news from './components/news.vue'

+import { computed } from 'vue'
+const changeData = () => {}
 </script>

-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>