vue项目中使用TDesign的方法

下面是使用 TDesign 在 Vue 项目中的具体步骤：

步骤一：安装 TDesign

可以使用 npm 命令行工具进行安装：

npm install tdesign-ui

步骤二：配置 TDesign

在 Vue 项目中，可以通过 main.js 或者 App.vue 组件进行全局配置。

1. main.js 方式

在 main.js 文件中导入 TDesign 组件：

import Vue from 'vue'
import TDesign from 'tdesign-ui'

Vue.use(TDesign)

2. App.vue 方式

在 App.vue 文件中使用 import 来引入样式文件，并使用 install 方法进行配置：

<template>
  <td-design>
    <router-view/>
  </td-design>
</template>

<script>
import TDesign from 'tdesign-ui'
import 'tdesign-ui/lib/theme-chalk/index.css'

export default {
  name: 'App',
  created () {
    TDesign.install(Vue)
  }
}
</script>

步骤三：在组件中使用 TDesign

配置完成后即可在组件中使用 TDesign 提供的组件，如：

<template>
  <td-button>Click Me</td-button>
</template>

<script>
export default {
  name: 'DemoButton'
}
</script>

示例一：使用 TDesign 的按钮组件

<template>
  <td-button>Click Me</td-button>
  <td-button type="primary">Primary</td-button>
  <td-button type="success">Success</td-button>
  <td-button type="info">Info</td-button>
  <td-button type="warning">Warning</td-button>
  <td-button type="danger">Danger</td-button>
</template>

<script>
export default {
  name: 'DemoButton'
}
</script>

示例二：使用 TDesign 的表格组件

<template>
  <td-table :data="tableData">
    <td-table-column prop="name" label="Name"></td-table-column>
    <td-table-column prop="age" label="Age"></td-table-column>
    <td-table-column prop="address" label="Address"></td-table-column>
  </td-table>
</template>

<script>
export default {
  name: 'DemoTable',
  data() {
    return {
      tableData: [
        { name: 'Tom', age: 18, address: 'Shanghai' },
        { name: 'Jerry', age: 22, address: 'Beijing' }
      ]
    }
  }
}
</script>

以上就是在 Vue 项目中使用 TDesign 的方法和示例。