使用TypeScript创建Avue.js工程_avue typescript-优快云博客

本文介绍了如何使用VueCLI创建一个包含TypeScript、Router和Vuex的项目，然后集成Avue.js库，进行必要的配置如引入ElementUI和Avue的样式，更新shims-vue.d.ts文件，并展示了一个简单的数据表（CRUD）组件的使用示例。

使用TypeScript创建Avue.js工程

使用vue命令生成一个工程，在命令行输入：

vue create my-ts-avue

选择 Manually select features
在接下来的界面里选择TypeScript，再根据需求选择Router、Vuex。
之后不使用class-style decorator
其他全部默认选择即可。

安装avuejs，首先进入my-ts-avue目录

cd my-ts-avue

然后输入以下命令：

yarn add @smallwei/avue -S

用VSCode打开my-ts-avue目录，开始配置工程文件。引入avuejs主库，在项目根目录中的main.ts中，引入并使用avuejs的库，注意要放在import Vue之后。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';

Vue.use(ElementUI);
Vue.use(Avue);

引入element-ui和avue模块，编辑shims-vue.d.ts，增加：

declare module "element-ui";
declare module "@smallwei/avue";

运行工程

yarn run serve

添加avue代码，编辑Home.vue，改为

<template>
  <div id="app">
    <avue-crud ref="crud" :data="tableData" :option="tableOption"></avue-crud>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      tableData: [
        {
          username: "admin",
          password: "admin",
          type: 0,
        },
        {
          username: "password",
          password: "password",
          type: 1,
        },
      ],
      tableOption: {
        border: true,
        index: true,
        expand: true,
        stripe: true,
        selection: true,
        page: false,
        menuAlign: "center",
        align: "center",
        column: [
          {
            label: "用户名",
            prop: "username",
          },
          {
            label: "密码",
            prop: "password",
            type: "password",
          },
        ],
      },
    };
  },
});
</script>