update vue3

2025-09-27 22:52:40 +00:00 · 2025-03-28 23:23:07 +08:00
parent fb0656fe14
commit 03e023cbc4
18 changed files with 477 additions and 514 deletions
--- a/config.js
+++ b/config.js
@@ -1,5 +1,5 @@
 // 应用全局配置
-module.exports = {
+export default {
  baseUrl: 'https://vue.ruoyi.vip/prod-api',
  // baseUrl: 'http://localhost:8080',
  // 应用信息
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+</head>
+
+<body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+</body>
+
+</html>
--- a/main.js
+++ b/main.js
@@ -1,17 +1,14 @@
-import Vue from 'vue'
+import { createSSRApp } from 'vue'
 import App from './App'
 import store from './store' // store
-import plugins from './plugins' // plugins
+import { install } from './plugins' // plugins
 import './permission' // permission
-Vue.use(plugins)

-Vue.config.productionTip = false
-Vue.prototype.$store = store
-
-App.mpType = 'app'
-
-const app = new Vue({
-  ...App
-})
-
-app.$mount()
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(store)
+  install(app)
+  return {
+    app
+  }
+}
--- a/manifest.json
+++ b/manifest.json
@@ -53,7 +53,7 @@
        },
        "usingComponents" : true
    },
-    "vueVersion" : "2",
+    "vueVersion" : "3",
    "h5" : {
        "template" : "static/index.html",
        "devServer" : {
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -38,86 +38,88 @@
  </view>
 </template>

-<script>
+<script setup>
  import { getCodeImg } from '@/api/login'
+  import store from '@/store'
+  import { ref, getCurrentInstance } from "vue"

-  export default {
-    data() {
-      return {
-        codeUrl: "",
-        captchaEnabled: true,
+  const { proxy } = getCurrentInstance()
+  const globalConfig = getApp().globalData.config
+  const codeUrl = ref("")
+  // 验证码开关
+  const captchaEnabled = ref(true)
  // 用户注册开关
-        register: false,
-        globalConfig: getApp().globalData.config,
-        loginForm: {
+  const register = ref(false)
+  const loginForm = ref({
    username: "admin",
    password: "admin123",
    code: "",
    uuid: ""
-        }
-      }
-    },
-    created() {
-      this.getCode()
-    },
-    methods: {
+  })
+
  // 用户注册
-      handleUserRegister() {
-        this.$tab.redirectTo(`/pages/register`)
-      },
+  function handleUserRegister() {
+    proxy.$tab.redirectTo(`/pages/register`)
+  }
+
  // 隐私协议
-      handlePrivacy() {
-        let site = this.globalConfig.appInfo.agreements[0]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
+  function handlePrivacy() {
+    let site = globalConfig.appInfo.agreements[0]
+    proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+  }
+
  // 用户协议
-      handleUserAgrement() {
-        let site = this.globalConfig.appInfo.agreements[1]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
+  function handleUserAgrement() {
+    let site = globalConfig.appInfo.agreements[1]
+    proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+  }
+
  // 获取图形验证码
-      getCode() {
+  function getCode() {
    getCodeImg().then(res => {
-          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
-          if (this.captchaEnabled) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.loginForm.uuid = res.uuid
+      captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        if (captchaEnabled.value) {
+          codeUrl.value = 'data:image/gif;base64,' + res.img
+          loginForm.value.uuid = res.uuid
        }
    })
-      },
+  }
+
  // 登录方法
-      async handleLogin() {
-        if (this.loginForm.username === "") {
-          this.$modal.msgError("请输入账号")
-        } else if (this.loginForm.password === "") {
-          this.$modal.msgError("请输入密码")
-        } else if (this.loginForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
+  async function handleLogin() {
+    if (loginForm.value.username === "") {
+      proxy.$modal.msgError("请输入账号")
+    } else if (loginForm.value.password === "") {
+      proxy.$modal.msgError("请输入密码")
+    } else if (loginForm.value.code === "" && captchaEnabled.value) {
+      proxy.$modal.msgError("请输入验证码")
    } else {
-          this.$modal.loading("登录中，请耐心等待...")
-          this.pwdLogin()
+      proxy.$modal.loading("登录中，请耐心等待...")
+      pwdLogin()
    }
-      },
+  }
+
  // 密码登录
-      async pwdLogin() {
-        this.$store.dispatch('Login', this.loginForm).then(() => {
-          this.$modal.closeLoading()
-          this.loginSuccess()
+  async function pwdLogin() {
+    store.dispatch('Login', loginForm.value).then(() => {
+      proxy.$modal.closeLoading()
+      loginSuccess()
    }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
+      if (captchaEnabled.value) {
+        getCode()
      }
    })
-      },
+  }
+
  // 登录成功后，处理函数
-      loginSuccess(result) {
+  function loginSuccess(result) {
    // 设置用户信息
-        this.$store.dispatch('GetInfo').then(res => {
-          this.$tab.reLaunch('/pages/index')
+    store.dispatch('GetInfo').then(res => {
+      proxy.$tab.reLaunch('/pages/index')
    })
  }
-    }
-  }
+
+  getCode()
 </script>

 <style lang="scss" scoped>
@@ -198,5 +200,4 @@
      }
    }
  }
-
 </style>
--- a/pages/mine/about/index.vue
+++ b/pages/mine/about/index.vue
@@ -43,15 +43,9 @@
  </view>
 </template>

-<script>
-  export default {
-    data() {
-      return {
-        url: getApp().globalData.config.appInfo.site_url,
-        version: getApp().globalData.config.appInfo.version
-      }
-    }
-  }
+<script setup>
+  const url = getApp().globalData.config.appInfo.site_url
+  const version = getApp().globalData.config.appInfo.version
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/help/index.vue
+++ b/pages/mine/help/index.vue
@@ -15,11 +15,12 @@
  </view>
 </template>

-<script>
-  export default {
-    data() {
-      return {
-        list: [{
+<script setup>
+  import { ref, getCurrentInstance } from "vue"
+  
+  const { proxy } = getCurrentInstance()
+
+  const list = ref([{
    icon: 'iconfont icon-github',
    title: '若依问题',
    childList: [{
@@ -49,15 +50,10 @@
      title: '如何修改登录密码？',
      content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
    }]
-          }
-        ]
-      }
-    },
-    methods: {
-      handleText(item) {
-        this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
-      }
-    }
+  }])
+
+  function handleText(item) {
+    proxy.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
  }
 </script>

--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -76,51 +76,50 @@
  </view>
 </template>

-<script>
-  export default {
-    data() {
-      return {
-        name: this.$store.state.user.name,
-        version: getApp().globalData.config.appInfo.version
+<script setup>
+  import store from '@/store'
+  import { computed , getCurrentInstance } from "vue"
+
+  const { proxy } = getCurrentInstance()
+  const name = store.state.user.name
+  const version= getApp().globalData.config.appInfo.version
+  const avatar = computed(() => store.state.user.avatar)
+  const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50)
+
+  function handleToInfo() {
+    proxy.$tab.navigateTo('/pages/mine/info/index')
  }
-    },
-    computed: {
-      avatar() {
-        return this.$store.state.user.avatar
-      },
-      windowHeight() {
-        return uni.getSystemInfoSync().windowHeight - 50
+
+  function handleToEditInfo() {
+    proxy.$tab.navigateTo('/pages/mine/info/edit')
  }
-    },
-    methods: {
-      handleToInfo() {
-        this.$tab.navigateTo('/pages/mine/info/index')
-      },
-      handleToEditInfo() {
-        this.$tab.navigateTo('/pages/mine/info/edit')
-      },
-      handleToSetting() {
-        this.$tab.navigateTo('/pages/mine/setting/index')
-      },
-      handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
-      },
-      handleToAvatar() {
-        this.$tab.navigateTo('/pages/mine/avatar/index')
-      },
-      handleHelp() {
-        this.$tab.navigateTo('/pages/mine/help/index')
-      },
-      handleAbout() {
-        this.$tab.navigateTo('/pages/mine/about/index')
-      },
-      handleJiaoLiuQun() {
-        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
-      },
-      handleBuilding() {
-        this.$modal.showToast('模块建设中~')
+
+  function handleToSetting() {
+    proxy.$tab.navigateTo('/pages/mine/setting/index')
  }
+
+  function handleToLogin() {
+    proxy.$tab.reLaunch('/pages/login')
  }
+
+  function handleToAvatar() {
+    proxy.$tab.navigateTo('/pages/mine/avatar/index')
+  }
+      
+  function handleHelp() {
+    proxy.$tab.navigateTo('/pages/mine/help/index')
+  }
+      
+  function handleAbout() {
+    proxy.$tab.navigateTo('/pages/mine/about/index')
+  }
+      
+  function handleJiaoLiuQun() {
+    proxy.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
+  }
+      
+  function handleBuilding() {
+    proxy.$modal.showToast('模块建设中~')
  }
 </script>

--- a/pages/mine/info/edit.vue
+++ b/pages/mine/info/edit.vue
@@ -20,27 +20,27 @@
  </view>
 </template>

-<script>
+<script setup>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"
+  import { ref , getCurrentInstance } from "vue"
+  import { onReady } from  "@dcloudio/uni-app"

-  export default {
-    data() {
-      return {
-        user: {
+  const { proxy } = getCurrentInstance()
+  const user = ref({
    nickName: "",
    phonenumber: "",
    email: "",
    sex: ""
-        },
-        sexs: [{
+  })
+  const sexs = [{
    text: '男',
    value: "0"
  }, {
    text: '女',
    value: "1"
-        }],
-        rules: {
+  }]
+  const rules = ref({
    nickName: {
      rules: [{
        required: true,
@@ -65,30 +65,27 @@
        errorMessage: '请输入正确的邮箱地址'
      }]
    }
-        }
-      }
-    },
-    onLoad() {
-      this.getUser()
-    },
-    onReady() {
-      this.$refs.form.setRules(this.rules)
-    },
-    methods: {
-      getUser() {
+  })
+
+  function getUser() {
    getUserProfile().then(response => {
-          this.user = response.data
+      user.value = response.data
    })
-      },
-      submit(ref) {
-        this.$refs.form.validate().then(res => {
-          updateUserProfile(this.user).then(response => {
-            this.$modal.msgSuccess("修改成功")
+  }
+
+  function submit(ref) {
+    proxy.$refs.form.validate().then(res => {
+      updateUserProfile(user.value).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
      })
    })
  }
-    }
-  }
+
+  onReady(() => {
+    proxy.$refs.form.setRules(rules.value)
+  })
+
+  getUser()
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/info/index.vue
+++ b/pages/mine/info/index.vue
@@ -11,30 +11,23 @@
  </view>
 </template>

-<script>
+<script setup>
  import { getUserProfile } from "@/api/system/user"
+  import { ref, reactive } from "vue"

-  export default {
-    data() {
-      return {
-        user: {},
-        roleGroup: "",
-        postGroup: ""
-      }
-    },
-    onLoad() {
-      this.getUser()
-    },
-    methods: {
-      getUser() {
+  const user = ref({})
+  const roleGroup = ref("")
+  const postGroup = ref("")
+
+  function getUser() {
    getUserProfile().then(response => {
-          this.user = response.data
-          this.roleGroup = response.roleGroup
-          this.postGroup = response.postGroup
+      user.value = response.data
+      roleGroup.value = response.roleGroup
+      postGroup.value = response.postGroup
    })
  }
-    }
-  }
+
+  getUser()
 </script>

 <style lang="scss">
--- a/pages/mine/pwd/index.vue
+++ b/pages/mine/pwd/index.vue
@@ -15,18 +15,18 @@
  </view>
 </template>

-<script>
+<script setup>
  import { updateUserPwd } from "@/api/system/user"
+  import { ref, reactive , getCurrentInstance } from "vue"
+  import { onReady } from  "@dcloudio/uni-app"

-  export default {
-    data() {
-      return {
-        user: {
+  const { proxy } = getCurrentInstance()
+  const user = reactive({
    oldPassword: undefined,
    newPassword: undefined,
    confirmPassword: undefined
-        },
-        rules: {
+  })
+  const rules = ref({
    oldPassword: {
      rules: [{
        required: true,
@@ -37,40 +37,34 @@
      rules: [{
        required: true,
        errorMessage: '新密码不能为空',
-              },
-              {
+      }, {
        minLength: 6,
        maxLength: 20,
        errorMessage: '长度在 6 到 20 个字符'
-              }
-            ]
+      }]
    },
    confirmPassword: {
      rules: [{
        required: true,
        errorMessage: '确认密码不能为空'
      }, {
-                validateFunction: (rule, value, data) => data.newPassword === value,
+        validateFunction: (rule, value, data) => user.newPassword === value,
        errorMessage: '两次输入的密码不一致'
+      }]
    }
-            ]
-          }
-        }
-      }
-    },
-    onReady() {
-      this.$refs.form.setRules(this.rules)
-    },
-    methods: {
-      submit() {
-        this.$refs.form.validate().then(res => {
-          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
-            this.$modal.msgSuccess("修改成功")
+  })
+
+  onReady(() => {
+    proxy.$refs.form.setRules(rules.value)
+  })
+
+  function submit() {
+    proxy.$refs.form.validate().then(res => {
+      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
+        proxy.$modal.msgSuccess("修改成功")
      })
    })
  }
-    }
-  }
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/setting/index.vue
+++ b/pages/mine/setting/index.vue
@@ -30,32 +30,32 @@
  </view>
 </template>

-<script>
-  export default {
-    data() {
-      return {
-        windowHeight: uni.getSystemInfoSync().windowHeight
+<script setup>
+  import store from '@/store'
+  import { ref, computed , getCurrentInstance } from "vue"
+
+  const { proxy } = getCurrentInstance()
+  const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50)
+
+  function handleToPwd() {
+    proxy.$tab.navigateTo('/pages/mine/pwd/index')
  }
-    },
-    methods: {
-      handleToPwd() {
-        this.$tab.navigateTo('/pages/mine/pwd/index')
-      },
-      handleToUpgrade() {
-        this.$modal.showToast('模块建设中~')
-      },
-      handleCleanTmp() {
-        this.$modal.showToast('模块建设中~')
-      },
-      handleLogout() {
-        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-          this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
-            this.$tab.reLaunch('/pages/index')
+
+  function handleToUpgrade() {
+    proxy.$modal.showToast('模块建设中~')
+  }
+
+  function handleCleanTmp() {
+    proxy.$modal.showToast('模块建设中~')
+  }
+
+  function handleLogout() {
+    proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
+      store.dispatch('LogOut').then(() => {}).finally(()=>{
+        proxy.$tab.reLaunch('/pages/index')
      })
    })
  }
-    }
-  }
 </script>

 <style lang="scss" scoped>
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -35,80 +35,78 @@
  </view>
 </template>

-<script>
+<script setup>
  import { getCodeImg, register } from '@/api/login'
+  import { ref, getCurrentInstance } from "vue"

-  export default {
-    data() {
-      return {
-        codeUrl: "",
-        captchaEnabled: true,
-        globalConfig: getApp().globalData.config,
-        registerForm: {
+  const { proxy } = getCurrentInstance()
+  const globalConfig = getApp().globalData.config
+  const codeUrl = ref("")
+  // 验证码开关
+  const captchaEnabled = ref(true)
+  const registerForm = ref({
    username: "",
    password: "",
    confirmPassword: "",
    code: "",
    uuid: ""
-        }
-      }
-    },
-    created() {
-      this.getCode()
-    },
-    methods: {
+  })
+
  // 用户登录
-      handleUserLogin() {
-        this.$tab.navigateTo(`/pages/login`)
-      },
+  function handleUserLogin() {
+    proxy.$tab.navigateTo(`/pages/login`)
+  }
+
  // 获取图形验证码
-      getCode() {
+  function getCode() {
    getCodeImg().then(res => {
-          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
-          if (this.captchaEnabled) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.registerForm.uuid = res.uuid
+      captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        if (captchaEnabled.value) {
+          codeUrl.value = 'data:image/gif;base64,' + res.img
+          registerForm.value.uuid = res.uuid
      }
    })
-      },
-      // 注册方法
-      async handleRegister() {
-        if (this.registerForm.username === "") {
-          this.$modal.msgError("请输入您的账号")
-        } else if (this.registerForm.password === "") {
-          this.$modal.msgError("请输入您的密码")
-        } else if (this.registerForm.confirmPassword === "") {
-          this.$modal.msgError("请再次输入您的密码")
-        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
-          this.$modal.msgError("两次输入的密码不一致")
-        } else if (this.registerForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
-        } else {
-          this.$modal.loading("注册中，请耐心等待...")
-          this.register()
  }
-      },
+
+  // 注册方法
+  async function handleRegister() {
+    if (registerForm.value.username === "") {
+      proxy.$modal.msgError("请输入您的账号")
+    } else if (registerForm.value.password === "") {
+      proxy.$modal.msgError("请输入您的密码")
+    } else if (registerForm.value.confirmPassword === "") {
+      proxy.$modal.msgError("请再次输入您的密码")
+    } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
+      proxy.$modal.msgError("两次输入的密码不一致")
+    } else if (registerForm.value.code === "" && captchaEnabled.value) {
+      proxy.$modal.msgError("请输入验证码")
+    } else {
+      proxy.$modal.loading("注册中，请耐心等待...")
+      userRegister()
+    }
+  }
+
  // 用户注册
-      async register() {
-        register(this.registerForm).then(res => {
-          this.$modal.closeLoading()
+  async function userRegister() {
+    register(registerForm.value).then(res => {
+      proxy.$modal.closeLoading()
      uni.showModal({
        title: "系统提示",
-          	content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
+        content: "恭喜你，您的账号 " + registerForm.value.username + " 注册成功！",
        success: function (res) {
          if (res.confirm) {
-                uni.redirectTo({ url: `/pages/login` });
+            uni.redirectTo({ url: `/pages/login` })
          }
        }
      })
    }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
+      if (captchaEnabled.value) {
+        getCode()
      }
    })
  }
-    }
-  }
+
+  getCode()
 </script>

 <style lang="scss" scoped>
@@ -185,5 +183,4 @@
      }
    }
  }
-
 </style>
--- a/pages/work/index.vue
+++ b/pages/work/index.vue
@@ -74,35 +74,24 @@
  </view>
 </template>

-<script>
-  export default {
-    data() {
-      return {
-        current: 0,
-        swiperDotIndex: 0,
-        data: [{
-            image: '/static/images/banner/banner01.jpg'
-          },
-          {
-            image: '/static/images/banner/banner02.jpg'
-          },
-          {
-            image: '/static/images/banner/banner03.jpg'
-          }
-        ]
-      }
-    },
-    methods: {
-      clickBannerItem(item) {
+<script setup>
+  import { ref, getCurrentInstance } from "vue"
+
+  const { proxy } = getCurrentInstance()
+  const current = ref(0)
+  const swiperDotIndex = ref(0)
+  const data = ref([{ image: '/static/images/banner/banner01.jpg' }, { image: '/static/images/banner/banner02.jpg' }, { image: '/static/images/banner/banner03.jpg' }])
+
+  function clickBannerItem(item) {
    console.info(item)
-      },
-      changeSwiper(e) {
-        this.current = e.detail.current
-      },
-      changeGrid(e) {
-        this.$modal.showToast('模块建设中~')
  }
+
+  function changeSwiper(e) {
+    current.value = e.detail.current
  }
+
+  function changeGrid(e) {
+    proxy.$modal.showToast('模块建设中~')
  }
 </script>

--- a/plugins/index.js
+++ b/plugins/index.js
@@ -2,13 +2,11 @@ import tab from './tab'
 import auth from './auth'
 import modal from './modal'

-export default {
-  install(Vue) {
+export function install(app) {
  // 页签操作
-    Vue.prototype.$tab = tab
+  app.config.globalProperties.$tab = tab
  // 认证对象
-    Vue.prototype.$auth = auth
+  app.config.globalProperties.$auth = auth
  // 模态框对象
-    Vue.prototype.$modal = modal
-  }
+  app.config.globalProperties.$modal = modal
 }
--- a/store/index.js
+++ b/store/index.js
@@ -1,15 +1,11 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from "vuex"
 import user from '@/store/modules/user'
 import getters from './getters'

-Vue.use(Vuex)
-
-const store = new Vuex.Store({
+const store = createStore({
  modules: {
    user
  },
  getters
 })
-
 export default store
--- a/utils/request.js
+++ b/utils/request.js
@@ -29,12 +29,7 @@ const request = config => {
        header: config.header,
        dataType: 'json'
      }).then(response => {
-        let [error, res] = response
-        if (error) {
-          toast('后端接口连接异常')
-          reject('后端接口连接异常')
-          return
-        }
+        const res = response
        const code = res.data.code || 200
        const msg = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
--- a/utils/upload.js
+++ b/utils/upload.js
@@ -7,7 +7,7 @@ import { toast, showConfirm, tansParams } from '@/utils/common'
 let timeout = 10000
 const baseUrl = config.baseUrl

-const upload = config => {
+export default function upload(config) {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
@@ -67,4 +67,4 @@ const upload = config => {
  })
 }

-export default upload
+