Vue.js 项目中使用 View UI Plus 的完整指南

要在 Vue.js 项目中使用 View UI Plus，您需要按照以下步骤进行操作：

1. 安装 View UI Plus

您可以使用 npm 或 yarn 来安装 View UI Plus。在终端中运行以下命令：

npm install view-design view-design-plus -S

或者

yarn add view-design view-design-plus

2. 引入 View UI Plus

您需要在 Vue.js 项目的入口文件中引入 View UI Plus。在 main.js 文件中，添加以下代码：

import Vue from 'vue'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
import ViewUIPlus from 'view-design-plus'
import 'view-design-plus/dist/styles/iview.css'

Vue.use(ViewUI)
Vue.use(ViewUIPlus)

3. 使用 View UI Plus 组件

现在您可以在 Vue.js 项目中使用 View UI Plus 组件了。例如，要使用 View UI Plus 的可拖动表格组件，您可以在组件中添加以下代码：

<template>
  <div>
    <DragTable :columns='columns' :data='data'></DragTable>
  </div>
</template>

<script>
import { DragTable } from 'view-design-plus'

export default {
  components: {
    DragTable
  },
  data () {
    return {
      columns: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        }
      ]
    }
  }
}
</script>

这是一个简单的示例，您可以在 View UI Plus 文档中找到更多组件和用例。