0
0

前端（六）：Vue组件库Element

一、引入

  • Element：是饿了吗团队研发，一套为开发者、设计师和产品经理准备的基于vue2.0的桌面端组件库。
  • 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等。
  • 官网：https://element.eleme.cn/#/zh-CN

二、快速入门

1、安装ElementUI组件库（在当前工程目录下），在命令行执行命令：

npm install [email protected]

先在集成终端中打开，再执行指令：
在这里插入图片描述
在这里插入图片描述
检查node_modules，出现element-ui,代表安装成功。
在这里插入图片描述

2、引入ElementUI组件库（main.js中）

importElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

在这里插入图片描述
3、定义组件文件，访问官网，复制组件代码，调整。
在view下定义文件：
在这里插入图片描述
在这里插入图片描述
在APP.vue中引用elementView:
在这里插入图片描述
打开浏览器可以得到刚才引用的组件：
在这里插入图片描述

三、常见组件

表格、分页、对话框、表单
详情：https://element.eleme.cn/#/zh-CN/component/table

四、实战案例——创建员工管理系统页面

总体结构：
在这里插入图片描述

（一）在yapi中创建接口并写入数据

我创建出的链接是：https://yapi.pro/mock/481308/emp/getById

{"code":1,"message":"success","data":[{"id":1,"name":"张三","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":1,"job":"班主任","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"},{"id":2,"name":"李四","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":1,"job":"任课老师","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"},{"id":3,"name":"王五","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":1,"job":"任课老师","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"},{"id":4,"name":"刘小梅","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":2,"job":"任课老师","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"},{"id":5,"name":"刘大梅","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":2,"job":"任课老师","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"},{"id":6,"name":"刘梅","image":"https://img.keaitupian.cn/newupload/08/1628502171175140.jpg","gender":2,"job":"任课老师","entrydata":"2008-05-09","updatatime":"2024-08-07 15:30:00"}]}

在这里插入图片描述

（二）书写两个view页面

其中EmpView.vue的数据是通过axio获取第①步中写的

DeptView.vue

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="名称" width="250"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></div></template><script>
export default{data(){return{
            tableData:[{
                id:1,
                name:"学工部",
                updatetime:"2010-01-01 12:00:00"},{
                id:2,
                name:"教研部",
                updatetime:"2010-01-01 12:00:00"},{
                id:3,
                name:"就业部",
                updatetime:"2010-01-01 12:00:00"},{
                id:4,
                name:"人事部",
                updatetime:"2010-01-01 12:00:00"},{
                id:5,
                name:"行政部",
                updatetime:"2010-01-01 12:00:00"}]}},
    methods:{}}</script><style></style>

EmpView.vue:

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style=" border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true":model="searchForm"class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.gender" placeholder="请选择你的性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><el-date-picker v-model="searchForm.entrydata" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary"@click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border="1px"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="img" label="图像" width="140"><!-- 插槽 --><template slot-scope="scope"><img :src="scope.row.img" width="100px" height="70px"></template></el-table-column><el-table-column label="性别" width="140"><!-- 插槽 --><template slot-scope="scope">{{ scope.row.gender ==1?'男':'女'}}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydata" label="入职时间" width="180"></el-table-column><el-table-column prop="updatatime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><!-- 分页条 --><el-pagination background layout="total,sizes,prev, pager, next,jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container></el-container></div></template><script>importaxios from 'axios';

export default{
    el:'#app',data(){return{
            tableData:[],
             searchForm:{
                name: '',
                gender: '',
                entrydata:[]}}},
    methods:{onSubmit(){
            console.log('submit!');},
        handleSizeChange:function(val){alert("页码大小发生变化:"+ val)},
        handleCurrentChange: function (val){alert("页码发生变化:"+ val)}},mounted(){//发送异步请求，获取数据
        axios.get("https://yapi.pro/mock/481308/emp/getById").then((result)=>{this.tableData = result.data.data;});}};</script>

（三）在Router下的index.js中书写两个页面路径，方便点击跳转

importVue from 'vue'importVueRouter from 'vue-router'

Vue.use(VueRouter)const routes =[{
    path:'/emp',
    name:'emp',
    component:()=>import('../views/element/EmpView.vue')},{
    path:'/dept',
    name:'dept',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.
    component:()=>import(/* webpackChunkName: "about" */ '../views/element/DeptView.vue')},{
    path:'/',
    redirect :'/dept',
    component:()=>import('../views/element/DeptView.vue')},]const router =newVueRouter({
  routes
})

export default router

（四）在app.vue中控制两个页面动态展示

<template><!--<div id="app"><nav><router-link to="/">Home</router-link>|<router-link to="/about">About</router-link></nav><router-view/></div>--><div><!-- 静态展示 --><!--<emp-view></emp-view>--><!-- 动态展示 --><router-view></router-view></div></template><script>/* import EmpView from './views/element/EmpView.vue'; */
export default{
  components:{/* EmpView */},data(){return{}}}</script><style>/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
} */</style>

运行结果：
在这里插入图片描述

在这里插入图片描述

（五）打包

点击运行打包。打包完成后出现

dist

目录
在这里插入图片描述
在这里插入图片描述

（六）部署

Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占用内存少，并发能力强，在各大型的公司都有非常广泛的使用。
官网：https://nginx.org/
下载后解压文件到路径没有中文的目录下。
在这里插入图片描述
在这里插入图片描述

部署打包好的文件

：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下
在这里插入图片描述

启动

：双击

nginx.exe

启动，该服务器默认占用80端口号，但是打不开（通过查看任务管理器如果没有看到这个

nginx.exe

在后台运行，那么继续接下来修改端口号的操作，否则不用），通过日志文件发现端口号80被占用，在

conf

目录下的

nginx.conf

修改默认端口号,修改完成后，再双击

nginx.exe

启动，
在这里插入图片描述
在这里插入图片描述
访问我们的端口号（我的依旧是80没有改变），在地址栏输入

localhost:80

，可以直接访问到我之前写的DeptView和EmpView。

完结撒花~

标签： 前端 vue.js javascript
本文转载自: https://blog.csdn.net/qq_52200849/article/details/140956666
版权归原作者 yours_Gabriel 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端（六）：Vue组件库Element”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航