前端组件化基于UI组件化文档设计方案，通过模块化、组件化思想实现前端组件化。此文档主要介绍如下四部分内容：
模块化开发方案
项目灵活配置方案
CSS主题样式方案
项目环境配置
2. Vue-demo简介
此套前端组件化模板Vue-demo,采用Vue+Elemen+Echart+Axios等js库开发,项目中已经集成好常用依赖包管理文件,后续项目开发中无需重新安装,框架具备开箱即用功能,实际项目需求中可结合此模板进行拓展。
Vue-demo目前已安装的依赖包，后续无需重复安装。
可自己去网上下载喜欢的cur，然后再替换路径
<!--鼠标样式开始-->
<style>
body {
cursor: url(https://cos.cdn.azpay.cn/uploads/2021/11/28/arrow.cur),
default;
}
a,
img {
cursor: url(https://cos.cdn.azpay.cn/uploads/2021/11/28/btn.cur),
default;
}
</style>
<!--鼠标样式结束-->
什么是组件
通过对样式(css)模版(html)逻辑(js)的封装，构成一个内部作用域隔离的功能模块。组件通过props/attribute和Event进行统一的通信方式；组件拥有lifecycle钩子函数可以方便的对自身状态进行管理。通过使用组件来可以提升代码的可维护性和复用性。
表单组件
<template>
<el-form
:model="loginForm"
:rules="FormRules"
label-width="120px"
class="demo-ruleForm">
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password" />
</el-form-item>
<el-form-item label="姓名" prop="username">
<el-input type="text" v-model="loginForm.username"/>
</el-form-item>
<el-form-item label="Age" >
<el-input v-model="age" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false,
},
// 登录表单的校验规则
FormRules:{
// username的校验规则
username:[
{ required: true, message: '用户名不能为空', trigger: 'blur' },
],
// password的校验规则
password:[
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 4,max: 18, message: '密码长度需要在4-18位之间', trigger: 'blur' },
]
}
}
},
methods:{
}
}
</script>
<style scoped>
.dialog-footer button:first-child {
margin-right: 10px;
}
</style>
有疑问加站长微信联系（非本文作者）
