### Basic Tree Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/tree/TEMPLATE.md

Demonstrates the fundamental usage of the Tree component with basic data. No specific setup is required beyond importing the component.

```vue
<template>
  <a-tree :data="data" />
</template>

<script lang="ts" setup>
const data = [
  {
    key: '0-0',
    title: 'Trunk 1',
    children: [
      {
        key: '0-0-0',
        title: 'Leaf 1-1',
      },
      {
        key: '0-0-1',
        title: 'Leaf 1-2',
      },
    ],
  },
  {
    key: '0-1',
    title: 'Trunk 2',
    children: [
      {
        key: '0-1-0',
        title: 'Leaf 2-1',
      },
    ],
  },
];
</script>

```

--------------------------------

### Start Development Server

Source: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.zh-CN.md

Start the development server to preview the site.

```bash
pnpm run start
```

--------------------------------

### Basic Transfer Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/transfer/__demo__/basic.md

This snippet shows the fundamental setup for the Transfer component. It includes defining the data source and the initial selected values.

```vue
<template>
  <a-transfer :data="data" :default-value="value" />
</template>

<script setup lang="ts">
const data = Array(8)
  .fill(undefined)
  .map((_, index) => ({
    value: `option${index + 1}`,
    label: `Option ${index + 1}`,
  }));
const value = ['option1', 'option3', 'option5'];
</script>
```

--------------------------------

### Start Vite Server for Development

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-scripts/README.md

Use `dev:site` to start the Vite server for site development.

```bash
arco-vue-scripts dev:site
```

--------------------------------

### Start Development Server

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/start.en-US.md

Navigate into the newly created project directory and start the development server. Open your browser to localhost:3000 to view the application.

```bash
cd hello-arco-pro

npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.zh-CN.md

Install all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Import and Configure Store

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/state-management.zh-CN.md

Create the Vuex store by importing necessary modules and defining the root state and store types. This example demonstrates the basic setup for creating a typed Vuex store.

```typescript
// store/index.ts
//此处示例，只保留关键语句。具体参见pro项目。
import {
  createStore,
  useStore as VuexUseStore,
  Store as VuexStore,
} from 'vuex';
import { RootState, UserStateTypes } from './interface';
import { UserStoreModuleTypes } from './modules/interface';

import modules from './modules/index';

export type StoreModules = {
  user: UserStoreModuleTypes;
};
export interface StateModuler {
  user: UserStateTypes;
}
export type Store = UserStoreModuleTypes<Pick<StoreModules, 'user'>>
```

--------------------------------

### Install Dependencies

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/README.md

Run this command to install project dependencies using Yarn or npm.

```bash
yarn # or npm install
```

--------------------------------

### Start Local Development

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/README.md

Execute this command to start the local development environment for Arco Design Vue.

```bash
npm run start
```

--------------------------------

### Start Storybook

Source: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.zh-CN.md

Start Storybook for component debugging. This is optional as components can also be debugged on the official website.

```bash
pnpm run storybook
```

--------------------------------

### Basic Calendar Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/calendar/TEMPLATE.md

Demonstrates the basic setup and rendering of the Calendar component.

```vue
<template>
  <a-calendar />
</template>

<script lang="ts" setup">
import { ArcoCalendar as ACaendar } from '@arco-design/web-vue'
</script>

```

--------------------------------

### Install Arco CLI

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/start.en-US.md

Install the Arco CLI globally to manage project templates. This is a prerequisite for initializing a new project.

```bash
npm i -g arco-cli
```

--------------------------------

### Run Storybook

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue-storybook/README.md

Execute this command in your terminal to start the Storybook development server.

```bash
npm run storybook
```

--------------------------------

### Vue Basic Input Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/input/__demo__/basic.md

Shows how to use the A-Input component for basic text input with placeholders and clear functionality. Includes examples for both uncontrolled and controlled input states.

```vue
<template>
  <a-space>
    <a-input
      :style="{ width: '320px' }"
      placeholder="Please enter something"
      allow-clear
    />
    <a-input
      :style="{ width: '320px' }"
      default-value="content"
      placeholder="Please enter something"
      allow-clear
    />
  </a-space>
