vue
主要总结vue在项目中遇到的问题,做以记录,方便自己也方便别人
ithover
做一个优秀的码农,向大牛努力
展开
-
vue-admin-template地址栏刷新或F5刷新返回404或空白的问题
vue-admin-template刷新的时候会遇到404或空白的问题,这个问题是因为开启了history模式但是后台的nginx或apache并没有支持,这时把后台nginx或apache加上就可以了#nginxlocation / { try_files $uri $uri/ /index.html;}#apache<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^inde原创 2021-05-13 19:11:24 · 851 阅读 · 0 评论 -
element-ui的时间组件datetimepicker使用format,value-format格式化时间,格式化为本地时间
element-ui里面的时间样式有三种TimePicker,DatePicker,dateTimePicker但在使用的时候去发现设置了format格式却会被转为utc时间,这样就造成的数据的偏差对比才发面这三个组件都有一样的参数<!--timePicker--> <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00'原创 2021-05-13 18:47:41 · 6877 阅读 · 0 评论 -
vue-admin-template增加自定义环境配置文件build:test
vue-admin-template里面只在两个环境build:productionbuild:state但是线上还测试环境,预发布环境,等等,这次就加一个自已的测试环境配置文件,记录一下1.增加命令行,在package.js文件增加下面的命令 "scripts": { ....... "build:test": "vue-cli-service build --mode test", ....... },2 增加test配置文件增加文件.env.test#原创 2021-05-13 16:44:47 · 1020 阅读 · 0 评论 -
vue-admin-template + element-ui 改造table组件实现二次封装简化调用(三):组件调用操作表格数据--删除table表格数据
前面讲到到用自己封装的方法来实现table表格组件 tableHead: [ { field: 'date', label: 'date' }, { field: 'name', label: 'name', component: Name },//传入 Name组件渲染 { field: 'address', label: 'address' } ]这里的name就是我们自定议的插件,那么如果这个插件是个按钮,比如下面这样,那么在组件里操作原创 2021-05-07 21:26:44 · 417 阅读 · 0 评论 -
vue-admin-template + element-ui 改造table组件实现二次封装简化调用(一)
项目使用的是vue-admin-template的开发模板,但是vue-admin-template里并没有对table进行二次封装,导致使用的过程中在页面会产生大量的html代码,对开发来说很不友好,也无法做到页面的统一,为了后期的维护和升级,故将table组件做了二次封装###table封装<template> <el-table :data="tableData" style="width: 100%"> <template v-for="column i原创 2021-04-25 20:20:09 · 717 阅读 · 0 评论 -
vue-admin-template刷新页面跳转404处理
网上找了好多,大部分说的是将{ path: '*', redirect: '/404', hidden: true }放在路由最后就可实现,但新测这种方式对history方式的路由配置无效,history需要使用下面的方法来实现,已经验证过线上是可行的const createRouter = () => new Router({ mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }),原创 2021-04-25 19:29:45 · 1674 阅读 · 0 评论 -
vue-admin-template + element-ui实现搜索组件封装
因为最近要做项目的组件公共功能提取,尽量提高代码的可维护性,减少前端的开发工作量,故将前端常用的搜索项做了封装,这样页面使用时只用调用这个组件就可以了,话不多说直接上代码(ps也为了自己记录一下)###常用搜索组件封装<template> <el-form :inline="true"> <el-form-item v-for="(item, index) in SearchBoxData" :key="index" :label="item.label">原创 2021-04-26 21:45:33 · 1139 阅读 · 1 评论 -
vue-admin-template + element-ui 改造table组件实现二次封装简化调用(二)
上次使用vue具名插槽的方式来实现了table表格的封装,这次换一种更实现方式,让页面代码变得更加简洁,先说一下这次使用的是动态组件来实现封装,话不多说,直接上代码###table封装<template> <el-table :data="tableData" style="width: 100%"> <template v-for="(column,index) in tableHead"> <el-table-column :key=原创 2021-04-26 21:08:53 · 394 阅读 · 0 评论