vue-amazing-ui上手

官方网站：vue-amazing-ui

依赖按照

// pnpm安装
pnpm add vue-amazing-ui
//npm安装
npm install vue-amazing-ui
//yarn安装
yarn add vue-amazing-ui
//bun安装
bun add vue-amazing-ui

全局完整注册（不推荐）

失去 tree-shaking 的能力，打包后有冗余代码

import { createApp } from 'vue'
import App from './App.vue'
import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

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

全局部分注册

全局或局部引入部分组件，都只有导入的组件才会被打包

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'

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

局部注册组件

这种情况下，也只有导入的组件才会被打包

<script setup lang="ts">
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用自动按需引入）

import { createApp } from 'vue'
import App from './App.vue'
import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式

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

使用上手

npm install date-fns --save
// or
yarn add date-fns

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueAmazingUI from "vue-amazing-ui";
import "vue-amazing-ui/css";
const app = createApp(App);
app.use(VueAmazingUI);
app.use(router).mount("#app");

// index.vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { format } from 'date-fns'
const dateTimeValue = ref(format(new Date(), 'yyyy-MM-dd HH:mm:ss'))
watchEffect(() => {
  console.log('dateTimeValue', dateTimeValue.value)
})
</script>
<template>
  <DatePicker
    :width="240"
    v-model="dateTimeValue"
    format="yyyy-MM-dd HH:mm:ss"
    show-time
    enable-seconds
    placeholder="请选择日期时间"
  />
</template>