</template>
```

--------------------------------

### Drawer Placement Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/drawer/__demo__/position.md

Control the drawer's sliding direction using the 'placement' prop. This example allows users to select 'top', 'right', 'bottom', or 'left' via radio buttons.

```vue
<template>
  <a-radio-group v-model="position">
    <a-radio value="top">Top</a-radio>
    <a-radio value="right">Right</a-radio>
    <a-radio value="bottom">Bottom</a-radio>
    <a-radio value="left">Left</a-radio>
  </a-radio-group>
  <div :style="{ marginTop: '20px' }">
    <a-button type="primary" @click="handleClick">Open Drawer</a-button>
  </div>
  <a-drawer
    :width="340"
    :height="340"
    :visible="visible"
    :placement="position"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> Title </template>
    <div
      >You can customize modal body text by the current situation. This modal
      will be closed immediately once you press the OK button.</div
    >
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);
const position = ref('right');

const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
</script>
```

--------------------------------

### Basic Carousel Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/carousel/TEMPLATE.md

Demonstrates the fundamental usage of the Carousel component. Ensure you have the necessary imports for the Carousel and its items.

```vue
<template>
  <a-carousel>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
  </a-carousel>
</template>

<style>
.arco-carousel-content {
  text-align: center;
  color: var(--color-white);
  font-size: 24px;
  font-weight: bold;
  height: 180px;
  line-height: 180px;
}
</style>
```

--------------------------------

### Initialize Project

Source: https://github.com/arco-design/arco-design-vue/blob/main/CONTRIBUTING.zh-CN.md

Initialize the project workspaces.

```bash
pnpm run init
```

--------------------------------

### One Way Transfer Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/transfer/__demo__/one-way.md

Demonstrates a basic one-way transfer component setup. Use this when data only needs to move from one list to another without a return path.

```vue
<template>
  <a-transfer :data="data" :default-value="value" one-way />
</template>

<script setup lang="ts">
const data = Array(8)
  .fill(undefined)
  .map((_, index) => ({
    value: `option${index + 1}`,
    label: `Option ${index + 1}`,
  }));
const value = ['option1', 'option3', 'option5'];
</script>
```

--------------------------------

### Small Steps Component

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/steps/__demo__/small.md

Use the `small` prop to render the steps component in a compact size. This example shows a basic setup with three steps, highlighting the 'Processing' step.

```vue
<template>
  <div>
    <a-steps :current="2" small>
      <a-step>Succeeded</a-step>
      <a-step>Processing</a-step>
      <a-step>Pending</a-step>
    </a-steps>
    <a-divider />
    <div style="line-height: 140px; text-align: center; color: #C9CDD4; ">
      Step 2 Content
    </div>
  </div>
</template>
```

--------------------------------

### Basic Carousel Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/carousel/__demo__/basic.md

A standard carousel with a fixed size, a default starting slide, and an event handler for slide changes. This is useful for displaying a series of images or content in a rotating manner.

```vue
<template>
  <a-carousel
    :style="{
      width: '600px',
      height: '240px',
    }"
    :default-current="2"
    @change="handleChange"
  >
    <a-carousel-item v-for="image in images">
      <img
        :src="image"
        :style="{
          width: '100%',
        }"
      />
    </a-carousel-item>
  </a-carousel>
</template>

<script setup lang="ts">
const images = [
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
];
const handleChange = (value) => {
  console.log(value);
};
</script>
```

--------------------------------

### Build Document Site

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-scripts/README.md

Use `build:site` to build the documentation site.

```bash
arco-vue-scripts build:site
```

--------------------------------

### Select Technology Stack Prompt

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/start.en-US.md

This is an example of the interactive prompt for selecting the technology stack during project initialization. Use arrow keys to navigate and Enter to select.

```bash
? Please select the technology stack you wish to use
   React
 ❯ Vue
