vue生态依赖更新

auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

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

package.json

@@ -7,23 +7,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^0.27.2",
+    "axios": "^1.4.0",
-    "dayjs": "^1.11.4",
+    "dayjs": "^1.11.9",
-    "element-plus": "^2.2.10",
+    "element-plus": "^2.3.8",
-    "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.0.17",
+    "pinia": "^2.1.6",
-    "qs": "^6.11.0",
+    "qs": "^6.11.2",
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
-    "vue-router": "^4.1.2"
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@types/node": "^18.6.1",
+    "@types/node": "^18.17.1",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "sass": "^1.54.0",
+    "sass": "^1.64.2",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
-    "vite": "^3.0.3",
+    "unplugin-auto-import": "^0.16.6",
-    "vue-tsc": "^0.39.0",
+    "unplugin-vue-components": "^0.25.1",
-    "vuex": "^4.0.2"
+    "vite": "^4.4.7",
+    "vue-tsc": "^0.39.5"
   }
 }

src/App.vue

@@ -3,21 +3,16 @@
  * @Version: 2.0
  * @Author: Ruin 🍭
  * @Date: 2022-01-25 16:22:24
- * @LastEditors: 刘引
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @LastEditTime: 2022-03-10 10:55:38
+ * @LastEditTime: 2023-08-01 15:25:13
 -->
 
 <template>
-  <Header></Header>
   <router-view></router-view>
-  <Footer></Footer>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
-import Header from "@/components/Header.vue"
-import Footer from "@/components/Footer.vue"
-</script>
 
 <style>
-@import "./assets/scss/index.scss";
+@import './assets/scss/index.scss';
 </style>

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 baseURL
-let process: any;
+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.timeout = 6000 // 请求超时时间1分钟
-axios.defaults.baseURL = baseURL; // 你的接口地址
+axios.defaults.baseURL = baseURL // 你的接口地址
-axios.defaults.responseType = "json";
+axios.defaults.responseType = 'json'
-axios.defaults.withCredentials = false; //是否允许带cookie这些
+axios.defaults.withCredentials = false //是否允许带cookie这些
 /*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
  *喜好，我比较喜欢用这种方法，如下：
  */
 const Axios = axios.create({
   baseURL: baseURL, // 后台服务地址
   timeout: 60000, // 请求超时时间1分钟
-  responseType: "json",
+  responseType: 'json',
-  withCredentials: false, // 是否允许带cookie这些
+  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

src/components/Footer.vue

@@ -9,6 +9,5 @@
 <template>
   <div class="header-root">我是公共足部组件</div>
 </template>
-<script setup lang="ts">
+<script setup lang="ts"></script>
-</script>
 <style lang="scss" scoped></style>

src/components/header.vue

@@ -3,24 +3,18 @@
  * @Version: 2.0
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:15:28
- * @LastEditors: 刘引
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @LastEditTime: 2022-03-10 14:58:15
+ * @LastEditTime: 2023-08-01 15:45:21
 -->
 <template>
   <div class="root">我是公共头部组件</div>
 </template>
 <script setup lang="ts">
-import { computed, onBeforeMount } from 'vue';
+import { computed, onBeforeMount } from 'vue'
-import { useStore } from 'vuex';
-const store = useStore()
 
-
+onBeforeMount(() => {})
-onBeforeMount(() => {
-
-})
 computed(() => {
-  console.log(123);
+  console.log(123)
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style>

src/main.ts

@@ -3,20 +3,20 @@
  * @Version: 2.0
  * @Author: Ruin 🍭
  * @Date: 2022-01-25 16:22:24
- * @LastEditors: 刘引
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @LastEditTime: 2022-07-26 16:58:53
+ * @LastEditTime: 2023-08-01 15:54:28
  */
-import { createApp } from "vue";
+import { createApp } from 'vue'
-
+import router from './router/index' //引入vue-router
-import router from "./router/index"; //引入vue-router
+import App from './App.vue'
-import store from "./store/index";
-import App from "./App.vue";
 import { createPinia } from 'pinia'
-// import
+import Footer from '@/components/Footer.vue'
-import "normalize.css/normalize.css";
+import Header from '@/components/Header.vue'
-const app = createApp(App);
+import 'normalize.css/normalize.css'
-const pinia = createPinia()
+// 挂载到app上
-app.use(router); // 挂载到app上
+createApp(App)
-app.use(store); // 挂载到app上
+  .use(router)
-app.use(pinia)
+  .use(createPinia())
-app.mount("#app");
+  .component('Footer', Footer)
+  .component('Header', Header)
+  .mount('#app')

src/router/index.ts

@@ -6,30 +6,30 @@
  * @LastEditors: 刘引
  * @LastEditTime: 2022-03-11 14:26:24
  */
-import path from "node:path/win32";
+import path from 'node:path/win32'
-import { createRouter, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from 'vue-router'
 const routes = [
   {
-    path: "/",
+    path: '/',
-    component: () => import("@/views/home/index.vue"),
+    component: () => import('@/views/index.vue'),
     children: [
       {
-        path: "/",
+        path: '/',
-        component: import("@/views/home/index.vue"),
+        component: import('@/views/index.vue'),
-        children: [{ path: "/", component: import("@/views/home/index.vue") }],
+        children: [{ path: '/', component: import('@/views/index.vue') }]
-      },
+      }
-    ],
+    ]
     // redirect: "/index",
   },
   {
-    path: "/user",
+    path: '/user',
-    component: () => import("@/views/user/index.vue"),
+    component: () => import('@/views/user/index.vue')
-  },
+  }
-];
+]
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
+  routes
-});
+})
-export default router;
+export default router
 // 我感觉

src/store/index.ts

@@ -1,37 +1,35 @@
 /*
- * @Description: {{ByRuin}}
+ * @Author: 刘引 liu.yin.work@foxmail.com
- * @Version: 2.0
+ * @Date: 2023-08-01 13:46:06
- * @Author: Ruin 🍭
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @Date: 2022-01-25 17:00:37
+ * @LastEditTime: 2023-08-01 15:56:19
- * @LastEditors: 刘引
+ * @FilePath: \kthec-emss-web\src\pinia\index.js
- * @LastEditTime: 2022-07-26 16:38:41
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { createStore } from "vuex";
+import { defineStore } from 'pinia' // 定义容器
-export default createStore({
+
-  // 存放数据
+export let useMain = defineStore('useStore', {
-  state: {
+  /**
-    userInfo: {
+   * 存储全局状态
-      name: "testVueX",
+   * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
+   * 和 TS 类型推导
+   */
+  state: () => {
+    return {
+      count: 0,
+      list: [1, 2, 3, 4]
+    }
   },
-  },
+  /**
-  // 同步方法更改state中属性的状态
+   * 用来封装计算属性 有缓存功能  类似于computed
-  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中的数据做过滤等简单处理，相当于是计算属性
   getters: {},
-});
+  /**
+   * 编辑业务逻辑  类似于methods
+   */
+  actions: {
+    changeData(val: number) {
+      this.count = val + 10
+    }
+  }
+})

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",
+  baseURL: 'http://baidu.com'
-});
+})
-export default homeApi;
+export default homeApi

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>

src/views/user/index.vue

@@ -3,29 +3,22 @@
  * @Version: 2.0
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:11:06
- * @LastEditors: 刘引
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @LastEditTime: 2022-03-10 16:05:04
+ * @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 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 { computed } from 'vue'
+const changeData = () => {}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-</style>