开发插件

开发自定义插件

src/services/demo.js (新建自定义插件)

// 插件是自包含的代码，通常向 Vue 添加全局级功能。
// 它可以是公开 install() 方法的 object，也可以是 function

export default {
  install(app, options)
  {
     //定义全局
     app.config.globalProperties.$demo = () => {
       return '自定义插件';
     }
  }
}

src/main.js (全局挂载)

//加载自定义插件
import demo from './services/demo'

const app = createApp(App)
    .use(demo)
    .mount('#app')

调用

<script setup>
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  //调用自定义插件
  console.log(proxy.$demo())
</script>

vue3-cookies

Vue中操作Cookie插件：https://www.npmjs.com/package/vue3-cookies

npm install vue3-cookies --save

yarn add vue3-cookies

路由守卫：src/main.js

import { useCookies } from "vue3-cookies";

// 添加路由守卫做判断是否有无登录
router.beforeEach(async(to,from,next) =>{
    if(to.meta.auth){
        const { cookies } = useCookies();
    }
})

使用

<script setup>
  import { useCookies } from "vue3-cookies";
  const { cookies } = useCookies();

  //获取cookie
  const LoginUser = ref(cookies.get("LoginUser"));

  //设置cookie
  cookies.set("LoginUser", result.data);

  //删除
  cookies.remove("LoginUser");
</script>