```

--------------------------------

### Space Component Alignment Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/space/__demo__/align.md

Demonstrates how to use the `align` prop of the Space component to control the alignment of its children. It includes a radio group to dynamically change the alignment between 'start', 'center', 'end', and 'baseline'.

```vue
<template>
  <div>
    <div style="marginBottom: 20px">
      <a-radio-group v-model="align" type="button">
        <a-radio value="start">start</a-radio>
        <a-radio value="center">center</a-radio>
        <a-radio value="end">end</a-radio>
        <a-radio value="baseline">baseline</a-radio>
      </a-radio-group>
    </div>
    <a-space
      :align="align"
      style="backgroundColor: var(--color-fill-2);padding: 10px;"
    >
      <a-typography-text>Space:</a-typography-text>
      <a-button type="primary">Item2</a-button>
      <a-card title="Card"> Card content </a-card>
    </a-space>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
const state = reactive({
  align: 'center',
});

const { align } = toRefs(state);
</script>
```

--------------------------------

### Vuex Store Setup

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/state-management.en-US.md

Sets up the Vuex store by creating it and importing necessary types and modules. This file defines the root state and module interfaces.

```typescript
// store/index.ts
//In the example here, only key statements are kept. See the pro project for details.
import {
  createStore,
  useStore as VuexUseStore,
  Store as VuexStore,
} from'vuex';
import {RootState, UserStateTypes} from'./interface';
import {UserStoreModuleTypes} from'./modules/interface';

import modules from'./modules/index';

export type StoreModules = {
  user: UserStoreModuleTypes;
};
export interface StateModuler {
  user: UserStateTypes;
}
export type Store = UserStoreModuleTypes<Pick<StoreModules,'user'>>
```

--------------------------------

### Basic Affix Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/affix/README.en-US.md

Demonstrates the basic implementation of the Affix component. No specific setup is required beyond importing the component.

```vue
<template>
  <a-affix>
    <a-button type="primary">Affix top</a-button>
  </a-affix>
</template>

<script lang="ts" setup>
import { AButton, AAffix } from '@arco-design/web-vue'
</script>

```

--------------------------------

### Vue Virtual List Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/list/__demo__/virtual-list.md

Demonstrates how to enable and configure a virtual list for rendering 10,000 items in a Vue.js application using Arco Design Vue. It shows the setup for `virtualListProps` to manage performance with large datasets.

```vue
<template>
  <h3 :style="{ color: 'var(--color-text-2)' }">10000 items</h3>
  <a-list
    :style="{ width: `600px` }"
    :virtualListProps="{ height: 560 }"
    :data="list"
  >
    <template #item="{ item, index }">
      <a-list-item :key="index">
        <a-list-item-meta :title="item.title" :description="item.description">
          <template #avatar>
            <a-avatar shape="square"> A </a-avatar>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const list = reactive(Array(10000).fill(null).map((_, index) => {
  const prefix = `0000${index}`.slice(-5);
  return {
    title: 'Beijing Bytedance Technology Co., Ltd.',
    description: `(${prefix}) Beijing ByteDance Technology Co., Ltd. is an enterprise located in China.`,
  };
}));
</script>
```

--------------------------------

### Use User Store in a Vue Component

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/state-management-pinia.en-US.md

Import and utilize the user store within a Vue component's setup function. This example demonstrates how to access store actions like login, which requires an asynchronous call.

```typescript
import { defineComponent } from 'vue';
import { useUserStore } from '@/store';

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    const login = () => {
      const userInfo ={
        username: 'admin',
        password: 'admin',
      };
      await userStore.login(userInfo);
    }
    return {
      login,
    }
  }
})
```

--------------------------------

### Run Local Development Server

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md

Use this command to start the local development server. It utilizes Vite with a specific development configuration file.

```bash
npm run dev
```

```json
{
   "scripts": {
     "dev": "vite --config ./config/vite.config.dev.ts"
   }
}
```

--------------------------------

### Carousel with Customizable Indicator

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/carousel/__demo__/indicator.md

This example shows how to use radio groups to dynamically change the indicator type (dot, line, slider) and position (left, right, top, bottom, outer) of a carousel component. It includes basic setup for images and event handlers.

```vue
<template>
  <a-space direction="vertical" size="large">
    <a-radio-group
      type="button"
      @change="handleUpdateType"
      style="{ marginBottom: '10px' }"
      :modelValue="indicatorType"
    >
      <a-radio value="dot">dot</a-radio>
      <a-radio value="line">line</a-radio>
      <a-radio value="slider">slider</a-radio>
    </a-radio-group>
    <a-radio-group
      type="button"
      @change="handleUpdatePosition"
      :style="{ marginBottom: '20px' }"
      :modelValue="indicatorPosition"
    >
      <a-radio value="left">left</a-radio>
      <a-radio value="right">right</a-radio>
      <a-radio value="top">top</a-radio>
      <a-radio value="bottom">bottom</a-radio>
      <a-radio value="outer">outer</a-radio>
    </a-radio-group>
    <a-carousel
      :indicator-type="indicatorType"
      :indicator-position="indicatorPosition"
      show-arrow="never"
      :style="{
        width: '600px',
        height: '240px',
      }"
    >
      <a-carousel-item v-for="image in images">
        <img
          :src="image"
          :style="{
            width: '100%',
          }"
        />
      </a-carousel-item>
    </a-carousel>
  </a-space>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
