<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <hello-world msg="Hello Vue 3 + Vite" >111</hello-world>
  <element-plus-use></element-plus-use>
  <element-plus-form></element-plus-form>
  <router-view></router-view>
</template>

<script setup>

setTimeout(()=>{
  const el = document.documentElement
  el.setAttribute("data-theme","dark")

  console.log(getComputedStyle(el).getPropertyValue(`--el-color-primary`))
  el.style.setProperty("--el-color-primary", "red");
},5000)
import { ref,provide, onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'
import helloWorld from './components/HelloWorld.vue'
import elementPlusUse from '@/components/element-plus-use.vue'
import elementPlusForm from '@/components/element-plus-form.vue'
//响应式provide ，如果改动inject里面的数据也会改动，如果非响应就不会改动
 const location = ref('North Pole')
  const geolocation = reactive({
    longitude: 90,
    latitude: 135
  })
  const updateLocation = () => {
    location.value = 'South Pole'
  }
  provide('location', readonly(location))
  provide('geolocation', readonly(geolocation))
  provide('updateLocation', updateLocation)

// console.log($t('zh.serviceshop'));

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--font-color);
  margin-top: 60px;
}
</style>
