使用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>