const state = reactive({
  images: [
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
  ],
  indicatorType: 'dot',
  indicatorPosition: 'bottom',
});

const { images, indicatorType, indicatorPosition } = toRefs(state);

const handleUpdateType = (type) => {
  indicatorType.value = type;
};

const handleUpdatePosition = (position) => {
  indicatorPosition.value = position;
};
</script>
```

--------------------------------

### Run Build Command

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/build.en-US.md

Execute this command to package the project. After completion, a 'dist' folder containing deployable code will be generated.

```bash
npm run build
```

--------------------------------

### Install Arco Changelog

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-changelog/README.md

Install the changelog generator using npm.

```bash
npm install @arco-design/arco-changelog
```

--------------------------------

### Vuex Project Structure Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/state-management.en-US.md

Illustrates a common directory structure for organizing Vuex modules, including state, mutations, actions, getters, and type definitions.

```tree
├── modulers
│ ├── user (specific module, subject to actual project)
│ │ └── action-types.ts (action enumeration type)
│ │ └── actions.ts (action implementation)
│ │ └── getters.ts (specific implementation of getter)
│ │ └── index.ts (module entry)
│ │ └── mutations-types.ts (mutation enumeration type)
│ │ └── mutations.ts (specific implementation of mutations)
│ │ └── state.ts (state definition)
│ │ └── types.ts (Summary of module types)
│ ├── interface.ts (Summary of export modules)
├── index.ts (used to export store)
├── interface.ts (the definition of root)
├── vuex.d.ts (Declare Vue's custom type)
```

--------------------------------

### Initialize Arco Design Pro Project

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/start.en-US.md

Create a new Arco Design Pro project named 'hello-arco-pro' in the current directory. Follow the prompts to select the technology stack and project category.

```bash
cd someDir
arco init hello-arco-pro
```

--------------------------------

### Install Arco Design Vue

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/README.md

Install the Arco Design Vue package using npm or yarn.

```bash
// with npm
npm install @arco-design/web-vue

// with yarn
yarn add @arco-design/web-vue
```

--------------------------------

### Build Production Component Files

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-scripts/README.md

Use `build:component` to build production-ready component files.

```bash
arco-vue-scripts build:component
```

--------------------------------

### Basic Drawer Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/drawer/TEMPLATE.md

Demonstrates the fundamental implementation of the Drawer component. No specific setup is required beyond importing the component.

```vue
<template>
  <div>
    <a-button @click="visible = true">Open Drawer</a-button>
    <a-drawer v-model:visible="visible" title="Basic Drawer">
      <p>Drawer content...</p>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
</script>
```

--------------------------------

### Install Arco Vue Scripts

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-scripts/README.md

Install the Arco Design Vue scripts package using npm.

```bash
npm install @arco-design/arco-vue-scripts
```

--------------------------------

### Vue Basic Steps Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/steps/__demo__/basic.md

Demonstrates the basic usage of the a-steps and a-step components in Vue.js. Sets the current active step and displays content associated with each step.

```vue
<template>
  <div>
    <a-steps :current="2">
      <a-step>Succeeded</a-step>
      <a-step>Processing</a-step>
      <a-step>Pending</a-step>
    </a-steps>
    <a-divider />
    <div style="line-height: 140px; text-align: center; color: #C9CDD4; ">
      Step 2 Content
    </div>
  </div>
</template>
```

--------------------------------

### Install Arco Design Vue

Source: https://github.com/arco-design/arco-design-vue/blob/main/README.md

Install the Arco Design Vue package using npm, yarn, or pnpm.

```bash
npm install @arco-design/web-vue
```

```bash
yarn add @arco-design/web-vue
```

```bash
pnpm add @arco-design/web-vue
```

--------------------------------

### Comment Alignment Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/comment/__demo__/align.md

Sets the alignment of the datetime and actions for the comment component. This example shows right alignment.

```vue
<template>
  <a-comment author="Balzac" datetime="1 hour" align="right">
    <template #actions>
      <span class="action" key="heart" @click="handleLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }" />
        </span>
        <span v-else>
          <IconHeart />
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
      <span class="action" key="star" @click="handleStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }" />
        </span>
        <span v-else>
          <IconStar />
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>
      <span class="action" key="reply"> <IconMessage /> Reply </span>
    </template>
    <template #avatar>
      <a-avatar>
        <img
          alt="avatar"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        />
      </a-avatar>
    </template>
    <template #content>
      <div>
        A design is a plan or specification for the construction of an object or
        system or for the implementation of an activity or process, or the
        result of that plan or specification in the form of a prototype, product
        or process.
      </div>
    </template>
  </a-comment>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from '@arco-design/web-vue/es/icon';

const like = ref(false);
const star = ref(false);
const handleLikeChange = () => {
  like.value = !like.value;
};
const handleStarChange = () => {
  star.value = !star.value;
};
</script>

<style scoped>
.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}
</style>
```

--------------------------------

### Install Arco Design Vue

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/start.en-US.md

Use npm or yarn to install the Arco Design Vue package as a development dependency.

```shell
# npm
npm install --save-dev @arco-design/web-vue
# yarn
yarn add --dev @arco-design/web-vue
```

--------------------------------

### Basic Skeleton Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/skeleton/TEMPLATE.md

Demonstrates the basic implementation of the Skeleton component. No specific setup is required beyond importing the component.

```vue
<template>
  <div>
    <a-skeleton />
  </div>
