衡水网站建费用,网站备案信息批量查询,百度搜索引擎优化怎么做,手机营销网站模板免费下载Vue组件库Element 1 Element介绍 vue是侧重于VM开发的#xff0c;主要用于数据绑定到视图的#xff0c;ElementUI就是一款侧重于V开发的前端框架#xff0c;主要用于开发美观的页面的。 Element#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库主要用于数据绑定到视图的ElementUI就是一款侧重于V开发的前端框架主要用于开发美观的页面的。 Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。 Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。 学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。其官网地址Element - The worlds most popular Vue UI framework主要学习ElementUI中提供的常用组件 2 快速入门 首先我们先要安装ElementUI的组件库打开VS Code停止之前的项目然后在命令行输入如下命令 npm install element-ui2.15.3 具体操作如下图所示 然后我们需要在main.js这个入口js文件中引入ElementUI的组件库其代码如下 import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; ​ Vue.use(ElementUI); 具体操作如图所示 然后我们需要按照vue项目的开发规范在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue并且在组件文件中编写之前介绍过的基本组件语法代码如下 template ​ /template ​ script export default { ​ } /script ​ style ​ /style 具体操作如图所示 最后我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可具体操作如下图所示 然后找到按钮的代码紧接着我们复制组件代码到我们的vue组件文件中最后我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件具体操作步骤如下 然后App.vue组件中的具体代码如下代码是我们通过上述步骤引入element-view组件时自动生成的。 templatediv idapp!-- {{message}} --element-view/element-view/div /template ​ script import ElementView from ./views/Element/ElementView.vue export default {components: { ElementView },data(){return {message:hello world}} } /script style ​ /style ​ 然后运行我们的vue项目浏览器直接访问之前的7000端口 3 Element组件 组件学习比较简单只需要参考官方提供的代码然后复制粘贴即可。 3.1 Table表格 3.1.1 组件演示 Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。 接下来我们通过代码来演示。 首先我们需要来到ElementUI的组件库中找到表格组件如下图所示 然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示 template模板部分 script脚本部分 ElementView.vue组件文件整体代码如下 templatediv!-- Button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row ​!-- Table表格 --el-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/div /template ​ script export default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}} } /script ​ style ​ /style ​ 4.3.1.2 组件属性详解 那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性 data: 主要定义table组件的数据模型 prop: 定义列的数据应该绑定data中定义的具体的数据模型 label: 定义列的标题 width: 定义列的宽度 其具体示例含义如下图所示 PS:Element组件的所有属性都可以在组件页面的最下方找到 3.2 Pagination分页 3.2.1 组件演示 Pagination: 分页组件主要提供分页工具条相关功能。其展示效果图下图所示 接下来我们通过代码来演示功能。 首先在官网找到分页组件我们选择带背景色分页组件然后复制代码到我们的ElementView.vue组件文件的template中拷贝如下代码 el-paginationbackgroundlayoutprev, pager, next:total1000 /el-pagination3.2.2 组件属性详解 对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到 background: 添加北京颜色也就是上图蓝色背景色效果。 layout: 分页工具条的布局其具体值包含sizes, prev, pager, next, jumper, -, total, slot 这些值 total: 数据的总数量 然后根据官方分页组件提供的layout属性说明如下图所示 我们修改layout属性如下 layoutsizes,prev, pager, next,jumper,total 浏览器打开呈现如下效果 发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示 3.2.3 组件事件详解 对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习 size-change pageSize 改变时会触发 current-change currentPage 改变时会触发 其官方详细解释含义如下图所示 对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到如下图所示 然后我们找到对应的代码首先复制事件复制代码如下 size-changehandleSizeChange current-changehandleCurrentChange 此时Panigation组件的template完整代码如下 !-- Pagination分页 -- el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000 /el-pagination 紧接着需要复制事件需要的2个函数需要注意methods属性和data同级其代码如下 methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}}, 此时Panigation组件的script部分完整代码如下 script export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}} } /script 回到浏览器中我们f12打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果 3.3 Dialog对话框 3.3.1 组件演示 Dialog: 在保留当前页面状态的情况下告知用户并承载相关操作。其企业开发应用场景示例如下图所示 首先我们需要在ElementUI官方找到Dialog组件如下图所示 然后复制如下代码到我们的组件文件的template模块中 brbr !--Dialog 对话框 -- !-- Table -- el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-button ​ el-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table /el-dialog 并且复制数据模型script模块中 gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false, 其完整的script部分代码如下 script export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}} } /script4.3.3.2 组件属性详解 那么ElementUI是如何做到对话框的显示与隐藏的呢是通过如下的属性 visible.sync 是否显示 Dialog 具体释意如下图所示 visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后我们点击按钮触发事件修改属性值为true 然后对话框visible属性值为true所以对话框呈现出来。 3.4 Form表单 3.4.1 组件演示 Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。 表单在我们前端的开发中使用的还是比较多的接下来我们学习这个组件与之前的流程一样我们首先需要在ElementUI的官方找到对应的组件示例如下图所示 我们的需求效果是在对话框中呈现表单内容类似如下图所示 所以首先我们先要根据上一小结所学习的内容制作一个新的对话框其代码如下 brbr !-- Dialog对话框-Form表单 -- el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-button ​ el-dialog titleForm表单 :visible.syncdialogFormVisible ​ /el-dialog 还需要注意的是针对这个新的对话框我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示代码如下 dialogFormVisible: false,然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中但是此处官方提供的表单项标签太多所以我们只需要保留前面3个表单项组件其他多余的删除所以最终template部分代码如下 el-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog 观察上述代码我们发现其中表单项标签使用了v-model双向绑定所以我们需要在vue的数据模型中声明变量同样可以从官方提供的代码中复制粘贴但是我们需要去掉我们不需要的属性通过观察上述代码我们发现双向绑定的属性有4个分别是form.name,form.region,form.date1,form.date2,所以最终数据模型如下 form: {name: ,region: ,date1: ,date2:}, 同样官方的代码中在script部分中还提供了onSubmit函数表单的立即创建按钮绑定了此函数我们可以输入表单的内容而表单的内容是双向绑定到form对象的所以我们修改官方的onSubmit函数如下即可而且我们还需要关闭对话框 onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisiblefalse; //关闭表案例的对话框} 然后打开浏览器我们打开对话框并且输入表单内容点击立即创建按钮 最终vue组件完整代码如下同学们可以针对form表单案例参考该案例对应的template部分和script部分代码 templatediv!-- Button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row ​!-- Table表格 --el-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table ​br!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-pagination ​brbr!--Dialog 对话框 --!-- Table --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-button ​el-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-dialog ​brbr!-- Dialog对话框-Form表单 --el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-button ​el-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog/div /template ​ script export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});},//表单案例的提交事件onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisiblefalse; //关闭表案例的对话框}},data() {return {//表单案例的数据双向绑定form: {name: ,region: ,date1: ,date2:},gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false,dialogFormVisible: false, //控制form表单案例的对话框tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}} } /script ​ style ​ /style ​ 4.3.2 整体布局 此处肯定不需要我们自己去布局的我们直接来到ElementUI的官网找到布局组件如下图所示 从官网提供的示例我们发现由现成的满足我们需求的布局所以我们只需要做一位代码搬运工即可。拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可 el-containerel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container /el-container 打开浏览器此时呈现如下效果 因为我们没有拷贝官方提供的css样式所以和官方案例的效果不太一样但是我们需要的布局格式已经有具体内容我们有自己的安排。首先我们需要调整整体布局的高度所以我们需要在el-container上添加一些样式代码如下 !-- 设置最外层容器高度为700px,在加上一个很细的边框 -- el-container styleheight: 700px; border: 1px solid #eee 到此我们布局功能就完成了 4.3.3 顶部标题 对于顶部我们需要实现的效果如下图所示 所以我们需要修改顶部的文本内容并且提供背景色的css样式具体代码如下 el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-header 此时浏览器打开呈现效果如下图所示 至此我们的顶部标题就搞定了 此时整体代码如下 templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container/el-container/div /template ​ script export default {} /script ​ style ​ /style ​ 3.4 左侧导航栏 接下来我们来实现左侧导航栏那么还是在上述布局组件中提供的案例找到左侧栏的案例如下图所示 所以我们依然只需要搬运代码然后做简单修改即可。官方提供的导航太多我们不需要所以我们需要做删减在我们的左侧导航栏中粘贴如下代码即可 el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/template ​el-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item ​ ​/el-submenu /el-menu 删减前后对比图 然后我们打开浏览器展示如下内容 最后我们只需要替换文字内容即可。 此时整体代码如下 templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main/el-main/el-container/el-container/div /template ​ script export default {} /script ​ style ​ /style ​ 4Vue路由 4.1 路由介绍 将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级其结构如下 此时我们希望基于4.4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示 这就需要借助我们的vue的路由功能了。 前端路由URL中的hash(#号之后的内容与组件之间的对应关系如下图所示 当我们点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。 而我们vue官方提供了路由插件Vue Router,其主要组成如下 VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件 router-link请求链接组件浏览器会解析成a router-view动态视图组件用来渲染展示与路由路径对应的组件 其工作原理如下图所示 首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表; 然后我们页面提供一个router-link组件,用户点击发出路由请求; 接着我们的VueRouter根据路由请求在路由表中找到对应的vue组件 最后VueRouter会切换router-view中的组件从而进行视图的更新 4.2 路由入门 接下来我们来演示vue的路由功能。 首先我们需要先安装vue-router插件可以通过如下命令 npm install vue-router3.5.1 但是我们不需要安装因为当初我们再创建项目时已经勾选了路由功能已经安装好了。 然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改最终代码如下 import Vue  vue import VueRouter  vue-router ​ Vue.use(VueRouter) ​ const routes [{path: /emp,  //地址hashname: emp,component: () import(../views/tlias/EmpView.vue)  //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)} ] ​ const router new VueRouter({routes }) ​ export default router ​ 注意需要去掉没有引用的import模块。 在main.js中我们已经引入了router功能如下图所示 路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-lin和router-view,所以我们需要修改2个页面EmpView.vue和DeptView.vue我们左侧栏的2个按钮为router-link,其代码如下 el-menu-item index1-1router-link to/dept部门管理/router-link /el-menu-item el-menu-item index1-2router-link to/emp员工管理/router-link /el-menu-item 然后我们还需要在内容展示区域即App.vue中定义route-view作为组件的切换其App.vue的完整代码如下 templatediv idapp!-- {{message}} --!-- element-view/element-view --!-- emp-view/emp-view --router-view/router-view/div /template ​ script // import EmpView ./views/tlias/EmpView.vue // import ElementView ./views/Element/ElementView.vue export default {components: { },data(){return {message:hello world}} } /script style ​ /style ​ 但是我们浏览器打开地址 http://localhost:7000/ 发现一片空白因为我们默认的路由路径是/,但是路由配置中没有对应的关系 所以我们需要在路由配置中/对应的路由组件代码如下 const routes [{path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect:/emp //表示重定向到/emp即可}, ] 此时我们打开浏览器访问http://localhost:7000 发现直接访问的是emp的页面并且能够进行切换了其具体如下图所示 到此我们的路由实现成功。 5 打包部署 我们的前端工程开发好了但是我们需要发布那么如何发布呢主要分为2步 前端工程打包 通过nginx服务器发布前端工程 5.1 前端工程打包 接下来我们先来对前端工程进行打包 我们直接通过VS Code的NPM脚本中提供的build按钮来完整如下图所示直接点击即可 然后会在工程目录下生成一个dist目录用于存放需要发布的前端资源如下图所示 5.2 部署前端工程 5.2.1 nginx介绍 nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。 niginx在windows中的安装是比较方便的直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下直接解压即可如下图所示就是nginx的解压目录以及目录结构说明 很明显我们如果要发布直接将资源放入到html目录中。 6.2.2 部署 将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下如下图所示 然后我们通过双击nginx下得nginx.exe文件来启动nginx如下图所示 nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80 即可其中80端口可以省略其浏览器展示效果如图所示 到此我们的前端工程发布成功。 PS: 如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示