<template>  
  <div class="block">
    <h1>安装</h1>
    <div>使用yarn安装</div>
    <highlightjs autodetect code="$ yarn add @mapcatch/ui" />
    <div>或者使用script标签全局引用</div>
    <highlightjs autodetect :code="code1" />
  </div>

  <div class="block">
    <h1>使用</h1>
    <div>在<code>main.js</code>中注册组件</div>
    <highlightjs autodetect :code="code2" />

    <div>在组件中使用</div>
    <highlightjs autodetect :code="code3" />
  </div>
  
</template>

<script setup>
const code1 = `<script type="text/javascript" src="catchui.min.js"\></script\>`
const code2 = `
  import { createApp } from "vue";
  import App from "./App.vue";
  import CatchUI from '@mapcatch/ui'
  import '@mapcatch/ui/dist/styles/catchui.css'

  const app = createApp(App);
  app.use(CatchUI);
  app.mount("#app");
`
const code3 = `
<template>
  <Slider v-model="value" range />
</template\>
<script setup>
  import { ref } from 'vue'
  const value = ref([20, 50])
</script\>
`
</script>

<style lang="less" scoped>
p{
  margin: 10px 0;
}
</style>