</template>

<script lang="ts" setup>
import { ASkeleton } from '@arco-design/vue'
</script>

```

--------------------------------

### Basic ResizeBox Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/resize-box/TEMPLATE.md

Demonstrates the basic functionality of the ResizeBox component. No specific setup is required beyond importing the component.

```vue
<template>
  <a-resize-box>
    <div class="content">Content</div>
  </a-resize-box>
</template>

<script lang="ts" setup>
import { AResizeBox } from '@arco-design/web-vue'
</script>
<style>
.content {
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
```

--------------------------------

### All Result Types Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/result/README.en-US.md

Provides an example showcasing all available status types for the Result component. This can be used for testing or demonstration purposes.

```vue
<template>
  <div>
    <a-result status="info" title="Info Result" subtitle="Info message."></a-result>
    <a-result status="success" title="Success Result" subtitle="Success message."></a-result>
    <a-result status="warning" title="Warning Result" subtitle="Warning message."></a-result>
    <a-result status="error" title="Error Result" subtitle="Error message."></a-result>
    <a-result status="403" title="403 Result" subtitle="Forbidden message."></a-result>
    <a-result status="404" title="404 Result" subtitle="Not Found message."></a-result>
    <a-result status="500" title="500 Result" subtitle="Server Error message."></a-result>
  </div>
</template>

<script setup>
// No specific imports needed for basic status display
</script>
```

--------------------------------

### Build Production Application

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md

Execute this command to build the production-ready application. It includes type checking with vue-tsc and then proceeds with the Vite build process using a production configuration file.

```bash
npm run build
```

```json
{
   "scripts": {
     "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts"
   }
}
```

--------------------------------

### All Result Types Example - Vue

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/result/TEMPLATE.md

Provides an example showcasing all available status types for the Result component, demonstrating their appearance and usage.

```vue
<template>
  <a-space direction="vertical" size="large">
    <a-result status="success" title="Operation successful" />
    <a-result status="warning" title="Operation incomplete" />
    <a-result status="error" title="Operation failed" />
    <a-result status="403" title="Access denied" />
    <a-result status="404" title="Page not found" />
    <a-result status="500" title="Internal server error" />
  </a-space>
</template>

<script lang="ts" setup>
import { AResult, ASpace } from '@arco-design/vue'
</script>

```

--------------------------------

### Basic Popover Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/popover/README.en-US.md

Demonstrates the basic usage of the Popover component. Ensure the Popover component is imported and registered before use.

```vue
<template>
  <a-popover>
    <template #content>Content</template>
    <a-button>Hover me</a-button>
  </a-popover>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue';
</script>
<style scoped>
.arco-popover-content-class {
  padding: 12px;
}
</style>
```

--------------------------------

### Arco Design Vue Trigger Basic Usage Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/trigger/__demo__/basic.md

This example shows the most basic usage of the trigger. It includes examples for hover, click, and focus triggers, with unmountOnClose set to false for hover and click triggers. The content of the trigger is an empty state component with custom styling.

```vue
<template>
  <a-space>
    <a-trigger position="top" auto-fit-position :unmount-on-close="false">
      <span>Hover Me</span>
      <template #content>
        <div class="demo-basic">
          <a-empty />
        </div>
      </template>
    </a-trigger>
    <a-trigger trigger="click" :unmount-on-close="false">
      <a-button>Click Me</a-button>
      <template #content>
        <div class="demo-basic">
          <a-empty />
        </div>
      </template>
    </a-trigger>
    <a-trigger trigger="focus">
      <a-input placeholder="Focus on me" />
      <template #content>
        <div class="demo-basic">
          <a-empty />
        </div>
      </template>
    </a-trigger>
  </a-space>
</template>

<style scoped>
.demo-basic {
  padding: 10px;
  width: 200px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
```

--------------------------------

### Basic ResizeBox Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/resize-box/__demo__/basic.md

Demonstrates the basic usage of the ResizeBox component. The `directions` prop is set to 'right' and 'bottom', allowing resizing only on these sides. Includes style configurations for width, minWidth, maxWidth, and height.

```vue
<template>
  <div>
    <a-resize-box
      :directions="['right', 'bottom']"
      :style="{
        width: '500px',
        minWidth: '100px',
        maxWidth: '100%',
        height: '200px',
        textAlign: 'center',
      }"
    >
      <a-typography-paragraph
        >We are building the future of content discovery and
        creation.</a-typography-paragraph
      >
      <a-divider />
      <a-typography-paragraph>
        ByteDance's content platforms enable people to enjoy content powered by
        AI technology. We inform, entertain, and inspire people across language,
        culture and geography.
      </a-typography-paragraph>
      <a-divider>ByteDance</a-divider>
      <a-typography-paragraph
        >Yiming Zhang is the founder and CEO of
        ByteDance.</a-typography-paragraph
      >
    </a-resize-box>
  </div>
</template>
```

--------------------------------

### Basic ColorPicker Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/color-picker/TEMPLATE.md

Demonstrates the basic implementation of the ColorPicker component. No specific setup is required beyond importing the component.

```vue
<template>
  <a-color-picker v-model="color" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const color = ref('#165DFF');
</script>

```

--------------------------------

### Simple Transfer Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/transfer/TEMPLATE.md

A minimal example of the Transfer component, focusing on core functionality with default settings. Suitable for basic selection tasks.

```vue
<template>
  <a-transfer v-model="value" :data-source="mockData" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const mockData = ref([
  {
    key: '1',
    label: 'Option 1',
  },
  {
    key: '2',
    label: 'Option 2',
  },
]);
const value = ref(['1']);
</script>

```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/pagination/TEMPLATE.md

Demonstrates the basic setup for the Pagination component. No specific imports are required beyond the component itself.

```vue
<template>
  <a-pagination :total="50" />
</template>

<script lang="ts" setup>
import { APagination as aPagination } from '@arco-design/vue';
</script>

```

--------------------------------

### Vue Retractable Sidebar Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/layout/__demo__/resize.md

Use the `resizeDirections` prop on `a-layout-sider` to enable mouse-based resizing. This example allows resizing from the right edge.

```vue
<template>
  <div class="layout-demo">
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-sider :resize-directions="['right']"> Sider </a-layout-sider>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </div>
</template>
<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  background-color: var(--color-primary-light-4);
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
  background-color: var(--color-primary-light-3);
  min-width: 150px;
  max-width: 500px;
  height: 200px;
}

