文章目录
1. 创建一个需要自定义的目录demo
2. 创建一个需要自定义的文件.vue
3. 编写文件中的内容template,script,style
4. 一定要加上router/index.js 中的路由配置否则跳转不到
demo.vue文件:
<template>
<section> <div>
<el-button @click="test()" type="default">TEST</el-button></div>
<div v-loading="pageLoading" class="page-container">
<el-form :model="queryForm" ref="queryForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="queryForm.name" placeholder="input your username"></el-input>
</el-form-item>
</el-form>
</div>
</section>
</template>
<script>
import BtUi from 'components/basic-ui/bontal-base-ui.umd.min.js';
const {
util, cacheUtil, axios, post, get, postFile} = BtUi.BtUtils;
window.Message =BtUi.Message;
window.MessageBox=BtUi.MessageBox;
// 这里是通过赋值将window对象中Message和MessageBox转换为BtUi中的message和messagebox
// 这里是vue本身组件开发的代码段。
export default {
name: "demo",//当前组件名字
mixins: [],
props: {
},
created(){
//创建时的方法
},
mounted(){
//绑定元素的方法
},
computed:{
//这个 是全部加载完成的操作
},
data(){
//初始化数据的方法
return {
pageLoading: false,
queryForm: {
},
rows: [],
total: 0,
pageNo: 1,
pageSize: 10,
}; //返回一个初始化的json数据格式
},
methods:{
// test:function(){
test:function(){
window.Message("侯治聪youare so bravo");
alert("good job");
}
},
filters:{
},
components: {
},
watch:{
}
}
</script>
<style lang="" scoped>
</style>