ElementUI组件库的开发

(一)底层技术方法
第一阶段：SQL语句
第二阶段：PLSQL编程。

(二)后台技术方向
第一阶段：Java语言(必须)
第二阶段：Java技术(必须)
第三阶段：Java框架(主流)
主流框架：
SSM：Spring + SpringMVC + Mybatis
SSH：Spring + Struts2 + Hibernate

(三)前台技术方法
第一阶段：JavaScript语言
第二阶段：JavaScript框架
第三阶段：JavaScript组件
JavaScript语言
vue框架：elementui,viewui等组件库。
react框架：很多组件库。
angular框架：很多组件库。

前台开发：很强的自学能力。

##################################

ElementUI组件库的开发笔记

(1)解压包
vue-admin-template

(2)说明文档
README-zh.md

(3)安装依赖
npm install

(4)启动服务
npm run dev

(5)自定义组件
src/views/oa/user.vue
src/views/oa/department.vue

(6)配置路由
{
path: ‘/oa’,
component: Layout,
redirect: ‘/oa/user’,
name: ‘oa’,
meta: { title: ‘OA模块’, icon: ‘el-icon-s-help’ },
children: [
{
path: ‘user’,
name: ‘user’,
component: () => import(’@/views/oa/user’),
meta: { title: ‘用户模块’, icon: ‘table’ }
},
{
path: ‘department’,
name: ‘department’,
component: () => import(’@/views/oa/department’),
meta: { title: ‘部门模块’, icon: ‘tree’ }
}
]
}

(7)ElementUI官网查看组件复制、粘贴、改！

用户模块

    <el-table
  :data="tableData"
  style="width: 100%">

  <el-table-column
    property ="name"
    label="名字"
    width="180">
  </el-table-column>

  <el-table-column
    prop="age"
    label="年龄"
    width="180">
  </el-table-column>

</el-table>

</div>

export default {
name:‘user’,
data(){
return {
tableData: []
}
},
methods:{
getAll(){
axios.request({
url:‘http://127.0.0.1:8081/action04/find’,
method:‘get’
}).then((res) => {
console.log(res.data);
this.tableData = res.data;
}).catch((err) => {
console.log(err)
})
}
},
created:function(){
this.getAll();
}
}