.layout-demo :deep(.arco-layout-content) {
  background-color: rgb(var(--arcoblue-6));
}
</style>
```

--------------------------------

### Complex Descriptions Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/descriptions/TEMPLATE.md

A comprehensive example showcasing various features of the Descriptions component, including different layouts, alignments, and bordered styles.

```vue
<template>
  <a-descriptions title="User Info" :column="{ xs: 1, sm: 2, lg: 3 }" bordered align="right">
    <a-descriptions-item label="Name">Arco Design Vue</a-descriptions-item>
    <a-descriptions-item label="Telephone">18100000000</a-descriptions-item>
    <a-descriptions-item label="Name">Arco Design Vue</a-descriptions-item>
    <a-descriptions-item label="Telephone">18100000000</a-descriptions-item>
    <a-descriptions-item label="Address">Hangzhou, Zhejiang, China</a-descriptions-item>
    <a-descriptions-item label="Email">arco.design@example.com</a-descriptions-item>
    <a-descriptions-item label="Website">
      <a-link>arco.design</a-link>
    </a-descriptions-item>
    <a-descriptions-item label="Status">Active</a-descriptions-item>
    <a-descriptions-item label="Notes" span="2">This is a longer note that spans two columns.</a-descriptions-item>
  </a-descriptions>
</template>

<script lang="ts" setup>
import { Descriptions } from '@arco-design/web-vue'
</script>
```

--------------------------------

### Bordered Descriptions Example

Source: https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/descriptions/__demo__/bordered.md

A basic example of the Descriptions component configured with the 'bordered' prop to display user information with borders and background colors.

```vue
<template>
  <a-descriptions :data="data" title="User Info" bordered />
</template>

<script setup lang="ts">
const data = [
  {
    label: 'Name',
    value: 'Socrates',
  },
  {
    label: 'Mobile',
    value: '123-1234-1234',
  },
  {
    label: 'Residence',
    value: 'Beijing',
  },
  {
    label: 'Hometown',
    value: 'Beijing',
  },
  {
    label: 'Address',
    value: 'Yingdu Building, Zhichun Road, Beijing',
  },
];
</script>
```